[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!

[ASP .NET] Instalando e utilizando Ajax Toolkit

Veja a seguir, como instalar o Ajax Toolkit no Visual Studio 2010[bb] e como utilizar o que há de mais interessante nesse poderoso conjunto de controles.

Com Ajax Toolkit é possível, por exemplo, adicionar de forma muito rápida calendários, upload de arquivo de foma dinâmica e até mesmo implementar a exibição de foto via gravatar, somente arrastando um objeto da toolbar.

Instalando o Ajax Toolkit

A instalação dos controles na toolbar do Visual Studio 2010 é tão simples quanto sua utilização. São 3 passos simples.

  1. Faça o download na página do projeto no codeplex (verifique a versão do .NET Framework) e descompacte o arquivo .zip.
  2. Com o Visual Studio aberto, clique como botão direito do mouse sobre a toolbar e clique no menu “Add Tab”, como mostra a imagem abaixo. Dê um nome amigável como “AjaxToolkit”
  3. Adicionar seção a toolbarAgora clique com o botão direito do mouse sobre a seção que criou na toolbar e clique no menu “Choose Items…”. Na janela que se abrir confira se a aba “.NET Framework Components” está seleciona, clique em “Browse…”, encontre o local onde extraiu os arquivos que baixou e selecione o arquivo “AjaxControlToolkit.dll”; por último clique em “Ok”. Pronto, agora todos os componentes do Ajax Toolkit estão na seção que você criou.Adicionando controle do Ajax Toolkit

Utilizando controles do Ajax Toolkit

Se você criou alguma página em ASP .NET utilizando o VS 2010, verá que o funcionamento para os novos controles será o mesmo. Basta arrastar um item da toolbar para a página e configurá-lo da maneira que desejar.

Abaixo mostro a utilização de dos controle do Ajax Toolkit: ConfirmButtonExtender e Gravatar. Veja o código abaixo.

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Gravatar ID="Gravatar1" runat="server" Email="EMAIL QUE DESEJA EXIBIR IMAGEM" />

        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Continuar com a ação?" TargetControlID="Button1"></asp:ConfirmButtonExtender>
    </form>
</body>
</html>

No exemplo acima, somente adicionei os controles, sem que estes executem alguma ação.

O primeiro controle, o asp:Gravatar, perceba que a implementação é muito fácil, sendo necessário somente, informar qual o Email que está vinculado ao Gravatar, que o avatar será exibido. Simples assim!
O segundo e meu preferido, asp:ConfirmButtonExtender, vinculado à um asp:Button, cria uma janela de confirmação quando o usuário clica sobre o botão. Chamo a atenção para as duas principais propriedades desse objeto:

  • TargetControlID: indica com qual o botão que o controle será vinculado
  • ConfirmText: qual mensagem será exibida ao usuário na janela de confirmação

Observação: o objeto “asp:ScriptManager” é necessário para o funcionamento do “ConfirmButtonExtender”.

Veja o resultado da página que criamos (para o teste, adicionei o meu email na propriedade doasp:Gravatar).

Algo que deve ser observado, é a chamada a biblioteca do Ajax Toolkit no inicio da página:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Repare que na propriedade TagPrefix foi colado “asp”, isso permite que os controles sejam declarados como “<asp:”. Caso não queira colocar essa declaração em cada página do site, altere o arquivo “web.config” do site e adicione as tags conforme exemplo. Observe que no exemplo abaixo não estão todas as tags que normalmente fazem parte no arquivo, as retirei para evidenciar as linhas referentes ao Ajax Toolkit. No seu arquivo somente adicione as linhas mostradas.

<configuration>
	<system.web>
  <compilation>
    <assemblies>
      <add assembly="AjaxControlToolkit, Version=3.5.40412.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"/>
    </assemblies>
  </compilation>
  <pages>
    <controls>
      <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="asp" />
    </controls>
  </pages>
	</system.web>
</configuration>

Muita atenção na propriedade “Version“, confira qual o versão do Ajax Toolkit que você baixou.

E por hoje é só galera. Espero que tenham ajudado!

[ASP .NET] Upload de Arquivo

No post de hoje veremos uma maneira bem fácil para fazer upload de arquivos com ASP .NET. Da forma que mostrarei, por exemplo, é possível verificar se já existe um arquivo como o mesmo no na pasta e dar um aviso ao usuário ou alterar o nome desse arquivo.

Utilizaremos somente:

  • Um <asp:FileUpload />; e
  • um <asp:Button />;

O segredo está no código executado no botão. A seguir, mostro o código html da página e também o codebehind necessário para fazer o upload e em seguida explico o código.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" Width="366px" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        IO.File.WriteAllBytes("d:/" & FileUpload1.FileName, FileUpload1.FileBytes)

    End Sub

No código acima temos a procedure do botão onde executamos um métodos que cria um arquivo numa pasta do servidor.

O método que utilizamos, WriteAllBytes, está na classe File, dentro o Namespace IO. Chamamos o método passando dois parâmetros: o primeiro com o caminho onde o arquivo será gravado e um array de bytes do arquivo que selecionamos; para retornar tal array, pegamos a propriedade FileBytes do objeto FileUpload.

Importante. A pasta onde serão gravados os arquivos, deve ter permissão para escrita.

Extra

No primeiro parâmetro, onde passamos no caminho onde o arquivo será gravado, onde está FileUpload1.FileName, poderíamos colocar algo mais, para não permitir que um arquivo com um nome que já exista na pasta, seja sobreposto pelo novo. Abaixo temos o código do botão, mas com uma pequena alteração. Adicionei ao nome do arquivo que será gravado um GUID gerado pela função NewGuid. Dessa forma, o nome do arquivo ficaria com algo do tipo: fd81e93b-aa14-47b1-ab41-2779ce9138c3NOME_ORIGINAL_DO_ARQUIVO.txt.

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

        IO.File.WriteAllBytes("d:/" & Guid.NewGuid.ToString & FileUpload1.FileName, FileUpload1.FileBytes)

    End Sub

Outra coisa que poderia ser feito, é gerar uma hash MD5 com o nome original do arquivo.

Espero que tenha ajudado. Até uma próxima!