INLEIDING
In dit artikel wordt een All-in-One framework-voorbeeld beschreven dat kan worden gedownload. In dit codevoorbeeld ziet u hoe u een toepassing voor afbeeldingengalerie maakt met behulp van het besturingselement DataList in ASP.NET. U kunt het voorbeeldpakket downloaden via de volgende downloadpictogrammen.
Moeilijkheidsgraad
Informatie over downloaden
Klik op een van de volgende koppelingen om dit codevoorbeeld te downloaden:
Technisch overzicht
De afbeeldingengalerie wordt veel gebruikt op veel sociale netwerksites, persoonlijke websites en websites voor e-business. U kunt de afbeeldingengalerie bijvoorbeeld gebruiken om een bibliotheek met persoonlijk geüploade afbeeldingen weer te geven op een persoonlijke website. Diavoorstelling is ook een populair hulpmiddel om afbeeldingen op websites weer te geven. In dit codevoorbeeld ziet u hoe u de besturingselementen DataList en ImageButton kunt gebruiken in ASP.NET om een afbeeldingengalerie met afbeeldingsnavigatie te maken. U kunt op een miniatuurafbeelding in het besturingselement Gegevenslijst klikken om een grotere versie van de afbeelding op de pagina weer te geven. Met deze voorbeeldcode worden de afbeeldingspaden van een bepaalde map naar een FileInfo-matrix gelezen. Vervolgens wordt met de matrix FileInfo een aangepast DataTable-object gevuld dat binding heeft met het besturingselement Datalist. Met dit codevoorbeeld is ook een aangepast wisselsysteem geïmplementeerd waarmee vijf afbeeldingen horizontaal op één pagina kunnen worden weergegeven. De volgende koppelingsknoppen worden gebruikt om een aangepast semafoonsysteem te implementeren:
- Voornaam
- Vorige
- Volgende
- Achternaam
Opmerking: u wordt aangeraden met deze methode niet meer dan vijf afbeeldingen tegelijk te laden.
U kunt ook de eigenschap SelectedIndex voor het besturingselement Gegevenslijst instellen om het aantal miniatuurafbeeldingen dat kan worden geselecteerd te beperken. Om aan te geven welke afbeelding is geselecteerd, kunt u de eigenschap SelectedStyle instellen voor het besturingselement Gegevenslijst.
Overzicht van voorbeelden
Dit codevoorbeeld bestaat uit de volgende drie onderdelen:
- Een besturingselement Afbeelding voor het weergeven van grote afbeeldingen wanneer deze worden geselecteerd door een gebruiker.
- Een besturingselement DataList voor het weergeven van de miniatuurafbeeldingen voor navigatie.
- Vier koppelingsknoppen voor het implementeren van de navigatiebalk.
U kunt voorbeeldcode downloaden en deze stappen volgen om een afbeeldingengalerie te maken:
Maak een C# ASP.NET webtoepassing met de naam CSASPNETDataListImageGallery in Microsoft Visual Studio 2008.
Sleep een besturingselement Gegevenslijst naar een pagina. Gebruik vervolgens de volgende code om de eigenschap RepeatColumns in te stellen op 5 en stel de eigenschap RepeatDirection in op Horizontaal:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontaal" >Gebruik de volgende code om de sjabloon in het besturingselement Gegevenslijst afhankelijk te maken van een URL-veld:
<Itemsjabloon>
<asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' />
</ItemTemplate>Gebruik de volgende code om vier knoppen toe te voegen 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" />Open het Default.aspx.cs codebestand.
Gebruik de volgende code om de naamruimten System.Data en System.IO naar de pagina te importeren:
met System.Data;
met behulp van System.IO;Voeg de volgende code in om twee nieuwe eigenschappen te maken, Page_Index en Page_Count:
Eigenschap voor huidige pagina-index
public int Page_Index
{
get { return (int)ViewState["_Page_Index"]; }
set { ViewState["_Page_Index"] = value; }
}
Eigenschap voor totaal aantal pagina's
public int Page_Count
{
get { return (int)ViewState["_Page_Count"]; }
set { ViewState["_Page_Count"] = value; }
}Voeg de volgende code in om het aantal afbeeldingen te verkrijgen:
Totaal aantal afbeeldingen retourneren
protected int ImageCount()
{
DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
FileInfo[] fi = di.GetFiles();
retourneer fi. GetLength(0);
}Voeg de volgende code in om het besturingselement Gegevenslijst te binden:
de gegevensbron voor Gegevenslijst retourneren
protected DataTable BindGrid()
{
Alle afbeeldingspaden ophalen
DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
FileInfo[] fi = di.GetFiles();alle paden naar de gegevenstabel opslaan als de gegevensbron
DataTable dt = new DataTable();
DataColumn dc = new DataColumn("Url", typeof(System.String));
dt. Columns.Add(dc);
int lastindex = 0;
als (Page_Count == 0 || Page_Index == Page_Count - 1)
{
lastindex = ImageCount();
}
anders
{
lastindex = Page_Index * PageSize + 5;
}
for (int i = Page_Index * PageSize; i < lastindex; i++)
{
DataRow dro = dt. NieuweRij();
dro[0] = fi[i]. Naam;
dt. Rows.Add(dro);
}
retourneer dt;
}Voeg de volgende code in voor het verwerken van paginaknopgebeurtenissen:
handle the navigation button event
public void Page_OnClick(Object sender, CommandEventArgs e)
{
if (e.CommandName == "eerste")
{
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;
}
anders
{
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;
}
anders
{
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
= ((Afbeelding)DataList1.Items[0]. FindControl("IB_tn")). AfbeeldingsURL;
}Voeg de volgende code in voor het verwerken van klikgebeurtenissen voor afbeeldingen:
De miniatuurafbeelding verwerken gebeurtenis selecteren
protected void IB_tn_Click(object sender, EventArgs e)
{
ImageButton ib = (ImageButton)sender;
Afbeelding1.AfbeeldingUrl = ib. AfbeeldingsURL;
DataList1.SelectedIndex = Convert.ToInt32(ib. CommandArgument);
}
Categorie Technologie
- ASP.NET 2.0
- ASP.NET 3.5
- ASP.NET 4.0
Talen
Dit codevoorbeeld is beschikbaar in de volgende programmeertalen:
| Taal | Projectnaam |
|---|---|
| Visual C# | CSASPNETDataListImageGallery |
| Visuele Basic.NET | VBASPNETDataListImageGallery |
Meer informatie
Ga naar de volgende MSDN-website (Microsoft Developer) voor meer informatie over het serverbesturingselement DataList:
Algemene informatie over het serverbesturingselement DataList Ga naar de volgende MSDN-website voor meer informatie over hoe u beslist wanneer u het besturingselement DataGrid, DataList en Repeater wilt gebruiken:
Bepalen wanneer het besturingselement DataGrid, DataList en Repeater moet worden gebruikt Ga naar de volgende website voor meer informatie over efficiënte paginering van gegevens met het besturingselement DataList ASP.NET 2.0 en ObjectDataSource:
Meer informatie
Wat is een alles-in-één codeframework?
All-in-One Code Framework toont de meeste Microsoft-ontwikkeltechnieken door gebruik te maken van codevoorbeelden in verschillende programmeertalen. Elk voorbeeld wordt zorgvuldig geselecteerd, samengesteld en gedocumenteerd om één algemeen codescenario te laten zien. Ga naar de volgende Microsoft-website voor meer informatie over All-In-One Code Framework:
Meer voorbeelden van All-in-One Code Framework vinden
Voor meer All-in-One Code Framework-voorbeelden zoekt u op 'kbcodefx' samen met gerelateerde trefwoorden op de ondersteuningswebsite van Microsoft. Of ga naar de volgende Microsoft-website:
Voorbeelden van All-in-One Code Framework
Disclaimer voor snelle publicatie
Microsoft Corporation en/of haar respectieve leveranciers staan niet in voor de geschiktheid, betrouwbaarheid of nauwkeurigheid van de informatie en gerelateerde afbeeldingen in deze verklaring. Al deze informatie en daarmee samenhangende afbeeldingen worden geleverd 'in de huidige staat', zonder enige garantie. Microsoft en/of haar respectieve leveranciers wijzen hierbij alle garanties van de hand met betrekking tot deze informatie en de daarmee samenhangende grafische gegevens, met inbegrip van alle impliciete garanties betreffende verkoopbaarheid, geschiktheid voor een bepaald doel, vakmanschap, eigendom of niet-inbreukmakendheid. U stemt er uitdrukkelijk mee in dat Microsoft en/of haar leveranciers in geen geval aansprakelijk kunnen worden gesteld voor enige directe, indirecte, punitieve, incidentele, speciale schade, gevolgschade of welke schade dan ook, met inbegrip van, maar niet beperkt tot schade door verlies van gebruik, gegevens of winst, voortvloeiend uit of op enigerlei wijze verband houden met het gebruik van of de onmogelijkheid tot gebruik van de informatie en verwante afbeeldingen in deze privacy, zij is gebaseerd op contract, onrechtmatige daad, nalatigheid, risicoaansprakelijkheid of anderszins, zelfs als Microsoft of een van haar leveranciers op de hoogte is gesteld van de mogelijkheid van schade.