Hur du använder DataList-kontroll för att skapa ett bildgalleri

Svårighetsgrad

Information om hämtning

Klicka på någon av följande länkar om du vill hämta detta kodexempel:

Teknisk översikt

Du kan hitta bild galleriet är vanlig i många webbplatser för sociala nätverk, personliga webbplatser och webbplatser för E-Business. Du kan till exempel använda bild Galleri för att visa ett bibliotek med personliga överförda bilder på en personlig webbplats. Bildspel är också ett populärt verktyg för att visa bilder på webbplatser. Detta kodexempel visar hur du använder DataList och kontroller för ImageButton i ASP.NET skapa ett bildgalleri med image navigering. Du kan klicka på en miniatyrbild i Datalist -kontroll för att visa en större version av bilden på sidan. Denna exempelkod läser bildernas sökvägar från en viss katalog till ett FileInfo array. Sedan används FileInfo array för att fylla i ett anpassat DataTable -objekt som är bunden till Datalist -kontroll. Detta kodexempel implementerar också en anpassad sidindelning system där fem bilder ska visas vågrätt på en sida. Följande länk knappar används för att implementera en anpassad sidindelning system:

• Första

• Föregående

• Nästa

• Sista

Obs! Vi rekommenderar att du använder den här metoden för att ladda fler än fem bilder i taget.


Du kan också ange SelectedIndex -egenskapen för DataList -kontrollen för att begränsa antalet miniatyrbilder som kan väljas. Du kan ange egenskapen SelectedStyle för DataList -kontroll om du vill ange vilken bild som är markerad.

Exempel: översikt

Detta kodexempel innehåller följande tre delar:

• En bildkontroll för att visa stora bilder när de väljs av en användare.

• En DataList-kontroll för att visa miniatyrbilder för navigering.

• Fyra länka knappar för navigeringsfältet.

Du kan hämta exempelkoden och gör så här om du vill skapa ett bildgalleri:

1. Skapa ett webbprogram i ASP.NET C# som heter CSASPNETDataListImageGallery i Microsoft Visual Studio 2008.
   

2. Dra en DataList -kontroll till en sida. Sedan använder du följande kod för att ange egenskapen RepeatColumns till 5och ange egenskapen RepeatDirection till Vågrät:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Använd följande kod när du vill ange mallen i DataList -kontroll att binda till ett URL-fält:
   <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. Du kan använda följande kod för att lägga till fyra knappar på sidan navigering:
   <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. Öppna filen Default.aspx.cs kod.

6. Du kan använda följande kod för att importera System.Data och System.IO namnområden till sidan:
   using System.Data;
   using System.IO;

7. Infoga följande kod för att skapa två nya egenskaper, Page_Index och 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. Infoga följande kod för att få antalet bilder:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Infoga följande kod för att binda DataList -kontroll:
   //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. Infoga följande kod för att hantera händelser för sida-knapp:
    //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. Infoga följande kod för att hantera bild på händelser:
    //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);
    }

Kategori teknik

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Språk

Detta kodexempel är tillgänglig i följande programmeringsspråk:

Referenser

Mer information om DataList Serverkontrollen finns på följande Microsoft Developer (MSDN)-webbplats:

Allmän information om DataList serverkontrollMer information om hur du bestämmer dig att använda DataGridfinns DataList och Repeater kontroll på följande MSDN-webbplats:

Hur du avgöra när du ska använda DataGrid, DataList och Repeater-kontrollMer information om sidindelning av effektiv data med ASP.NET 2.0 DataList -kontroll och ObjectDataSourcefinns följande websit:

Allmän information om växlingsfilen med ASP.NET 2.0 DataList-kontroll och ObjectDataSource effektiv data

Vad är en allt-i-ett ramverk för kod?

Allt-i-ett ramverk för kod visar utvecklingstekniker för de flesta Microsoft med hjälp av kodexemplen i olika programmeringsspråk. Varje exempel är noggrant valt består och dokumenterats om du vill visa ett vanligt scenario för koden. Mer information om allt-i-ett ramverk för kod finns på följande Microsoft-webbplats:

http://1code.codeplex.com

Hur du hittar fler allt-i-ett ramverk för kod prover

Om du vill hitta mer allt-i-ett ramverk för kod prover, Sök efter ”kbcodefx” tillsammans med relaterade nyckelord på Microsofts webbplats för support. Eller besök följande Microsoft-webbplats:

Allt-i-ett ramverk för kod prover