Hvordan bruke DataList-kontroll til å opprette en bildegalleri

Gjelder: ASP.NET on .NET Framework 3.5 Service Pack 1

INTRODUKSJON


Denne artikkelen beskriver et eksempel på alt-i-ett-rammeverket som er tilgjengelig for nedlasting. Dette kodeeksemplet viser hvordan du oppretter et bildegalleri-program ved hjelp av DataList-kontroll i ASP.NET. Du kan få pakken sample fra følgende ikoner for nedlasting.

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:


SpråkProsjektnavn
Visual C#CSASPNETDataListImageGallery
Visual Basic.NETVBASPNETDataListImageGallery

Referanser

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

Hvis du vil ha mer informasjon


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:

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:
Rask publisering ansvarsfraskrivelse
Microsoft corporation og/eller dets respektive leverandører gir ingen uttalelser om egnetheten, pålitelighet eller nøyaktigheten av informasjon og relatert grafikk i dette dokumentet. All slik informasjon og relatert grafikk er levert "som den er" uten garantier av noe slag. Microsoft og/eller dets respektive leverandører fraskriver seg alle garantier og betingelser med hensyn til denne informasjonen herved og relatert grafikk, inkludert alle stilltiende garantier og betingelser for salgbarhet, anvendelighet for særskilte formål, rimelig innsats, tittel og overholdelse. Du godtar spesielt at ikke i noe tilfelle skal Microsoft og/eller dets leverandører være ansvarlig for noen direkte, indirekte, indirekte, tilfeldige, spesielle, konsekvensielle skader eller noen skader inkludert, uten begrensning, erstatning for tap av bruk, data eller inntekter, som oppstår som følge av eller på noen måte knyttet til bruken av eller manglende evne til å bruke informasjon og relatert grafikk i dette materialet, enten basert på kontrakt, subjektivt ansvar, uaktsomhet, objektivt ansvar eller annen måte, selv om Microsoft eller noen av dets leverandører er blitt underrettet om muligheten for skader.