Cómo utilizar el control DataList para crear una galería de imágenes

Se aplica a: Microsoft ASP.NET 3.5


Haga clic aquí para ver el artículo original (en inglés): 2512242

INTRODUCCIÓN


Este artículo describe un ejemplo de All-In-One de framework que está disponible para su descarga. Este ejemplo de código muestra cómo crear una aplicación de galería de imágenes con el control DataList de ASP.NET. Puede obtener el paquete de ejemplo de los siguientes iconos de descarga.

Nivel de dificultad

Información de descarga

Para descargar este ejemplo de código, haga clic en uno de los siguientes vínculos:

Introducción técnica

Puede encontrar que la Galería de imágenes se utiliza ampliamente en muchos sitios de redes sociales, sitios personales y sitios Web de comercio electrónico. Por ejemplo, puede utilizar la Galería de imágenes para mostrar una biblioteca de imágenes personales en un sitio Web personal. Presentación de diapositivas también es una herramienta popular para mostrar imágenes en páginas Web. Este ejemplo de código muestra cómo utilizar el control DataList y controles ImageButton en ASP.NET para crear una galería de imágenes con la exploración de la imagen. Puede hacer clic en una imagen en miniatura en el control Datalist para mostrar una versión más grande de la imagen en la página. Este código de ejemplo lee las rutas de acceso de la imagen de un directorio determinado en una matriz de FileInfo . A continuación, se utiliza la matriz FileInfo para llenar un objeto DataTable personalizado que está enlazado al control Datalist . Este ejemplo de código también implementa un sistema de paginación personalizada que permite cinco imágenes que se muestran horizontalmente en una página. Los siguientes botones de vínculo se utilizan para implementar un sistema de paginación personalizada:
  • Primero
  • Anterior
  • Siguiente
  • Última
Nota: Se recomienda que utilice este método para cargar imágenes de no más de cinco a la vez.

También puede establecer la propiedad SelectedIndex para el control DataList limitar el número de las imágenes en miniatura que se pueden seleccionar. Para indicar que está seleccionada la imagen, puede establecer la propiedad SelectedStyle para el control DataList .

Resumen de ejemplo

Este ejemplo de código contiene tres partes:
  • Un control de imagen para mostrar imágenes de gran tamaño cuando se seleccionan por un usuario.
  • Un control DataList para mostrar las imágenes en miniatura para la navegación.
  • Cuatro vincularse para implementar la barra de exploración.
Puede descargar el código de ejemplo y siga estos pasos para crear una galería de imágenes:
  1. Crear una aplicación web ASP.NET C# que se denomina CSASPNETDataListImageGallery en Microsoft Visual Studio 2008.
  2. Arrastre un control DataList a una página. A continuación, utilice el código siguiente para establecer la propiedad RepeatColumns en 5y establezca la propiedad RepeatDirection en Horizontal:
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >
  3. Utilice el código siguiente para establecer la plantilla en el control DataList para enlazar a un campo de dirección 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. Utilice el código siguiente para agregar cuatro botones de navegación de la 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 el archivo de código de Default.aspx.cs.
  6. Utilice el código siguiente para importar los espacios de nombres System.Data y System.IO a la página:
    using System.Data;
    using System.IO;
  7. Inserte el código siguiente para crear dos nuevas propiedades, Page_Index y 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. Inserte el código siguiente para obtener el número de las imágenes:
    //return total number of images
    protected int ImageCount()
    {
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();
    return fi.GetLength(0);
    }
  9. Inserte el código siguiente para enlazar el control 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. Inserte el código siguiente para controlar los eventos del botón 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. Inserte el código siguiente para controlar la imagen, haga clic en 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);
    }

Categoría tecnología

  • ASP.NET 2.0
  • ASP.NET 3.5
  • ASP.NET 4.0

Idiomas

Este ejemplo de código está disponible en los siguientes lenguajes de programación:

IdiomaNombre del proyecto
Visual C#CSASPNETDataListImageGallery
Visual Basic.NETVBASPNETDataListImageGallery

Referencias

Para obtener más información acerca del control DataList de servidor, visite el siguiente sitio Web de Microsoft Developer (MSDN):Para obtener más información acerca de cómo decidir cuándo se debe utilizar el control DataGrid, DataList y Repeater (control), visite el siguiente sitio Web MSDN:Para obtener más información acerca de la paginación eficiente de los datos con el control DataList de ASP.NET 2.0 y el origen ObjectDataSource, visite el siguiente websit:

Más información


¿Qué es-One Code Framework?

-One code Framework muestra la mayoría de las técnicas de desarrollo de Microsoft mediante el uso de ejemplos de código en diferentes lenguajes de programación. Cada ejemplo está cuidadosamente seleccionado, compuesto y documentado para mostrar un escenario común de código. Para obtener más información acerca de-One Code Framework, visite el siguiente sitio Web de Microsoft:

Cómo encontrar más ejemplos de código de Framework All-In-One

Para encontrar más ejemplos de código de Framework en uno, busque "kbcodefx" con las palabras clave relacionadas en Microsoft sitio Web de soporte. O bien, visite el siguiente sitio Web de Microsoft:
Renuncia de publicación rápida
Microsoft corporation y/o sus respectivos proveedores no se responsabilizan de la idoneidad, fiabilidad o exactitud de la información y los gráficos relacionados contenidos en este documento. Dicha información y los gráficos relacionados se proporcionan "tal cual" sin garantía de ningún tipo. Microsoft y/o sus respectivos proveedores RENUNCIAN por la presente a toda garantía y condición respecto a esta información y gráficos relacionados, incluida toda garantía implícita y condiciones de comerciabilidad, idoneidad para un fin determinado, esfuerzo razonable, título y ausencia de infracción. Usted acepta específicamente que en ningún caso Microsoft o sus proveedores serán responsables de daños directos, indirectos, PUNITIVOS, INCIDENTALES, especiales, consecuentes o cualquier daño, incluidos, sin limitación, daños por pérdida de uso, datos o beneficios, que surja de o en cualquier modo conectados con el uso o la incapacidad para utilizar la información y los gráficos relacionados contenidos en este documento, basado en contrato, AGRAVIO, negligencia, responsabilidad estricta o de otro tipo, incluso si Microsoft o cualquiera de sus proveedores hubiera sido advertida de la posibilidad de daños.