Hvordan bruke DataList-kontroll til å opprette en bildegalleri

Vanskelighetsgraden

Nedlastingsinformasjon

Hvis du vil laste ned dette kodeeksemplet, klikker du én av følgende koblinger:

Teknisk oversikt

Du kan finne bildet galleriet er mye brukt i mange områder for nettverksbygging, personlige webområder og webområder for E-handel. Du kan for eksempel bruke bilde-galleriet til å vise et bibliotek for personlige opplastede bilder på et personlig webområde. Lysbildefremvisning er også et populært verktøy for å vise bilder på webområder. Dette kodeeksemplet viser hvordan du bruker DataList og ImageButton kontroller i ASP.NET til å opprette en bildegalleri med image navigasjon. Du kan klikke på et miniatyrbilde i Datalist -kontroll til å vise en større versjon av bildet på siden. Denne eksempelkoden leser banene for bildet fra én mappe til en FileInfo matrise. FileInfo matrisen brukes deretter til å fylle ut et egendefinert DataTable -objekt som er bundet til Datalist -kontroll. Dette kodeeksemplet implementerer også en egendefinert sideveksling-system som tillater fem bilder som skal vises vannrett på én side. Følgende kobling knappene brukes til å implementere en egendefinert sideveksling-systemet:

• Første

• Forrige

• Neste

• Siste

Obs! Vi anbefaler at du bruker denne metoden til å laste inn mer enn fem bilder samtidig.


Du kan også angi SelectedIndex -egenskapen for DataList -kontroll til å begrense antallet miniatyrbilder som kan velges. Hvis du vil angi hvilken avbildning som er valgt, kan du angi egenskapen SelectedStyle for DataList -kontroll.

Eksempel-oversikt

Dette kodeeksemplet viser følgende tre deler:

• En bildekontroll for å vise store bilder når det er merket av en bruker.

• En DataList-kontroll for å vise miniatyrbilder for navigering.

• Fire koble knapper for implementering av navigasjonsfeltet.

Du kan laste ned eksempelkode og følg denne fremgangsmåten for å opprette en bildegalleri:

1. Opprette en C# ASP.NET-webprogram som heter CSASPNETDataListImageGallery i Microsoft Visual Studio 2008.
   

2. Dra en DataList -kontroll på en side. Deretter bruke følgende kode til å sette egenskapen RepeatColumns til 5, og Sett egenskapen RepeatDirection til Vannrett:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Du kan bruke følgende kode til å angi malen i DataList -kontroll til å binde til en URL-adresse-feltet:
   <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. Bruk følgende kode for å legge til fire knapper for navigering på siden:
   <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. Åpne filen Default.aspx.cs kode.

6. Du kan bruke følgende kode til å importere System.Data og System.IO navneområdene til siden:
   using System.Data;
   using System.IO;

7. Sett inn følgende kode for å opprette to nye egenskaper, Page_Index og 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. Sett inn følgende kode for å få antall 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. Sett inn følgende kode for å binde 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. Sett inn følgende kode for å håndtere hendelser for side-knappen:
    //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. Sett inn følgende kode til å behandle bildet klikker du hendelser:
    //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);
    }

Teknologi-kategori

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Språk

Dette kodeeksemplet er tilgjengelig i følgende programmeringsspråk:

Referanser

Hvis du vil ha mer informasjon om kontrollen for DataList -server, kan du gå til følgende webområde for Microsoft Developer (MSDN):

Generell informasjon om serveren DataList-kontrollHvis du vil ha mer informasjon om hvordan du avgjør når du bruker DataGrid, DataList og Repeater kontroll, kan du gå til følgende MSDN-webområde:

Hvordan du kan bestemme når du vil bruke DataList og Repeater for DataGrid-kontrollenHvis du vil ha mer informasjon om effektiv data-sideveksling med ASP.NET 2.0 DataList -kontroll og ObjectDataSource, kan du gå til følgende websit:

Generell informasjon om effektiv data-sideveksling med ASP.NET 2.0 DataList-kontroll og ObjectDataSource

Hva er rammeverk for alt-i-ett-kode?

Rammeverk for alt-i-ett-kode viser utviklingsteknikker for de fleste Microsoft ved hjelp av kodeeksempler i programmeringsspråk. Hvert eksempel er nøye valgt, satt sammen og dokumentert for å vise et vanlig scenario for koden. Hvis du vil ha mer informasjon om rammeverk for alt-i-ett-kode, kan du gå til følgende Microsoft-webområde:

http://1code.codeplex.com

Slik finner du mer alt-i-ett-kode Framework-eksempler

Hvis du vil finne mer alt-i-ett-rammeverk kode eksempler, Søk etter "kbcodefx" sammen med beslektede nøkkelord på Microsoft-webområde for kundestøtte. Eller gå til følgende Microsoft-webområde:

Alt-i-ett rammeverk kode eksempler