Kako koristiti DataList kontrolu za stvaranje Galerija slika

Na kojoj razini težine

Preuzimanje informacija o

Da biste preuzeli ovaj uzorak koda, kliknite jednu od sljedećih veza:

Pregled tehničkih informacija

Možete pronaći Galerija slika široko koristi u mnogo društvenog umrežavanja web-mjesta, osobne i poslovne E web-mjesta. Galerija slika, na primjer, možda koristite za prikaz biblioteke osobne slike prenesene na osobnom web-mjestu. Dijaprojekcija je također popularne alat za prikaz slike na web-mjestima. Ovaj uzorak koda demonstrira kako stvoriti Galerija slika s image navigacijskog koristiti DataList i ImageButton kontrola u ASP.NET. Kliknite na sliku minijature u kontroli Datalist da biste prikazali veću verziju slike na stranici. Ovaj uzorak koda čita putove slike iz određenih direktorija u FileInfo polja. Zatim, FileInfo array koristi se za popunjavanje prilagođeni objekt tablica podataka koja je vezana za kontrolu Datalist . Ovaj uzorak koda implementira prilagođene stranična sustav koji omogućuje pet slike budu prikazani vodoravno na jednoj stranici. Sljedeće gumbe vezu koriste se za implementaciju prilagođenih stranična sustava:

• Prvi

• Prethodni

• Sljedeći

• Zadnji

Napomena Preporučujemo da koristite ovu metodu učitati više od pet slika odjednom.


Možete postaviti svojstvo SelectedIndex za kontrolu DataList ograničite broj slika minijatura koji mogu biti odabrani. Da biste naznačili koje slike odabrana, možete postaviti svojstvo SelectedStyle za kontrolu DataList .

Uzorak pregled

Ovaj uzorak koda sadrži sljedeća tri dijela:

• Kontrola slike za prikaz velike slike kada su odabrani korisnik.

• Kontrola DataList za popisivanje sličice navigacije.

• Četiri povezati gumbe za implementaciju navigacijske trake.

Možete preuzeti uzorak koda i slijedite ove korake za stvaranje Galerija slika:

1. Stvaranje web-aplikacije ASP.NET C# pod nazivom CSASPNETDataListImageGallery u Microsoft Visual Studio 2008.
   

2. Povucite kontrolu DataList na stranicu. Zatim koristite sljedeći kod za postavljanje svojstva RepeatColumns 5i postavite svojstvo RepeatDirection na vodoravne:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Da biste postavili predložak u DataList kontrolu vežete s poljem URL koristite sljedeći kod:
   <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. Da biste dodali četiri gumba navigacije stranice koristite sljedeći kod:
   <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. Otvorite datoteku Default.aspx.cs koda.

6. Uvoz System.Data i System.IO prostori stranice koristite sljedeći kod:
   using System.Data;
   using System.IO;

7. Umetanje sljedećeg koda za stvaranje dva nova svojstva, 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. Umetanje sljedećeg koda da biste dobili broj slike:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Umetanje sljedećeg koda za povezivanje kontrole 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. Umetanje sljedećeg koda za rukovanje događajima gumb stranice:
    //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. Umetanje sljedećeg koda rukovati slike pritisnite događaji:
    //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);
    }

Tehnologija kategorija

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Jezici

Ovaj uzorak koda je dostupna u sljedeći programski jezici:

Reference

Dodatne informacije o DataList kontrola poslužitelja, posjetite sljedeće web-mjesto Microsoft Developer (MSDN):

Opće informacije o kontroli DataList poslužiteljaDodatne informacije o tome kako odlučiti hoćete li koristiti DataGrid, DataList i Repeater kontrola, posjetite sljedeće web-mjestu MSDN:

Kako odlučiti kada koristiti kontrolu DataGrid, DataList i RepeaterDodatne informacije o stranična učinkovito podataka s kontrola ASP.NET 2.0 DataList i ObjectDataSource, posjetite sljedeće websit:

Opće informacije o stranična učinkovito podataka s kontrola ASP.NET 2.0 DataList i ObjectDataSource

Što je sve-u-jednom kod Framework?

Sve-u-jednom kod Framework prikazuje većina Microsoft razvojnih tehnika pomoću uzoraka koda u različitim jezicima programiranje. Svaki primjer pažljivo je odabrana, sastoji i dokumentirani Pokaži jedan uobičajeni scenarij šifru. Dodatne informacije o sve-u-jednom kod Framework, posjetite sljedeće Microsoftovo web-mjesto:

http://1code.codeplex.com

Kako pronaći više uzoraka sve-u-jednom kod Framework

Da biste pronašli više uzoraka sve-u-jednom Framework kod pretraživanja za "kbcodefx" s povezane ključne riječi na Microsoft podržava Web-mjesta. Ili, posjetite sljedeće Microsoftovo web-mjesto:

Sve-u-jednom kod Framework uzoraka