Como usar o controle DataList para criar uma galeria de imagens

Nível de dificuldade

Informações sobre o download:

Para baixar este exemplo de código, clique em um dos links a seguir:

Visão geral técnica

Você pode localizar que a Galeria de imagens é amplamente usada em muitos sites de rede social, sites pessoais e sites de E-Business. Por exemplo, você pode usar a Galeria de imagens para mostrar uma biblioteca de imagens carregadas pessoais em um site pessoal. Apresentação de slides também é uma ferramenta para exibir imagens em sites popular. Este exemplo de código demonstra como usar o controle DataList e controles ImageButton no ASP.NET para criar uma galeria de imagens com navegação de imagem. Você pode clicar em uma imagem em miniatura no controle Datalist para exibir uma versão maior da imagem na página. Este código de exemplo lê os caminhos das imagens de um determinado diretório em uma matriz de FileInfo . Em seguida, a matriz de FileInfo é usada para preencher um objeto DataTable personalizado que está vinculado ao controle Datalist . Este exemplo de código também implementa um sistema de paginação personalizada que permite cinco imagens a serem exibidos horizontalmente em uma página. Os seguintes botões de link são usados para implementar um sistema de paginação personalizada:

• Primeiro

• Anterior

• Próxima

• Última

Observação: Recomendamos que você use este método para carregar mais do que cinco imagens ao mesmo tempo.


Você também pode definir a propriedade SelectedIndex do controle DataList limitar o número de imagens em miniatura que podem ser selecionados. Para indicar qual imagem estiver selecionada, você pode definir a propriedade SelectedStyle do controle DataList .

Visão geral de exemplo

Este código de exemplo contém três partes:

• Um controle de imagem para exibir imagens grandes quando eles são selecionados pelo usuário.

• Um controle DataList para listar as imagens em miniatura para navegação.

• Quatro vincular botões para implementar a barra de navegação.

Você pode baixar o código de exemplo e siga estas etapas para criar uma galeria de imagens:

1. Crie um aplicativo da web C# ASP.NET chamado CSASPNETDataListImageGallery no Microsoft Visual Studio 2008.
   

2. Arraste um controle DataList para uma página. Em seguida, use o seguinte código para definir a propriedade RepeatColumns para 5e defina a propriedade RepeatDirection como Horizontal:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Use o código a seguir para definir o modelo no controle DataList para vincular a um campo de URL:
   <ItemTemplate>
   <asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' />
   </ItemTemplate>

4. Use o código a seguir para adicionar quatro botões para a navegação de página:
   <asp:LinkButton ID="lbnFirstPage" Text="First" CommandName="first" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnPrevPage" Text="Prev" CommandName="prev" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnNextPage" Text="Next" CommandName="next" OnCommand="Page_OnClick" runat="server" Width="125px" />
   <asp:LinkButton ID="lbnLastPage" Text="Last" CommandName="last" OnCommand="Page_OnClick" runat="server" Width="125px" />

5. Abra o arquivo de código Default.aspx.cs.

6. Use o código a seguir para importar os namespaces System. Data e System.IO para a página:
   using System.Data;
   using System.IO;

7. Insira o seguinte código para criar duas novas propriedades, Page_Index e Page_Count:
   //property for current page index
   public int Page_Index
   {
   get { return (int)ViewState["_Page_Index"]; }
   set { ViewState["_Page_Index"] = value; }
   }
   //property for total page count
   public int Page_Count
   {
   get { return (int)ViewState["_Page_Count"]; }
   set { ViewState["_Page_Count"] = value; }
   }

8. Insira o código a seguir para obter o número de imagens:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Insira o seguinte código para vincular o controle DataList :
   //return the data source for DataList
   protected DataTable BindGrid()
   {
   //get all image paths
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   
   //save all paths to the DataTable as the data source
   DataTable dt = new DataTable();
   DataColumn dc = new DataColumn("Url", typeof(System.String));
   dt.Columns.Add(dc);
   int lastindex = 0;
   if (Page_Count == 0 || Page_Index == Page_Count - 1)
   {
   lastindex = ImageCount();
   }
   else
   {
   lastindex = Page_Index * PageSize + 5;
   }
   for (int i = Page_Index * PageSize; i < lastindex; i++)
   {
   DataRow dro = dt.NewRow();
   dro[0] = fi[i].Name;
   dt.Rows.Add(dro);
   }
   return dt;
   }

10. Insira o seguinte código para manipular eventos do botão de página:
    //handle the navigation button event
    public void Page_OnClick(Object sender, CommandEventArgs e)
    {
    if (e.CommandName == "first")
    {
    Page_Index = 0;
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else if (e.CommandName == "prev")
    {
    Page_Index -= 1;
    if (Page_Index == 0)
    {
    lbnFirstPage.Enabled = false;
    lbnPrevPage.Enabled = false;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "next")
    {
    Page_Index += 1;
    if (Page_Index == Page_Count - 1)
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    else
    {
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = true;
    lbnLastPage.Enabled = true;
    }
    }
    else if (e.CommandName == "last")
    {
    Page_Index = Page_Count - 1;
    lbnFirstPage.Enabled = true;
    lbnPrevPage.Enabled = true;
    lbnNextPage.Enabled = false;
    lbnLastPage.Enabled = false;
    }
    
    DataList1.SelectedIndex = 0;
    DataList1.DataSource = BindGrid();
    DataList1.DataBind();
    Image1.ImageUrl
    = ((Image)DataList1.Items[0].FindControl("IB_tn")).ImageUrl;
    }

11. Eventos de clique inserir o seguinte código para manipular a imagem:
    //handle the thumbnail image selecting event
    protected void IB_tn_Click(object sender, EventArgs e)
    {
    ImageButton ib = (ImageButton)sender;
    Image1.ImageUrl = ib.ImageUrl;
    DataList1.SelectedIndex = Convert.ToInt32(ib.CommandArgument);
    }

Categoria de tecnologia

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Idiomas

Este código de exemplo está disponível nos seguintes idiomas de programação:

Referências

Para obter mais informações sobre o controle DataList do servidor, visite o seguinte site da MSDN (Microsoft Developer):

Informações gerais sobre o controle DataList do servidorPara obter mais informações sobre como decidir quando usar DataGrid, DataList e Repeater control, visite o seguinte site da MSDN:

Como decidir quando usar o controle DataGrid, DataList e RepeaterPara obter mais informações sobre a paginação eficiente de dados com o controle ASP.NET 2.0 DataList e ObjectDataSource, visite o seguinte websit:

Informações gerais sobre a paginação eficiente de dados com o controle DataList do ASP.NET 2.0 e ObjectDataSource

O que é a estrutura de código All-In-One?

All-In-One código Framework mostra a maioria das técnicas de desenvolvimento Microsoft por meio de exemplos de código em linguagens de programação diferentes. Cada exemplo cuidadosamente é selecionado, composto e documentado para mostrar um cenário comum de código. Para obter mais informações sobre o All-In-One código Framework, visite o seguinte site da Microsoft:

http://1code.codeplex.com

Como encontrar mais amostras de código Framework All-In-One

Para obter mais exemplos de código Framework All-In-One, procure por "kbcodefx" com palavras-chave relacionadas no Microsoft site de suporte. Ou visite o seguinte site da Microsoft:

Amostras de código Framework All-In-One