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

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:

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: