[ASP .NET] Simplificando o ListView

Hoje trago uma forma muito simples para preencher um ListView do ASP.NET. Utilizando o ListView, é possível separar o código HTML da linguagem de programação, criando um modelo bem próximo do que será renderizado no navegador.

Criando o modelo com ListView

Veja abaixo o código da página ASP.NET.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ul>
        <asp:ListView ID="ListView1" runat="server">
            <ItemTemplate>
                <li><asp:Label ID="Label1" runat="server" Text='<%# Eval("Nome")%>'/></li>
            </ItemTemplate>
        </asp:ListView>
    </ul>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Vamos entender o código.

Resultado da Página com ListView

Resultado da Página com ListView

Dentro da tag <form>, adicionei um tag <ul> e dentro dela criei um objeto ListView. Por que isso? Se atribuirmos ao DataSource desse ListView uma lista de objetos (faremos a seguir), a formatação que for declarada dentro do ListView, irá se repetir. No nosso caso, adicionamos a tag <ItemTemplate>que é necessária para criarmos o modelo de cara item que será exibido e dentro dela adicionamos a tag <li>, que será repetida para cada item do DataSource que for atribuido. Ainda no <li> nós adicionamos um controle <asp:Label /> e é aqui que mora um segredo. Atribuímos à propriedade desse controle a instrução Eval(“Nome”)*. A expressão Eval é utilizada para vincular uma propriedade da fonte de dados (DataSource) que será atribuída, no nosso caso ao ListView, com a propriedade do controle onde ela está. Ou seja, estou  vinculando a propriedade Nome da fonte de dados, com a propriedade Text do Label. Perceba que isso só é possível porque o Label está dentro do ListView que receberá a fonte de dados.

* “<%#” e “%>”, indicam que será utilizado um comando da linguagem de programação dentro do código HTML.

Preenchendo o ListView

Agora veremos com preencher o ListView que acabamos de criar. Veja no código HTML que criei um botão (<asp:Button />), no evento de clique desse botão é que vamos adicionar o código necessário para atribuirmos dados ao ListView.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim lista As New List(Of NOMES)

        lista.Add(New NOMES("Nome 1"))
        lista.Add(New NOMES("Nome 2"))
        lista.Add(New NOMES("Nome 3"))
        lista.Add(New NOMES("Nome 4"))

        ListView1.DataSource = lista
        ListView1.DataBind()
    End Sub

Acima vemos a procedure do botão, nela nos criamos um objeto chamado lista do tipo List(Of NOMES). Adicionamos alguns itens à lista e em seguida atribuímos à propriedade DataSource do ListView a nossa lista. Por último, executamos o método DataBind(), que segundo o MSDN:

“Vincula uma fonte de dados para o controle de servidor invocado e todos os seus controles filho.”

Mas, ainda falta um trecho do código. Falta a classe NOMES. Abaixo vemos o código completo do arquivo de código da página (CodeFile).

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim lista As New List(Of NOMES)

        lista.Add(New NOMES("Nome 1"))
        lista.Add(New NOMES("Nome 2"))
        lista.Add(New NOMES("Nome 3"))
        lista.Add(New NOMES("Nome 4"))

        ListView1.DataSource = lista
        ListView1.DataBind()
    End Sub
End Class

Class NOMES
    Public _Nome As String

    Sub New(ByVal nome As String)
        Me.Nome = nome
    End Sub

    Public Property Nome As String
        Get
            Return _Nome
        End Get
        Set(ByVal value As String)
            _Nome = value
        End Set
    End Property
End Class

Dentro da classe NOMES, criei uma propriedade chamada Nome e essa propriedade que passamos ao método Eval() como vimos acima.

É possível ainda, vincular um DataSource diretamente ao ListView, junto a sua declaração, mas isso fica para outro post :-).

Até uma próxima!