Introdução
Um das principais vantagens das aplicações web, quando comparadas às aplicações desktop, é a flexibilidade que elas oferecem no que diz respeito à manutenção. Muitas vezes é possível fazer atualizações nas aplicações web, tanto na parte de front-end (HTML, CSS, JavaScript) quanto na de back-end (programação propriamente dita, acesso a bancos de dados, etc.), sem que o usuário perceba o processo.
Seguindo essa lógica, foi exatamente essa grande flexibilidade que fez com que pudessem surgir os CMS (Content Management Systems), sistemas de gerenciamento de conteúdo que permitem ao usuário final da aplicação customizar a estrutura e conteúdo das páginas.
De fato desenvolver um CMS completo requer tempo e várias linhas de código, então nesse artigo será mostrada uma solução para o desenvolvimento de uma das partes desse tipo de sistema. Aqui veremos como tornar dinâmico o conteúdo de uma página da aplicação, dando uma ideia geral de como funciona o processo. Com base no que será mostrado nesse artigo o leitor poderá desenvolver funcionalidades mais completas.
Como o objetivo aqui é enfatizar em como exibir conteúdo dinâmico em uma página ASPX, não iremos nos ater a questões como acesso a banco de dados, segurança ou padrões de projeto. Utilizaremos um conteúdo predefinido, mas que na prática pode vir de uma fonte de dados externa.
Criando o projeto
Para iniciar o desenvolvimento do exemplo, crie um novo projeto no Visual Studio, através do menu File > New > Web Site e escolha o template “ASP.NET Empty Web Site”. Essa opção cria um site vazio, sem nenhuma página. Nesse contexto esse tipo de projeto será útil, pois precisaremos apenas de uma página para demonstrar o funcionamento do que vamos implementar.
Em seguida, clique com o botão direito do mouse sobre o nome do projeto no Solution Explorer e selecione as opções Add > Web Form, como mostra a imagem abaixo.
Figura 1: Adição de um novo web form
Na caixa de diálogo que surgirá, solicitando o nome do formulário, mantenha a sugestão do nome “Default” e pressione o botão OK.
Vamos então definir um layout simples para a página Default.aspx, contendo um cabeçalho, um rodapé e um espaço para o corpo do documento. Substitua então o conteúdo da tag <body> pelo código da Listagem 1.
Listagem 1: Conteúdo do corpo da página Default.aspx
<div id="divCabecalho">
<asp:Literal ID="litCabecalho" runat="server" />
</div>
<div id="divCorpo">
<asp:Literal ID="litCorpo" runat="server" />
</div>
<div id="divRodape">
<asp:Literal ID="litRodape" runat="server" />
</div>Neste trecho de código está o componente chave para a inserção de conteúdo dinâmico: o Literal. O componente Literal permite inserir na sua propriedade Text textos contendo inclusive tags HTML, as quais são interpretadas e redenrizadas. Utilizaremos esse recurso para inserir nestes componentes o conteúdo do cabeçalho, do corpo e do rodapé do documento através de métodos que serão definidos no code behind.
Então, acesse o arquivo Default.aspx.cx no Solution Explorer e crie os métodos GerarCabecalho, GerarCorpo e GerarRodape, conforme os códigos apresentados nas listagens a seguir.
Listagem 2: Método para gerar o cabeçalho do documento
private string GerarCabecalho()
{
StringBuilder sb = new StringBuilder();
sb.AppendLine("<h1>Título da aplicação</h1>");
sb.AppendLine("<p>Este é um pequeno parágrafo descritivo, localizado no cabeçalho da página.</p>");
return sb.ToString();
}Listagem 3: Método para gerar o corpo do documento
private string GerarCorpo()
{
StringBuilder sb = new StringBuilder();
sb.AppendLine("<h3>Corpo do documento</h3>");
sb.AppendLine("<p>Aqui fica o conteúdo da página. Podemos inserir várias tags HTML, como listas:</p>");
sb.AppendLine("<ul>");
sb.AppendLine("<li>Item 1</li>");
sb.AppendLine("<li>Item 2</li>");
sb.AppendLine("<li>Item 3</li>");
sb.AppendLine("</ul>");
return sb.ToString();
}Listagem 4: Método para gerar o rodapé do documento
private string GerarRodape()
{
StringBuilder sb = new StringBuilder();
sb.AppendLine("<p>Aqui é o rodapé. <b>2012.</b> <i>Minha aplicação.</i></p>");
return sb.ToString();
}É importante que fique claro que estes conteúdos são predefinidos apenas para nível de exemplo. Em uma aplicação real o leitor poderia permitir que o usuário inserisse essas informações, afinal é esse o objetivo do CMS.
Agora resta chamar esses métodos no evento Load para que o texto gerado seja inserido na estrutura da página. Para isso, adicione o seguinte código no corpo do método Page_Load, já existente no Default.aspx.cs.
Listagem 5: Evento Load da página Default
protected void Page_Load(object sender, EventArgs e){
litCabecalho.Text = GerarCabecalho();
litCorpo.Text = GerarCorpo();
litRodape.Text = GerarRodape();
}
Testando a aplicação
Agora que já criamos todos os métodos necessários, podemos executar o projeto e ver o resultado. Pressionando F5 ou CTRL+F5 o browser padrão será aberto com a página Default.aspx, como podemos ver na Figura 2.
Figura 2: Projeto em execução
Repare que as tags que adicionamos foram corretamente interpretadas e exibidas no browser. Seguindo esse raciocínio, o usuário poderia montar estruturas complexas usando, por exemplo, um editor HTML para páginas web.
Não é o foco desse artigo a utilização desse tipo de editor, mas como sugestão fica o CKEditor, um editor HTML disponível para várias plataformas, incluindo ASP.NET e pode ser encontrado no link www.ckeditor.com. Usando esse tipo de editor, é possível permitir ao usuário estruturar o conteúdo em um editor de texto, dispondo de barras de ferramentas para formatação como negerito, sublinhado, inserção de links e tabelas, entre outras opções.
Na imagem a seguir temos um exemplo disponível no site da ferramenta.
Figura 3: Exemplo de uso do CKEditor
Conclusão
Como já foi dito, não é objetivo desse artigo explicar como usar algum editor como o CKEditor, mas sim mostrar como exibir na página um conteúdo HTML dinâmico. Vimos que para isso basta utilizar o componente Literal e definir sua propriedade Text, inserindo inclusive tags HTML.
Finalizamos então esse artigo. Espero que as informações aqui expostas possam ser úteis. Até a próxima.
