Desenvolvimento de Website com ASP.NET e SQL Server – Parte 5

Olá caro leitor!
Você acompanhou até aqui o desenvolvimento de website com ASP.NET e SQL Server. Se não acompanhou, acesse:

Hoje iremos finalizar nosso projeto realizando o desenvolvimento das funcionalidades principais do nosso painel de controle. Iremos abordar os seguintes tópicos:

Criação das telas de gerenciamento de páginas
Uso do CK Editor
Link para encerrar sessão do usuário

Para iniciarmos, faça o download do fonte do projeto disponibilizado no Github.

Na teoria, as funcionalidades para o gerenciamento das páginas serão as mesmas que dos usuários com a diferença que iremos utilizar o CK Editor como nosso editor.
Para iniciar, vamos criar a nossa página gerenciar_paginas.aspx. Você já fez isso antes, então não tem segredo.
Clique com o botão direito sobre a pasta painel e em seguida Add new item.

Defina o nome para nossa página. Ela irá se chamar gerenciar_paginas.aspx.

Defina a MasterPage. Atente-se a selecionar a MasterPage do painel de controle.

A página ficará semelhante à de usuários. Essa página conterá um GridView para listar as páginas. Para preencher esse GridView utilizaremos um ObjectDataSource. Então, adicione um GridView, um ObjectDataSource e um Button. O Button será usado para nos direcionar para a página de cadastro.

Clique em cima do ObjectDataSource, e clique na seta para selecionar a opção Configure Data Source.

Na janela de configuração selecione o nosso objeto WebSite.Business.Paginas pois é nele que contem nossas regras de negocio.

Selecionaremos a opção para ListaPaginas.

Antes de concluir, clique na aba DELETE e selecione a o método ExcluiPagina e em seguida clique no botão Finish para concluirmos.

Agora que temos definido a opção de excluir e listar as páginas, vamos configurar nosso GridView. Para isso associaremos no GridView o ObjectDataSource. Clique no GridView e na seta que aparece no canto superior direito clique e seleciona o ObjectDataSource na opção Choose Data Source. Aproveite e selecione as opções Enable Paging e Enable Deleting. Essas opções irão habilitar a paginação e o link para excluir registro.

Vamos definir no GridView qual é o DataKeyNames. No nosso caso informaremos DataKeysName igual Id e foi como fizemos no caso dos usuários. Assim sendo, estamos informando ao GridView que a chave de cada registro será o Id e essa será utilizada quando formos excluir algum registro. Para definir o DataKeyNames, clique no GridView e vá em properties.

É possível definir mais de um, mais nesse caso não será necessário.
Agora defina um estilo para o GridView.

Agora já temos nosso resultado.

Vamos definir a funcionalidade do nosso botão Nova página. De duplo clique e vamos atribuir o evento.


protected void btnNovaPagina_Click(object sender, EventArgs e)
{
    Response.Redirect("editar_pagina.aspx");
}

Crie uma nova página. Ela deverá se chamar editar_pagina.aspx.

Defina a MasterPage do painel de controle.

Antes de darmos continuidade, nessa página iremos precisar do CKEditor e para isso precisaremos realizar o download. Faça o download do CKEditor e do CKEditor for ASP.NET. Ele será usado como nosso editor HTML.
Acesse o link direto da versão utilizada:

Agora adicionaremos o CKEditor for ASP.NET ao nossa Toolbox do Visual Studio. Descompacte o arquivo que fizemos o download. Clique em Add Tab, defina o nome e em seguida clique em Choose Item.

Procure o arquivo do CKEditor e adicione.

Agora é só utiliza-lo em nosso projeto.

Agora abra a página editar_pagina.aspx para adicionarmos os campos necessários para a edição da pagina. Inclua 1 HiddenField, 1 TextBox, 1 CheckBox, 2 Button e o CKEditor conforme o código abaixo.


<div class="form">
    <h3>Nova página</h3>
    <br />
    <asp:HiddenField ID="hdfId" runat="server" />
    <label class="label">Titulo</label>
    <asp:TextBox ID="txtTitulo" runat="server"></asp:TextBox><br />
    <label class="label">Texto</label>
    <ckeditor:ckeditorcontrol runat="server"></ckeditor:ckeditorcontrol>
    <asp:CheckBox ID="chkAtivo" runat="server" Text="Ativo" /><br />
    <div class="command">
        <asp:Button ID="btnSalvar" runat="server" Text="Salvar" />
        <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" />
    </div>
