Como utilizar o controlo DataList para criar uma galeria de imagens

Nível de dificuldade

Informações de transferência

Para transferir este exemplo de código, clique das seguintes hiperligações:

Descrição geral técnica

Poderá encontrar que a Galeria de imagens é amplamente utilizada em muitos sites de redes sociais, os Web sites pessoais e Web sites de comércio electrónico. Por exemplo, pode utilizar a Galeria de imagens para mostrar uma biblioteca de imagens carregadas pessoais num Web site pessoal. Apresentação de diapositivos também é uma ferramenta para apresentar imagens em Web sites mais popular. Este exemplo de código demonstra como utilizar os controlos de ImageButton e DataList no ASP.NET para criar uma galeria de imagens com navegação de imagem. Pode clicar numa imagem de miniatura no controlo Datalist para apresentar uma versão maior da imagem na página. Este exemplo de código lê os caminhos das imagens de um diretório específico numa matriz de FileInfo . Em seguida, a matriz FileInfo é utilizada para preencher um objecto de DataTable personalizado que está vinculado ao controlo Datalist . Este exemplo de código também implementa um sistema de paginação personalizada que permite cinco imagens seja apresentada horizontalmente numa página. Os seguintes botões de ligação são utilizados para implementar um sistema de paginação personalizada:

• Primeiro

• Anterior

• Seguinte

• Última

Nota Recomendamos que utilize este método para carregar mais do que cinco imagens ao mesmo tempo.


Também pode definir a propriedade SelectedIndex do controlo DataList limitar o número de miniaturas das imagens que podem ser seleccionados. Para indicar qual a imagem está seleccionada, pode definir a propriedade SelectedStyle para o controlo DataList .

Descrição geral de exemplo

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

• Um controlo de imagem para apresentar imagens grandes quando são seleccionadas pelo utilizador.

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

• Ligar quatro botões de barra de navegação de execução.

Pode transferir o código de exemplo e siga estes passos para criar uma galeria de imagens:

1. Crie uma aplicação web ASP.NET c# com o nome CSASPNETDataListImageGallery no Microsoft Visual Studio 2008.
   

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

3. Utilize o seguinte código para definir o modelo no controlo DataList para ligar 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. Utilize o seguinte código para adicionar quatro botões de 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 ficheiro de código Default.aspx.cs.

6. Utilize o seguinte código para importar os espaços de nomes System. data e System.IO para a página:
   using System.Data;
   using System.IO;

7. Insira o código seguinte 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 seguinte 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 controlo 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 processar eventos do botão 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. Inserir o seguinte código para a imagem da alça clique em eventos:
    //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 exemplo de código está disponível nas linguagens de programação seguintes:

Referências

Para mais informações sobre o controlo de servidor DataList , visite o seguinte Web site da Microsoft para programadores (MSDN):

Informações gerais sobre o controlo de servidor DataListPara mais informações sobre como decidir quando utilizar o DataGrid, DataList e controlo de Repetidor , visite o seguinte Web site da MSDN:

Como decidir quando utilizar o controlo DataGrid, DataList e repetidoraPara mais informações sobre a paginação de dados eficaz com o controlo ASP.NET 2.0 DataList e ObjectDataSource, visite o seguinte websit:

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

O que é a estrutura de código tudo-em-um?

Tudo-em-um estrutura de código mostra a maior parte das técnicas de desenvolvimento da Microsoft através da utilização de exemplos de código em diferentes linguagens de programação. Cada exemplo cuidadosamente é seleccionado, composto e documentado para mostrar um cenário comum do código. Para mais informações sobre a estrutura de código tudo-em-um, visite o seguinte Web site da Microsoft:

http://1code.codeplex.com

Como localizar mais amostras de estrutura de código tudo-em-um

Para localizar mais amostras de estrutura de código tudo-em-um, procure "kbcodefx" com palavras-chave relacionadas no Microsoft Web site de suporte. Ou visite o seguinte Web site da Microsoft:

Amostras de estrutura de código tudo-em-um