INTRODUÇÃO

Este artigo descreve um exemplo de estrutura de All-In-One que está disponível para download. Este exemplo de código demonstra como criar um aplicativo de galeria de imagens usando o controle DataList no ASP.NET. Você pode obter o pacote de amostra dos seguintes ícones de download.

Nível de dificuldade




alternate text

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:


Idioma

Nome do projeto

O Visual C#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

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

Mais informações

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

Isenção de responsabilidade de publicação rápida

Microsoft corporation e/ou em seus respectivos fornecedores tornam não oferece representações sobre a adequação, confiabilidade ou precisão das informações e gráficos relacionados aqui contidos. Todas essas informações e gráficos relacionados são fornecidos "como estão" sem garantia de nenhum tipo. Microsoft e/ou seus respectivos fornecedores se ISENTAM de todas as garantias e condições relativas a essas informações por meio deste instrumento e relacionadas a elementos gráficos, incluindo todas as garantias implícitas e condições de COMERCIABILIDADE, adequação a uma finalidade específica, mão esforço, título e não-violação. Você especificamente concorda que em nenhuma hipótese Microsoft e/ou seus fornecedores serão responsáveis por quaisquer danos diretos, indiretos, PUNITIVOS, INCIDENTAIS, danos especiais, CONSEQUENTES ou quaisquer danos, incluindo, sem limitação, danos por perda de uso, dados ou lucros, decorrentes ou de alguma forma associadas do uso ou da incapacidade de usar as informações e gráficos relacionados contidos aqui, com base em contrato, AGRAVO, negligência, responsabilidade estrita ou outra forma, mesmo que a Microsoft ou qualquer um de seus fornecedores foi avisada da possibilidade de ocorrência de danos.

Precisa de mais ajuda?

Expanda suas habilidades

Explore o treinamento >

Obtenha novos recursos primeiro

Ingressar no Microsoft Insider >

Essas informações foram úteis?

Qual é o seu grau de satisfação com a qualidade do idioma?
O que afetou sua experiência?

Obrigado pelos seus comentários!

×