Kako koristiti DataList kontrolu za stvaranje Galerija slika

UVOD

Ovaj članak opisuje uzorak sve-u-jednom framework koji je dostupan za preuzimanje. Ovaj uzorak koda demonstrira kako stvoriti Galerija slika aplikaciju korištenjem kontrole DataList u ASP.NET. Uzorak paket možete dobiti iz sljedeće ikone za preuzimanje.

Na kojoj razini težine




alternate text

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:


Jezik

Naziv projekta

Visual C#

CSASPNETDataListImageGallery

Vizualna Basic.NET

VBASPNETDataListImageGallery

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

Više informacija

Š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

Rapid objavljivanje Izjava o odricanju odgovornosti

Microsoft corporation i/ili njegovi dobavljači odgovaraće provjerite nikakva jamstva o prikladnosti, pouzdanost ili točnost informacija i povezane grafike sadržavao spominju u ovom dokumentu. Takve informacije i povezane grafike su daje "kakav je" bez jamstava. Microsoft i/ili njegovi dobavljači odgovaraće Ovime se disclaim svih JAMSTAVA i uvjete s obzirom na ove informacije i povezane grafike, uključujući i sve implicitna jamstva i uvjete utrživosti, prikladnosti za određenu svrhu, Isključujemo trud, naslov i ne-povrede prava. Posebno prihvaćate da nijedan događaj bit Microsoft i/ili njegovi dobavljači će je obavezan za sve direktne, indirektne, KAZNENE, slučajne, posebne, posljedične štete ili štete neće uključujući, bez ograničenja, štete gubitak korištenje podataka ili dobit proizašle iz odsutnosti ili na bilo koji način povezan s korištenje ili Nemogućnost korištenja informacija i povezane grafike sadržavao spominju u ovom dokumentu, bez obzira na temelju ugovora, povreda, objektivne odgovornosti, uže odgovornosti ili drukčije, čak i ako je Microsoft ili bilo koji od njegovih dobavljača Svakako mogućnost štete.

Potrebna vam je dodatna pomoć?

Proširite svoje vještine
Istražite osposobljavanje
Prvi koristite nove značajke
Pridružite se Microsoft Insidere

Jesu li ove informacije bile korisne?

Hvala vam na povratnim informacijama!

Hvala vam na povratnim informacijama! Čini se da bi vam pomoglo kad bismo vas povezali s nekim od naših agenata podrške za Office.

×