Exibindo conteúdo HTML dinâmico em páginas ASP.NET

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Veja neste artigo como exibir conteúdo HTML dinâmico em páginas ASPX. Essa técnica é bastante aplicada em CMS (Content Management System, ou Sistema de Gerenciamento de Conteúdo), permitindo ao usuário definir o conteúdo das páginas de sua aplicação.

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.

Adição de um novo web form

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.

Projeto em execução

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.

Exemplo de uso do CKEditor

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.


 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?