Kā lietot vadības DataList izveidot attēlu galerija

IEVADS

Šajā rakstā ir aprakstīts daudzformātu struktūras paraugs, ko var lejupielādēt. Šis parauga kods parāda, kā izveidot attēlu galerija lietojumprogrammu, izmantojot vadības DataList ASP.NET. Parauga pakotni var iegūt no šādas lejupielādes ikonas.

Grūtības līmenis




alternate text

Informācija par lejupielādi

Lai lejupielādētu šo koda paraugu, noklikšķiniet uz vienas no šīm saitēm:


Tehniskais pārskats

Jūs varat atrast attēlu galerija plaši izmanto daudz sociālā tīkla vietnēm, personiskās vietnes un E-biznesa tīmekļa vietnes. Piemēram, var izmantot attēlu galerija parādīt personas augšupielādēt attēlu bibliotēka personiskās vietnes. Slaidrāde ir arī tautas rīks, kas rāda attēlus vietnēs. Šis parauga kods parāda, kā izmantot DataList un ImageButton vadīklas ASP.NET izveidot attēlu galerija navigācijas attēlu. Varat noklikšķināt uz sīktēlu Datalist kontroles lapā parādīt lielāku attēla versiju. Šis parauga kods uz FileInfo masīva lasa attēlu ceļi noteiktas katalogā. Pēc tam FileInfo masīvs tiek lietota, lai aizpildītu pielāgotu DataTable objektu, kas ir saistīti ar Datalist vadīklu. Šī koda paraugu arī ievieš pielāgotu lapošanas sistēmu, kas ļauj pieci attēli tiek parādītas horizontāli vienā lapā. Šādas saites pogas izmanto pielāgotas lapošanas sistēmas:

  • Pirmais

  • Iepriekšējā

  • Nākamā

  • Pēdējā

Piezīme. Mēs iesakām izmantot šo metodi ielādēt ne vairāk par piecām attēlus pēc kārtas.


Varat arī iestatīt rekvizītu SelectedIndex DataList vadības ierobežot sīktēlu attēlus, kurus var izvēlēties. Norāda, kura attēls tiek atlasīts, varat iestatīt rekvizītu SelectedStyle DataList vadīklas.

Parauga pārskats

Šī koda paraugu ir šādas trīs daļas:

  • Attēla vadīklu parādīšanai lieli attēli, atlasot tās lietotājs.

  • DataList vadīklu sarakstā sīktēlu navigāciju.

  • Četras saite pogu navigācijas joslā ieviešanai.

Varat lejupielādēt parauga kods un lai izveidotu attēlu galeriju, rīkojieties šādi:

  1. Izveidojiet nosaukumu CSASPNETDataListImageGallery Microsoft Visual Studio 2008 c# ASP.NET tīmekļa lietojumprogrammu.

  2. Ievelciet DataList kontroles lapu. Pēc tam šo kodu izmantošana iestatīt rekvizīta RepeatColumns 5un iestatiet rekvizīta RepeatDirection horizontāli:
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

  3. Iestatīt veidni DataList vadīklu piesaistīt laukam URL izmantot šādu kodu:
    <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. Pievienot lappuses navigācija četrām pogām izmantot šādu kodu:
    <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. Atveriet failu Default.aspx.cs kodu.

  6. Lapā importēt System. Data un System.IO nosaukumvietas izmantot šādu kodu:
    using System.Data;
    using System.IO;

  7. Ievietot divus jaunus rekvizītus, Page_Index un Page_Count izveidot šādu kodu:
    //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. Ievietot kodu, lai iegūtu attēlus skaitu:
    //return total number of images
    protected int ImageCount()
    {
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();
    return fi.GetLength(0);
    }

  9. Ievietojiet šo vadīklu DataList kodu:
    //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. Ievietot kodu apstrādāt lapu pogas notikumu:
    //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. Ievietot kodu apstrādāt attēlu noklikšķiniet notikumi:
    //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);
    }


