Kako se koristi DataList kontrolu da biste kreirali i galerija slika

Nivo težine

Informacije o preuzimanju

Da biste preuzeli ovaj uzorak koda, izaberite jednu od sledećih veza:

Tehnički pregled

Možda će vam galeriju slika je u širokoj upotrebi u mnogim sajtovima za socijalno umrežavanje, lične Web lokacije i Web lokacije E-biznis. Na primer, možda koristite galeriju slika da biste prikazali biblioteku slika lične otpremljene na lični Web sajt. Slideshow je takođe popularno sredstvo za prikazivanje slika na Web lokacijama. Ovaj uzorak koda ilustruje kako se koriste DataList i ImageButton kontrole u ASP.NET kreiranje je galerija slika sa slike za navigaciju. Možete da kliknete na sličicu u Datalist kontrole tako da prikazuje veću verziju slike na stranici. Ovaj uzorak koda čita putanje slike iz određene direktorijum u niz FileInfo . Onda, FileInfo niza se koristi za popunjavanje prilagođeni DataTable objekat koji je povezano sa Datalist kontrolom. Ovaj uzorak koda i implementira prilagođene stranične memorije sistem koji omogućava pet slike budu prikazane horizontalno na jednu stranicu. Dugmad za sledeću vezu koriste se za implementaciju prilagođenih sistem stranične memorije:

• Prvi

• Prethodni

• Sledeći

• Poslednji

Napomena Preporučujemo da koristite ovaj metod da učita više od pet slika u trenutku.


Takođe možete da postavite svojstvo " SelectedIndex " za DataList kontrolu da biste ograničili broj sličica koji mogu biti izabrani. Da biste naznačili koji slika je potvrđen, možete da postavite svojstvo " SelectedStyle " za DataList kontrolu.

Pregled uzorka

Ovaj uzorak koda sadrži sledeća tri segmenta:

• Kontrola slike za prikaz velike slike kada oni su izabrani od strane korisnika.

• Kontrola DataList za popisivanje sličica za navigaciju.

• 4 povežete dugmad za implementaciju traku za navigaciju.

Možete preuzeti uzorak koda i slijedite ove korake da biste kreirali i galerija slika:

1. Kreiranje C# ASP.NET web aplikacije koja se zove CSASPNETDataListImageGallery u Microsoft Visual Studio 2008.
   

2. Prevucite kontrolu DataList u stranicu. Zatim, koristite sledeći kôd da biste postavili svojstvo RepeatColumns na 5, i postavite svojstvo RepeatDirection na horizontalnoj:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Koristite sledeći kôd da biste postavili predložak u kontroli DataList da vežete za polje za URL adresu:
   <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. Koristite sledeći kôd da biste dodali četiri dugmeta za navigaciju na stranici:
   <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. Koristite sledeći kôd da biste uvezli prostori za imena System.Data i System.IO na stranicu:
   using System.Data;
   using System.IO;

7. Umetnite sledeći kôd da biste kreirali 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. Umetnite sledeći kôd da bi 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. Umetnite sledeći kôd da biste povezali kontrolu 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. Umetnite sledeći kôd za rukovanje događajima dugme 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. Umetnite sledeći kôd za rukovanje događajima kliknite na sliku:
    //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 sledećim programskim jezicima:

Reference

Za više informacija o kontroli DataList servera, posetite Web lokaciju sledeće Microsoft Developer (MSDN):

Opšte informacije o serveru kontrole DataListZa više informacija o tome kako da odlučite kada se koristi mreža podataka, DataList i repetitora kontrole, posetite sledeću MSDN Web lokaciji:

Kako da odlučite kada koristiti kontrolu mreža podataka "," DataList "i" repetitoraZa više informacija o na stranične memorije efikasnije podataka sa ASP.NET 2.0 DataList kontrolu i ObjectDataSource, posetite sledeće websit:

Opšte informacije o stranične na efikasan podataka sa ASP.NET 2.0 DataList kontrolu i ObjectDataSource

Da li je to sve-u-jednom Šifra Framework?

Sve-u-jednom Šifra okvir prikazuje većinu Microsoft razvojne tehnike pomoću primjere koda u različitim programskim jezicima. Svaki primer je pažljivo izabran sastoji i dokumentovano pokazati jedan zajednički Šifra scenarija. Za više informacija o sve-u-jednom Šifra Framework, posetite sledeće Microsoft Web lokacije:

http://1code.codeplex.com

Kako da pronađem više uzoraka koda Framework sve-u-jednom

Da biste pronašli više uzoraka koda Framework sve-u-jednom, potraga za „kbcodefx” zajedno sa srodnim ključne reči na Microsoft podržava Web lokacije. Ili, posetite sledeće Microsoft Web lokacije:

All-In-One uzorke koda Framework