DataList juhtelemendi abil luua pildi Galerii

Raskusaste

Info allalaadimiseks

Seda koodi näidise allalaadimiseks klõpsake ühte järgmistest linkidest:

Tehniline ülevaade

Võite leida Pildigalerii kasutatakse laialdaselt paljudes suhtlusvõrgud, isiklikud veebilehed ja E-äri veebisaite. Näiteks võib näidata Raamatukogu personal üleslaaditud pilte isiklik veebilehel Pildigalerii abil. Slaidiseansi on ka populaarne vahend kuvada veebilehtedel pilte. Selle koodi näidis näitab, kuidas luua pildi Galerii Piltide navigeerimine ASP.net-i DataList ja ImageButton juhtelementide kasutamiseks. Te võite klõpsata pisipilt, Datalist juhtelemendi lehel kuvada pildi suurema versiooni. See näidiskood loeb pildi teed teatud kataloogi FileInfo massiivi. Seejärel kasutatakse FileInfo massiivi asustada kohandatud Saidihaldur objekti, mis on seotud Datalist reguleerida. Selle koodi näidis rakendatakse ka kohandatud saalefaili süsteem, mis võimaldab viis pilte kuvada horisontaalselt ühele leheküljele. Kohandatud saalefaili süsteemi kasutatakse järgmist linki nuppu:

• Esimene

• Eelmise

• Edasi

• Viimase

Märkus. Soovitame kasutada seda meetodit korraga rohkem kui viis piltide laadimine.


Samuti saate selleSelectedIndex atribuudi DataList juhtelemendi pisipildid, mida saab valida arvu. Näitamaks, milline pilt on valitud, saate SelectedStyle atribuudi DataList juhtelemendi.

Proovi ülevaade

Selle koodi näidis sisaldab kolme järgmist osa:

• Suuri pilte kuvada, kui kasutaja valib pildi juhtelementi.

• DataList juhtelementi loetletakse navigeerimine pisipilte.

• Neli link rakendamise navigeerimisribal nuppu.

Saate alla laadida näidiskoodi ja järgmiste juhiste abil luua pildi galerii:

1. Looge Microsoft Visual Studio 2008 CSASPNETDataListImageGallery nimi on C# ASP.net-i veebirakenduse.
   

2. Lohistage juhtelement DataList lehele. Seejärel kasutage koodi atribuudi RepeatColumns väärtuseks 5ja seadke RepeatDirection horisontaalse:
   <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

3. Koodi abil saate malli DataList juhtelemendi sidumiseks URL-i väljale:
   <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. Lehel liikumine nelja nuppu lisamiseks kasutage järgmine kood:
   <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. Avage fail Default.aspx.cs koodi.

6. Kasutage järgmine kood importida süsteemiandmed ja System.IO nimeruumi leheküljele.
   using System.Data;
   using System.IO;

7. Sisestage kaks uut atribuudid Page_Index ja Page_Count loomiseks järgmine kood:
   //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. Sisestage piltide arv järgmine kood:
   //return total number of images
   protected int ImageCount()
   {
   DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
   FileInfo[] fi = di.GetFiles();
   return fi.GetLength(0);
   }

9. Sisestage selle juhtelemendi DataList järgmine kood:
   //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. Sisestage lehel nuppu sündmused toimetulekuks järgmine kood:
    //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. Lisa pilt klõpsake sündmused toimetulekuks järgmine kood:
    //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);
    }

Tehnoloogia kategooria

• ASP.NET 2.0

• ASP.NET 3.5

• ASP.NET 4.0

Keeled

Selle koodi näidis on saadaval järgmised programmeerimiskeelte:

Viited

DataList serveri juhtelemendi kohta lisateabe saamiseks külastage järgmist Microsoft Developer (MSDN) veebisaiti:

Üldine teave DataList server kontrollKuidas otsustada, millal DataGrid, DataList ja kordaja kontrolli kohta lisateabe saamiseks külastage järgmist MSDN-i veebisaiti:

Kuidas otsustada DataGrid, DataList ja kordaja juhtelemendi kasutamineTõhus andmete saalefaili ASP.NET 2.0 DataList kontrolli ja ObjectDataSourcekohta lisateabe saamiseks külastage järgmist websit:

Üldine teave tõhus andmete saalefaili ASP.NET 2.0 DataList kontrolli ja ObjectDataSource

Mis on kõik-ühes koodi raamistik?

Kõik-ühes koodi Framework kuvatakse enamiku Microsofti meetodid, kasutades koodinäidiseid erinevaid keeli. Igas näites on hoolikalt valitud, kuhu ja dokumenteeritud näidata ühte koodi stsenaarium. Kõik-ühes koodi Frameworki kohta lisateabe saamiseks külastage järgmist Microsofti veebisaiti:

http://1code.codeplex.com

Kuidas leida rohkem kõik-ühes koodi Frameworki näidised

Leida rohkem kõik-ühes koodi Frameworki näidised, otsige "kbcodefx" koos seotud märksõnad Microsofti tugiteenuste veebisaiti. Või külastage järgmist Microsofti veebisaiti:

Kõik-ühes koodi Frameworki näidised