Cum se utilizează DataList de control pentru a crea o galerie de imagini

Dificultate

Informații despre Descărcare

Pentru a descărca acest exemplu de cod, faceți clic pe unul dintre următoarele linkuri:

Prezentare generală a tehnice

Este posibil să găsiți Galeria de imagini este utilizat pe scară largă în multe site-uri de rețele sociale, site-uri personale și E-Business site-uri web. De exemplu, aveți posibilitatea să utilizați Galeria de imagini pentru a afișa o bibliotecă de imagini încărcate personale pe un site personal. Prezentarea este, de asemenea, un instrument popular pentru a afișa imagini pe site-uri web. Acest cod de exemplu demonstrează cum se utilizează DataList și ImageButton controale în ASP.NET pentru a crea o galerie de imagini cu imaginea de navigare. Faceți clic pe o imagine redusă în Datalist de control pentru a afișa o versiune mai mare a imaginii pe pagina. Acest exemplu de cod citește căile de imagine de la un anumit director într-o matrice AuthConfig . Apoi, matrice AuthConfig este utilizat pentru a popula un obiect DataTable particularizat, care este legat la controlul Datalist . Această mostră de cod implementează, de asemenea, un sistem de paginare particularizate care permite cinci imagini să se afișeze orizontal pe o singură pagină. Următoarele link-ul de butoane sunt folosite pentru a implementa un sistem de paginare particularizată:

• Mai întâi

• Anterioară

• Next

• Ultima

Notă Vă recomandăm să utilizați această metodă pentru a încărca imaginile nu mai mult de cinci o dată.


De asemenea, puteți seta proprietatea SelectedIndex pentru controlul DataList pentru a limita numărul de imagini miniatură care pot fi selectate. Pentru a indica imagine care este selectată, puteți seta proprietatea SelectedStyle pentru controlul DataList .

Prezentare generală a eșantion

Această mostră de cod conține următoarele trei părţi:

• Un control imagine pentru a afișa imagini de dimensiuni mari, atunci când acestea sunt selectate de utilizator.

• Control DataList pentru listarea imaginile miniatură pentru navigare.

• Patru lega butoane pentru implementarea bara de navigare.

Se poate descărca mostre de cod și urmați acești pași pentru a crea o galerie de imagini:

1. Creați o aplicație web ASP.NET C#, care este numit CSASPNETDataListImageGallery în Microsoft Visual Studio 2008.
   

2. Glisați un control DataList într-o pagină. Apoi, utilizați următorul cod pentru a seta proprietatea RepeatColumns la 5și setează proprietatea RepeatDirection orizontală:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Utilizați următorul cod pentru a seta șablonul în controlul DataList se leagă la un câmp 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. Utilizați următorul cod pentru a adăuga patru butoane de navigare:
   <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. Deschideți fișierul de cod Default.aspx.cs.

6. Utilizați următorul cod pentru a importa spațiilor de nume System.Data și System.IO la pagina:
   using System.Data;
   using System.IO;

7. Introduceți codul următor pentru a crea două proprietăți noi, Page_Index și 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. Introduceți codul următor pentru a obține numărul de imagini:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Introduceți codul următor pentru a lega controlul 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. Introduceți codul următor pentru a gestiona pagina butonul evenimente:
    //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. Introduceți codul următor pentru a gestiona imagine click evenimente:
    //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);
    }

Tehnologie categorie

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Limbi

Această mostră de cod este disponibilă în următoarele limbi programare:

Referințe

Pentru mai multe informații despre controlul DataList server, vizitați următorul site Web Microsoft Developer (MSDN):

Informații generale despre controlul DataList serverPentru mai multe informații despre cum să decideți când se utilizează DataGrid, DataList și permite control, vizitați următorul site Web MSDN:

Cum să decideți când să utilizaţi control DataGrid, DataList și permitePentru mai multe informații despre paginare eficientă de date cu ASP.NET 2.0 DataList control și ObjectDataSource, vizitați websit următoarele:

Informații generale despre paginare eficientă de date cu ASP.NET 2.0 DataList control și ObjectDataSource

Ce este într-un singur cod Framework?

Cadru de cod într-un singur prezintă cele mai multe tehnici de dezvoltare Microsoft utilizând exemple de cod în diferite limbaje de programare. Fiecare exemplu este atent selectat, compus și documentate pentru a afișa un scenariu de cod comune. Pentru mai multe informații despre într-un singur cod Framework, vizitați următorul site Web Microsoft:

http://1code.codeplex.com

Cum să găsiți mai multe exemple de cod Framework într-un singur

Pentru a găsi mai multe exemple de cod Framework într-un singur, căutați "kbcodefx" împreună cu cuvinte cheie legate de pe Microsoft acceptă site-ul Web. Sau, vizitați următorul site Web Microsoft:

Exemple de cod Framework într-un singur