ASP.NET 2.0 - Criando um Blog IV

Como anda o nosso Blog ?  Vai bem , obrigado. Se você chegou agora veja os artigos anteriores já publicados:

Nesse artigo vou apresentar a criação da página que exibe uma mensagem selecionada e os comentários do Blog. Ao trabalho...

Criando a página de comentários do Blog

A página de comentários do Blog deverá exibir uma mensagem selecionada pelo usuário , apresentar os comentários (respostas) já efetuados e abrir um espaço para que o usuário digite o texto do seu comentário. Um esquema de leiaute para esta página pode ser visto a seguir:

Área 1
  • DataList1 - exibe a mensagem selecionada
  • SqlDataSource1 - Fonte de dados vinculada a tabela mensagens:

SELECT * FROM [Mensagens] WHERE ([MensagemID] = @MensagemID)

 

Área 2

  • DataList2 - exibe os comentários feitos
  • SqlDataSource2 - Fonte de dados vinculada a tabela de Comentários:

SELECT * FROM [Comentarios] WHERE ([mensagemID] = @mensagemID)

 

Área 3

  • Controles TextBox e Button criando a área para o usuário informar o texto do seu comentário e salvar na base de dados.
  • SqlDataSource3 - Possui os comandos para incluir, alterar, excluir dados de comentários feitos.

Vamos criar então a página ExibeMensagens.aspx.

1- Criando a área de exibição da mensagem

Abrindo o projeto que eu chamei de BlogMac clique com o botão direito do mouse sobre o nome do projeto e clique na opção Add New Item.

Na janela Templates selecione Web Form e informe o nome ExibeMensagens.aspx marcando as opções para selecionar o code-behind e a master page;

1- Selecione a página e no modo Design  inclua um componente DataList a partir da ToolBox na página;

2- Em DataLists Tasks , opção Choose DataSource, selecione a opção <new data source>

3- Na janela do assistente Choose your data connection selecione a connection já usada para o blog: BlogConnectionString e clique em Next>

4- Após selecionar a opção - Specify a custom SQL Statement  or Stored Procedure , na janela Configure de Select Statement , clique em Next e na aba SELECT defina a instrução SQL conforme abaixo: (SELECT * FROM [Mensagens] WHERE ([MensagemID] = @MensagemID))

Clique no botão Next> e defina os parâmetros usados pela instrução SQL conforme a figura abaixo; Clique em Next> e a seguir em Finish;

Com isso temos um DataList e um SqlDataSource que irá exibir a mensagem selecionada pelo usuário através do código da mensagem : MensagemID.

Vamos configurar o Datalist para exibir a mensagem selecionada. Iremos exibir a data , o título e a mensagem, para isso selecione o DataList e em DataList Tasks clique na opção Edit Templates , selecione o ItemTemplate deixe somente os Labels para a data o título e a mensagem;

Selecione  a Label Data e clique em Edit DataBindings, será exibida a janela Data Bindings , clique em Text e informe o valor: ctype(Eval("data"),dateTime).ToLongDateString() para exibir a data no formato apropriado.

Repita o processo para as Labels Titulo e Mensagem e defina a seguinte configuração para cada uma delas:

  1. Um Label para o título da mensagem - Label - Eval("titulo")
  2. O campo para exibir a mensagem -Label -  Eval("mensagem")   

Ao encerrar clique em End Template Editing.

2- Criando a área de exibição dos comentários

Vamos repetir todo o processo para exibir os comentários postados.

1- Selecione a página e no modo Design  inclua um componente DataList a partir da ToolBox na página;

2- Em DataLists Tasks , opção Choose DataSource, selecione a opção <new data source>

3- Na janela do assistente Choose your data connection selecione a connection já usada para o blog: BlogConnectionString e clique em Next>

4- Após selecionar a opção - Specify a custom SQL Statement  or Stored Procedure , na janela Configure de Select Statement , clique em Next e na aba SELECT defina a instrução SQL conforme abaixo: (SELECT * FROM [Comentarios] WHERE ([mensagemID] = @mensagemID))

Clique no botão Next> e defina os parâmetros usados pela instrução SQL conforme a figura abaixo; Clique em Next> e a seguir em Finish;

Com isso temos um DataList e um SqlDataSource que irá exibir os comentários para a mensagem selecionada pelo usuário através do código da mensagem : MensagemID.

Vamos configurar o Datalist para exibir os comentários existentes. Iremos exibir a data , o título, a mensagem, o autor e a data da postagem ,  para isso selecione o DataList e em DataList Tasks clique na opção Edit Templates , selecione o ItemTemplate deixe somente os Labels os campos definidos acima;

O leiaute do ItemTemlate deverá ser o seguinte:

A definição de cada um dos campos vinculados deverá ser a seguinte:

  1. Data da Postagem - Label - ctype(Eval("data"),datetime).ToLongDateString()
  2. Um label para o título da mensagem - Label - Eval("titulo")
  3. O campo para exibir a mensagem -Label -  Eval("mensagem")
  4. O campo para exibir o nome do autor - Eval("autor")
  5. O campo para exibir a data da postagem do comentário - Eval("data")

Ao encerrar clique em End Template Editing.

3- Criando a área de informação do texto do comentário

Agora vamos criar a área para o usuário informar o texto do seu comentário , além de se identificar.

Inclua alguns controles TextBox e Buton conforme o leiaute abaixo a esquerda;

A seguir , a partir da ToolBox , inclua um componente SqlDataSource , na página e usando a conexão já definida para o Blog, defina as instruções SQL para incluir , alterar e excluir dados da tabela Comentarios  conforme as figuras abaixo.(Eu só não estou mostrando a instrução SELECT * FROM Comentários da aba SELECT:)

Inclui dados na tabela Comentarios
Atualiza os dados da tabela Comentarios
Exclui dados da tabela Comentarios

O toque final é incluir o seguinte código no code-behind, o arquivo ExibeMensagens.aspx.vb:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

    SqlDataSource3.Insert()

     DataList2.DataBind()

End Sub

 

Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles         DataList1.ItemDataBound

    TextBox1.Text = "Re:" & CType(e.Item.FindControl("titulo"), Label).Text

End Sub

 

O código acima é muito simples:

1 - O código do evento Click do botão - Button1 - refere-se ao botão Enviar que irá salvar o texto na tabela Comentarios;

2 - O código do evento ItemDataBound do DataList que obtém o valor do autor e exibe na caixa de texto apropriada;

Nota: O evento ItemDataBound  é disparado quando uma nova linha é incluída no DataList durante o DataBind(). Podemos usar este evento para obter os valores que estão sendo incluídos e efetuar validações.

Vamos executar a página e verificar o resultado obtido na página ExibeMensagens.aspx. Veja abaixo:

Desta forma finalizamos as páginas de exibição de mensagens e comentários com área para o usuário informar o texto de seu comentário e enviar ao Blog.

A próxima etapa é criar a página para exibição dos arquivos e o RSS do Blog.

Veja a continuação do artigo em : Criando um Blog V

A vídeo Aula deste artigo esta no Super DVD Vídeo Aulas

Até o próximo artigo ASP .NET 

José Carlos Macoratti