Tehnoloģiju kategorijā

  • ASP.NET 2.0

  • ASP.NET 3.5

  • ASP.NET 4.0

Valodas

Šī koda paraugu ir pieejams programmas šādās valodās:


Valoda

Projekta nosaukums

Visual c#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

Atsauces

Lai iegūtu papildinformāciju par servera vadības DataList , apmeklējiet šo Microsoft izstrādātāju (MSDN) vietni:

Vispārīga informācija par DataList servera vadīklaPapildinformāciju par to, kā noteikt, vai izmantot DataGrid DataList un papildu vadīklas, skatiet šajā MSDN vietnē:

Kā noteikt, vai izmantot DataGrid, DataList un papildu kontroleLai iegūtu papildinformāciju par efektīvā datu lapošanas ASP.NET 2.0 DataList kontroles un ObjectDataSource, apmeklējiet šādu websit:

Vispārīga informācija par efektīviem datu lapošanas ASP.NET 2.0 DataList kontroles un ObjectDataSource

Papildinformācija

Kas ir universālais kodu struktūra?

Universālais kodu struktūra parāda lielākā daļa Microsoft izstrādes tehnoloģijas, izmantojot citu programmēšanas valodu kodu paraugi. Katrs piemērs ir rūpīgi atlasīti veido un dokumentēta parādīt vienu kopēju kodu gadījumā. Papildinformāciju par vienkorpusa kodu struktūra, apmeklējiet šo Microsoft vietni:

http://1code.codeplex.com

Kā atrast vairāk daudzformātu kodu struktūra paraugi

Lai atrastu papildu daudzformātu kodu struktūra paraugus, meklējiet "kbcodefx" kopā ar saistītiem atslēgvārdiem Microsoft atbalsta vietni. Vai, apmeklējiet šo Microsoft vietni:

Universālais kodu struktūra paraugi

Ātras publicēšanas atruna

Korporācija Microsoft un/vai tās atbilstošie piegādātāji nesniedz nekādas garantijas par piemērotību, uzticamību vai precizitāti iekļautās informācijas un ar to saistīto attēlu. Šāda informācija un ar to saistītie attēli tiek nodrošināta tāda, kāda tā ir, bez jebkāda veida garantijas. Microsoft un/vai tās atbilstošie piegādātāji atsakās atsakās no jebkādām garantijām un nosacījumiem attiecībā uz šo informāciju un saistītās grafikas, ieskaitot visas netiešās garantijas un nosacījumus par piemērotību pārdošanai, atbilstību noteiktam mērķim, ieguldīto grūti, īpašumtiesības un tiesību ievērošanu. Jūs īpaši piekrītat, nekādā gadījumā Microsoft un/vai tās piegādātāji ir atbildīgi par jebkādiem tiešiem, netiešiem, soda, nejaušiem, tīšiem, nejaušiem zaudējumiem vai kaitējumiem nekāda ieskaitot bez ierobežojuma, atlīdzību par lietošanu, datu zudumu vai zaudējumiem, kas izriet no vai nekādā veidā saistīti ar izmantošanu vai nespēja izmantot iekļautās informācijas un ar to saistīto attēlu, pamatojoties uz līgumu, tiesību pārkāpums, nolaidība, nepārprotamu atbildību vai citādi, pat tad, ja ir korporācijas Microsoft vai tās piegādātājiem ir informēta par zaudējumu iespējamību.

Vai nepieciešama papildu palīdzība?

Paplašiniet savas prasmes
Iepazīties ar apmācību
Esiet pirmais, kas saņem jaunās iespējas
Pievienoties Microsoft Insider

Vai šī informācija bija noderīga?

Paldies par jūsu atsauksmēm!

Paldies par atsauksmēm! Šķiet, ka jums varētu būt noderīgi sazināties ar kādu no mūsu Office atbalsta speciālistiem.

×