</div>
<br />

Se você executar a página agora, o CKEditor for ASP.NET não irá ser exibido. Para isso precisaremos copiar o CKEditor que realizamos o download para dentro do nosso projeto. Abra a pasta onde está salvo o projeto e copie para a raiz.

Agora sim nosso CKEditor irá aparecer.

O CKEditor possui muitas funcionalidades, mais muitas delas serão desnecessárias para nós nesse momento. Como desativar? Basta editar a propriedade ToolbarFull. Altere o conteúdo da propriedade incluindo o texto abaixo:


Cut|Copy|Paste|PasteText|PasteFromWord|-|Print|SpellChecker|Scayt|Undo|Redo|-|Find|Replace|-|SelectAll
/
Bold|Italic|Underline|Strike|-|Subscript|Superscript|NumberedList|BulletedList|-|Outdent|Indent|
Blockquote|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|Link|Unlink|Anchor|Image|Table|
HorizontalRule|Smiley|SpecialChar
/
Styles|Format|Font|FontSize|TextColor|BGColor|Maximize|Source

Agora ficou assim nosso editor.

Com a nossa página definida, vamos implementar nosso código. No CodeBehind da página, adiciona referencia a nossa classe de negocio e de entidades.


using UsuariosBO = WebSite.Business.Usuarios;
using Usuarios = WebSite.Entities.Usuarios;

Agora daremos um duplo clique no botão Salvar para implementarmos o código que salvará os dados da nova página. O código do botão ficara assim.


protected void btnSalvar_Click(object sender, EventArgs e)
{
    int Id;
    int.TryParse(hdfId.Value, out Id);
    string Titulo = txtTitulo.Text;
    string Texto = txtTexto.Text;
    bool Ativo = chkAtivo.Checked;

    Paginas pagina = new Paginas();
    pagina.Id = Id;
    pagina.Titulo = Titulo;
    pagina.Texto = Texto;
    pagina.Ativo = Ativo;

    PaginasBO paginasBO = new PaginasBO();
    bool Salvou = paginasBO.SalvaPagina(pagina);

    if (Salvou)
    {
        Response.Redirect("gerenciar_paginas.aspx");
    }
}

No código estamos recebendo todos os dados e os atribuindo na classe Paginas para posteriormente salva-lo. Após ser salvo, seremos redirecionados para a página que lista todas as nossas páginas criadas.
Vamos atribuir código ao botão cancelar para que o usuário possa desistir de editar os dados. De duplo clique sobre o botão Cancelar.


protected void btnCancelar_Click(object sender, EventArgs e)
{
    Response.Redirect("gerenciar_paginas.aspx");
}

Como ficará nosso código HTML.


<%@ Page Title="" Language="C#" MasterPageFile="~/painel/MasterPage.master" AutoEventWireup="true" CodeFile="editar_pagina.aspx.cs" Inherits="painel_editar_pagina" %>

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="form">
        <h3>Nova página</h3>
        <br />
        <asp:HiddenField ID="hdfId" runat="server" />
        <label class="label">Titulo</label>
        <asp:TextBox ID="txtTitulo" runat="server"></asp:TextBox><br />
        <label class="label">Texto</label>
        <ckeditor:ckeditorcontrol ID="txtTexto" runat="server" ToolbarFull="Cut|Copy|Paste|PasteText|PasteFromWord|-|Print|SpellChecker|Scayt|Undo|Redo|-|Find|Replace|-|SelectAll
/
Bold|Italic|Underline|Strike|-|Subscript|Superscript|NumberedList|BulletedList|-|Outdent|Indent|Blockquote|JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock|Link|Unlink|Anchor|Image|Table|HorizontalRule|Smiley|SpecialChar
/
Styles|Format|Font|FontSize|TextColor|BGColor|Maximize|Source"></ckeditor:ckeditorcontrol>
        <asp:CheckBox ID="chkAtivo" runat="server" Text="Ativo" /><br />
        <div class="command">
            <asp:Button ID="btnSalvar" runat="server" Text="Salvar" 
                onclick="btnSalvar_Click" />
            <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" 
                onclick="btnCancelar_Click" />
        </div>
    </div>
    <br />
</asp:Content>

