Kā lietot vadības DataList izveidot attēlu galerija

Grūtības līmenis

Informācija par lejupielādi

Lai lejupielādētu šo koda paraugu, noklikšķiniet uz vienas no šīm saitēm:

Tehniskais pārskats

Jūs varat atrast attēlu galerija plaši izmanto daudz sociālā tīkla vietnēm, personiskās vietnes un E-biznesa tīmekļa vietnes. Piemēram, var izmantot attēlu galerija parādīt personas augšupielādēt attēlu bibliotēka personiskās vietnes. Slaidrāde ir arī tautas rīks, kas rāda attēlus vietnēs. Šis parauga kods parāda, kā izmantot DataList un ImageButton vadīklas ASP.NET izveidot attēlu galerija navigācijas attēlu. Varat noklikšķināt uz sīktēlu Datalist kontroles lapā parādīt lielāku attēla versiju. Šis parauga kods uz FileInfo masīva lasa attēlu ceļi noteiktas katalogā. Pēc tam FileInfo masīvs tiek lietota, lai aizpildītu pielāgotu DataTable objektu, kas ir saistīti ar Datalist vadīklu. Šī koda paraugu arī ievieš pielāgotu lapošanas sistēmu, kas ļauj pieci attēli tiek parādītas horizontāli vienā lapā. Šādas saites pogas izmanto pielāgotas lapošanas sistēmas:

• Pirmais

• Iepriekšējā

• Nākamā

• Pēdējā

Piezīme. Mēs iesakām izmantot šo metodi ielādēt ne vairāk par piecām attēlus pēc kārtas.


Varat arī iestatīt rekvizītu SelectedIndex DataList vadības ierobežot sīktēlu attēlus, kurus var izvēlēties. Norāda, kura attēls tiek atlasīts, varat iestatīt rekvizītu SelectedStyle DataList vadīklas.

Parauga pārskats

Šī koda paraugu ir šādas trīs daļas:

• Attēla vadīklu parādīšanai lieli attēli, atlasot tās lietotājs.

• DataList vadīklu sarakstā sīktēlu navigāciju.

• Četras saite pogu navigācijas joslā ieviešanai.

Varat lejupielādēt parauga kods un lai izveidotu attēlu galeriju, rīkojieties šādi:

1. Izveidojiet nosaukumu CSASPNETDataListImageGallery Microsoft Visual Studio 2008 c# ASP.NET tīmekļa lietojumprogrammu.
   

2. Ievelciet DataList kontroles lapu. Pēc tam šo kodu izmantošana iestatīt rekvizīta RepeatColumns 5un iestatiet rekvizīta RepeatDirection horizontāli:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Iestatīt veidni DataList vadīklu piesaistīt laukam URL izmantot šādu kodu:
   <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. Pievienot lappuses navigācija četrām pogām izmantot šādu kodu:
   <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. Atveriet failu Default.aspx.cs kodu.

6. Lapā importēt System. Data un System.IO nosaukumvietas izmantot šādu kodu:
   using System.Data;
   using System.IO;

7. Ievietot divus jaunus rekvizītus, Page_Index un Page_Count izveidot šādu kodu:
   //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. Ievietot kodu, lai iegūtu attēlus skaitu:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Ievietojiet šo vadīklu DataList kodu:
   //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. Ievietot kodu apstrādāt lapu pogas notikumu:
    //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. Ievietot kodu apstrādāt attēlu noklikšķiniet notikumi:
    //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);
    }

Tehnoloģiju kategorijā

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Valodas

Šī koda paraugu ir pieejams programmas šādās valodās:

Atsauces

Lai iegūtu papildinformāciju par servera vadības DataList , apmeklējiet šo Microsoft izstrādātāju (MSDN) vietni:

Vispārīga informācija par DataList servera vadīklaPapildinformāciju par to, kā noteikt, vai izmantot DataGrid DataList un papildu vadīklas, skatiet šajā MSDN vietnē:

Kā noteikt, vai izmantot DataGrid, DataList un papildu kontroleLai iegūtu papildinformāciju par efektīvā datu lapošanas ASP.NET 2.0 DataList kontroles un ObjectDataSource, apmeklējiet šādu websit:

Vispārīga informācija par efektīviem datu lapošanas ASP.NET 2.0 DataList kontroles un ObjectDataSource

Kas ir universālais kodu struktūra?

Universālais kodu struktūra parāda lielākā daļa Microsoft izstrādes tehnoloģijas, izmantojot citu programmēšanas valodu kodu paraugi. Katrs piemērs ir rūpīgi atlasīti veido un dokumentēta parādīt vienu kopēju kodu gadījumā. Papildinformāciju par vienkorpusa kodu struktūra, apmeklējiet šo Microsoft vietni:

http://1code.codeplex.com

Kā atrast vairāk daudzformātu kodu struktūra paraugi

Lai atrastu papildu daudzformātu kodu struktūra paraugus, meklējiet "kbcodefx" kopā ar saistītiem atslēgvārdiem Microsoft atbalsta vietni. Vai, apmeklējiet šo Microsoft vietni:

Universālais kodu struktūra paraugi