Kaip naudoti valdymo DataList sukurti nuotraukų galerija

Sunkumo lygis

Atsisiųsti informaciją

Norėdami atsisiųsti šį kodo pavyzdys, spustelėkite vieną iš šių saitų:

Techninė apžvalga

Galite rasti vaizdų galerija yra plačiai naudojamas daugelyje socialinių tinklų svetaines, asmeninių svetainių ir E-verslo svetainių. Pavyzdžiui, galite naudoti vaizdų galerija asmeninė svetainė bus rodoma asmens įkeltų paveikslėlių biblioteką. Skaidrių demonstravimo taip pat įrankis Rodyti vaizdus svetainėse. Šis kodo pavyzdys rodo, kaip naudoti DataList ir ImageButton valdikliai, ASP.NET sukurti nuotraukų galerija su vaizdo naršymo. Galite spustelėti miniatiūrą Datalist valdiklį Norėdami pamatyti didesnę versiją vaizdas puslapyje. Šis kodo pavyzdys nuskaito vaizdo keliai iš tam tikrų katalogą į FileInfo masyvą. Tada, galite vykdyti pasirinktinį DataTable objekto, kuris yra susietas su Datalist valdymo naudojamas FileInfo masyvą. Šis kodo pavyzdys taip pat įgyvendina pasirinktinį ieškos sistema, kuri leidžia penki vaizdai gali būti rodomas horizontaliai viename puslapyje. Šį saitą mygtukai yra naudojami diegiant pasirinktinį ieškos sistemos:

• Pirmiausia

• Ankstesnių

• Kiti

• Paskutinį kartą

Pastaba. Rekomenduojame, kad šiuo būdu įkelti ne daugiau kaip penkias vaizdų vienu metu.


Taip pat galite nustatyti ypatybę SelectedIndex DataList valdiklis apriboti miniatiūros vaizdus, kuriuos galima pasirinkti. Nurodyti, kokia yra pažymėtas, galite nustatyti ypatybę SelectedStyle DataList valdymo.

Pavyzdys apžvalga

Šis kodo pavyzdys yra šių trijų dalių:

• Norėdami gauti didelių vaizdų rodymas vartotojui pasirinkus vaizdo valdikliu.

• DataList valdymo įtraukti naršymo miniatiūros vaizdus.

• Keturi reklaminės įgyvendinimo naršymo juostoje.

Galite atsisiųsti pavyzdinį kodą ir atlikite šiuos veiksmus jį sukurkite nuotraukų galerija:

1. Sukurkite C# ASP.NET žiniatinklio programą, pavadintą CSASPNETDataListImageGallery Microsoft Visual Studio 2008.
   

2. Vilkite DataList valdymo į puslapį. Tada, naudodami šį kodą RepeatColumns ypatybę kaip 5ir RepeatDirection ypatybę kaip horizontalusis:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Naudokite šį kodą nustatyti šabloną DataList valdymo susieti su lauku 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. Naudokite šį kodą pridėti puslapių naršymas keturi mygtukai:
   <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. Atidarykite failą Default.aspx.cs kodas.

6. Naudokite šį kodą importuoti į puslapį System.Data ir System.IO vardų sritys:
   using System.Data;
   using System.IO;

7. Įdėkite šį kodą sukurti dvi naujas, Page_Index ir 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. Įdėkite šį kodą į vaizdų skaičius:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Įterpti DataList valdiklį norite susieti šį kodą:
   //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. Įdėkite šį kodą tvarkyti puslapio mygtuką įvykiai:
    //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. Įdėkite šį kodą tvarkyti vaizdą spustelėkite įvykių:
    //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);
    }

Technologijos kategorija

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Kalbos

Šis kodo pavyzdys yra šių programavimo kalbų:

Nuorodos

Daugiau informacijos apie DataList serverio valdymo, apsilankykite šioje "Microsoft" programų kūrėjų (MSDN) svetainėje:

Bendroji informacija apie DataList serverio valdymoJei norite gauti daugiau informacijos apie tai, kaip nuspręsti, kada naudoti DataGrid, DataList ir ryšio valdymo, apsilankykite šioje MSDN svetainėje:

Kaip nuspręsti, kada naudoti DataGrid, DataList ir ryšio valdymasDaugiau informacijos apie veiksmingas duomenų puslapių kaitos ASP.NET 2.0 DataList kontrolės ir ObjectDataSource, rasite apsilankę šioje websit:

Bendroji informacija apie veiksmingas duomenų puslapių kaitos ASP.NET 2.0 DataList kontrolės ir ObjectDataSource

Kas yra viskas viename kodas sistemą?

Viskas viename kodas Framework rodo daugelis "Microsoft" kūrimo metodus naudojant programavimo kalbų kodų pavyzdžius. Kiekviename pavyzdyje atidžiai pasirinkti, sudarytas ir dokumentais parodyti vieną dažni kodas. Daugiau informacijos apie viskas viename kodas sistemą, apsilankykite šioje "Microsoft" svetainėje:

http://1code.codeplex.com

Kaip rasti daugiau viskas viename kodas sistemos pavyzdžiai

Norėdami rasti daugiau viskas viename kodas Framework pavyzdžių, ieškokite "kbcodefx" kartu su susijusių raktinių žodžių "Microsoft" palaikymo svetainėje. Arba, apsilankykite šioje "Microsoft" svetainėje:

Viskas viename kodas sistemos pavyzdžiai