E o código CodeBehind ficará dessa forma.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using PaginasBO = WebSite.Business.Paginas;
using Paginas = WebSite.Entities.Paginas;

public partial class painel_editar_pagina : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSalvar_Click(object sender, EventArgs e)
    {
        int Id;
        int.TryParse(hdfId.Value, out Id);
        string Titulo = txtTitulo.Text;
        string Texto = txtTexto.Text;
        bool Ativo = chkAtivo.Checked;

        Paginas pagina = new Paginas();
        pagina.Id = Id;
        pagina.Titulo = Titulo;
        pagina.Texto = Texto;
        pagina.Ativo = Ativo;

        PaginasBO paginasBO = new PaginasBO();
        bool Salvou = paginasBO.SalvaPagina(pagina);

        if (Salvou)
        {
            Response.Redirect("gerenciar_paginas.aspx");
        }
    }
    protected void btnCancelar_Click(object sender, EventArgs e)
    {
        Response.Redirect("gerenciar_paginas.aspx");
    }
}

Vamos implementar agora a página para que seja possível editar as páginas criadas.
Clique sobre o GridView da página de gerencia e clique na seta no canto superior direito em seguinda clique no link Edit Column.

Selecione um HyperLinkField e adicione. Mova até o inicio da lista. Selecione o HyperLinkField adicionado e defina o Text, DataNavigationUrlFields e DataNavigationUrlFormat e em seguida clique no botão OK. Teste a página.
Será necessário agora implementarmos em nossa página de edição de páginas a opção para receber uma QueryString para buscar os dados. Vamos implementar o Page_Load.


protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (Request.QueryString["id"] != null)
        {
            int Id;
            int.TryParse(Request.QueryString["id"], out Id);

            PaginasBO paginasBO = new PaginasBO();
            Paginas pagina = paginasBO.ListaPaginas(new Paginas(Id)).FirstOrDefault();

            hdfId.Value = pagina.Id.ToString();
            txtTitulo.Text = pagina.Titulo;
            txtTexto.Text = pagina.Texto;
            chkAtivo.Checked = pagina.Ativo;
        }
    }
}

Agora teste sua página.

Agora o resultado da edição de uma das minhas páginas.

Existe um detalhe importante que não mencionei. As páginas que eu desativo continuam aparecer. Vamos mudar o código do nosso menu. No foreach que monta o menu, vamos fazer um verificação se a página está ativa.
Veja como fica o código.


protected void Page_Load(object sender, EventArgs e)
{
    // Instancia da classe de Negocio
    WebSite.Business.Paginas paginasBO = new WebSite.Business.Paginas();
    // Chamada ao metodo que lista todas as paginas que irá gerar um array das mesmas
    WebSite.Entities.Paginas[] paginas = paginasBO.ListaPaginas();

    // Realizando um laço de repetição no array para ler cada registro
    foreach (WebSite.Entities.Paginas pagina in paginas)
    {
        if (pagina.Ativo)
        {
            // Formatando a string para que seja gerado uma saida conforme exemplo
            // <li>Titulo Pagina</li>
            string mnu = string.Format("<li><a href=\"pagina.aspx?id={0}\">{1}</a></li>", pagina.Id, pagina.Titulo);
            // Atribuindo o texto gerado no Server Control Literal
            ltlItensMenu.Text += mnu;
        }
    }
}

Agora para finalizar crie uma página chamado sair.aspx. Essa não necessita ser utilizando a MasterPage pois ela será usada para encerrar a sessão do painel de controle.

Agora vamos implementar o código no evento Page_Load que irá destruir a Session relacionada ao login do usuário.


protected void Page_Load(object sender, EventArgs e)
{
    Session.Remove("PainelAutenticado");
    Session.Remove("Usuario");
    Response.Redirect("login.aspx");
}

Assim concluímos o projeto proposto. Se você acha que ele para por ai, você tem inúmeras possibilidade basta ter criatividade e implementar em seu projeto.
Espero ter sido claro ao longo dos artigos e que não tenha deixado nenhuma dúvida. Fiquem a vontade de abrir um tópico no Forum para postar suas dúvidas e discutir as melhores praticas no desenvolvimento de um projeto com ASP.NET. Podem postar comentários que estarei pronto para responder.

Fonte do projeto: Github

Não deixe de participar do fórum. Siga o C# Brasil no Twitter e Facebook.
Até o próximo artigo e bons estudos!