Het gebruik van het besturingselement DataList voor het maken van een Image Gallery

Moeilijkheidsgraad

Informatie over downloaden

Dit codevoorbeeld downloaden, klikt u op een van de volgende koppelingen:

Technisch overzicht

U vindt dat de galerie afbeelding wordt veel gebruikt in veel sites voor sociaal netwerken, persoonlijke websites en E-Business websites. U kunt bijvoorbeeld de afbeelding galerie een bibliotheek van persoonlijke geüploade afbeeldingen weergeven op een persoonlijke website. Diavoorstelling is ook een populaire tool om afbeeldingen op websites weer te geven. In deze voorbeeldcode wordt gedemonstreerd hoe de DataList en ImageButton besturingselementen in ASP.NET gebruiken voor het maken van een afbeelding galerie met afbeelding navigatie. U kunt klikken op een miniatuur in het besturingselement Datalist om een grotere versie van de afbeelding op de pagina weer te geven. Deze voorbeeldcode worden de afbeeldingspaden uit een bepaalde map in een matrix FileInfo gelezen. De matrix FileInfo wordt vervolgens gebruikt voor het vullen van een aangepaste DataTable -object dat is gekoppeld aan het besturingselement Datalist . Dit codevoorbeeld implementeert ook een aangepaste paging systeem waarmee vijf afbeeldingen horizontaal op één pagina wordt weergegeven. De volgende link knoppen worden gebruikt voor een aangepaste paging-systeem implementeren:

• Eerste

• Vorige

• Volgende

• Laatste

Opmerking Wij raden u aan gebruik te maken van deze methode niet meer dan vijf afbeeldingen tegelijk laden.


U kunt ook instellen van de eigenschap SelectedIndex van het besturingselement DataList beperken het aantal miniaturen van de afbeeldingen die kunnen worden geselecteerd. Om aan te geven welke afbeelding is geselecteerd, kunt u de eigenschap SelectedStyle voor het besturingselement DataList instellen.

Voorbeeld-overzicht

In deze voorbeeldcode bevat de volgende drie onderdelen:

• Een besturingselement voor het weergeven van grote afbeeldingen wanneer ze door een gebruiker zijn geselecteerd.

• Een DataList-besturingselement voor het weergeven van de miniaturen voor navigatie.

• Vier koppelen knoppen voor de uitvoering van de navigatiebalk.

U kunt downloaden van de voorbeeldcode en als volgt te werk om een afbeelding galerie maken:

1. Een C# ASP.NET-webtoepassing met de naam CSASPNETDataListImageGallery in de Microsoft Visual Studio 2008 maken.
   

2. Een DataList -besturingselement naar een pagina slepen. Vervolgens gebruikt u de volgende code stelt de eigenschap RepeatColumns tot en met 5en de eigenschap RepeatDirection ingesteld op Horizontal:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. De volgende code gebruiken voor het instellen van de sjabloon in de DataList -besturingselement binden aan een URL-veld:
   <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. Gebruik de volgende code vier knoppen toevoegen aan de Paginanavigatie:
   <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. Open het bestand Default.aspx.cs code.

6. Gebruik de volgende code de naamruimten System.Data en System.IO importeren naar de pagina:
   using System.Data;
   using System.IO;

7. Voeg de volgende code maakt twee nieuwe eigenschappen, Page_Index en 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. Voeg de volgende code als u het nummer van de afbeeldingen:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Voeg de volgende code om het besturingselement DataList koppelen:
   //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. Voeg de volgende code voor het afhandelen van gebeurtenissen voor pagina-knop:
    //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. De volgende code voor het verwerken van afbeelding invoegen klikt u op gebeurtenissen:
    //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);
    }

Technologie-categorie

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Talen

In dit codevoorbeeld is beschikbaar in de volgende talen:

Referenties

Voor meer informatie over het besturingselement DataList -server, gaat u naar de volgende website van MSDN (Microsoft Developer):

Algemene informatie over het besturingselement DataList serverGa naar de volgende MSDN-website voor meer informatie over het bepalen wanneer de DataGrid, DataList en Repeater -besturingselement gebruiken:

Het bepalen wanneer het besturingselement DataGrid, DataList en Repeater gebruikenVoor meer informatie over het wisselbestand gegevens efficiënt met ASP.NET 2.0 DataList -besturingselement en ObjectDataSource, gaat u naar de volgende websit:

Algemene informatie over het wisselbestand gegevens efficiënt met ASP.NET 2.0 DataList-besturingselement en ObjectDataSource

Wat is een alles-In-één Code Framework?

Alles-In-één code Framework bevat de meeste Microsoft-technieken met behulp van codevoorbeelden in verschillende programmeertalen. Elk voorbeeld is zorgvuldig geselecteerd, bestaat en gedocumenteerd om een gemeenschappelijke code scenario weer te geven. Voor meer informatie over alles-In-één Code Framework gaat u naar de volgende Microsoft-website:

http://1code.codeplex.com

Het zoeken naar meer voorbeelden van alles-In-één Code Framework

Ga voor meer voorbeelden van alles-In-één Code Framework ondersteuning zoeken naar "kbcodefx" en verwante trefwoorden op de Microsoft website. Of Ga naar de volgende Microsoft-website:

Alles-In-één code Framework monsters