Použitie syntaxe vytvoriť galériu

ÚVOD

Tento článok popisuje v jednom rámca vzorky, ktorá je k dispozícii na prevzatie. Táto vzorka kódu ukazuje, ako vytvoriť galériu aplikácie ASP.NET pomocou syntaxe. Vzorka balík môžete získať pomocou nasledujúcich ikon na stiahnutie.

Úroveň




alternate text

Informácie o prevzatí

Ak chcete prevziať tento vzorový kód, kliknite na jedno z nasledujúcich prepojení:


Prehľad

Nájdete fotogalérie sa často používa v mnohých sociálnych sietí, osobné webové stránky a webové E-Business. Napríklad, môžete použiť Fotogaléria zobrazíte knižnicu osobné snímky osobné webové stránky. Prezentácia je tiež populárny nástroj Zobraziť obrázky na webových stránkach. Táto vzorka kódu ukazuje, ako používať syntax a ImageButton ovládacie prvky ASP.NET vytvoriť galériu image navigáciu. Kliknutím na miniatúru v syntaxe zobrazenie väčšia verzia obrazu na stránke . Tento vzorový kód číta image cesty z určitého adresára do FileInfo pole. Potom FileInfo pole slúži na vyplnenie vlastnej DataTable objekt, ktorý sa viaže na syntaxe . Táto vzorka kódu vykonáva vlastné stránkovacieho systém, ktorý umožňuje päť snímok vodorovne Zobraziť na jednej strane. Implementovať vlastné stránkovania systému sa používajú nasledujúce odkazov:

  • Prvý

  • Predchádzajúce

  • Ďalej

  • Posledná

Poznámka: Odporúča sa, že tento postup použite na načítanie viac ako päť snímok naraz.


Môžete tiež nastaviť vlastnosť SelectedIndex syntaxe obmedziť počet miniatúr, ktoré možno vybrať . Označiť obrázok, ktorý je vybratý, môžete nastaviť vlastnosť SelectedStyle syntaxe .

Vzorka prehľad

Táto vzorka kódu obsahuje nasledujúce tri časti:

  • Ovládací prvok obrázok pre zobrazenie veľké obrázky, keď sú vybrané používateľa.

  • Syntaxe pre výpis miniatúr pre navigáciu.

  • Prepojenie štyri tlačidlá na vykonávanie navigačnom paneli.

Si môžete stiahnuť vzorový kód a postupujte podľa týchto krokov vytvorte Fotogaléria:

  1. Vytvoriť C# ASP.NET web aplikácie s názvom CSASPNETDataListImageGallery Microsoft Visual Studio 2008.

  2. Presuňte stránku syntaxe . Potom použite nasledujúci kód nastaviť vlastnosť RepeatColumns 5a nastavte vlastnosť RepeatDirection horizontálne:
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >

  3. Nastavenie šablóny v syntaxe naviazať na pole URL , použite nasledujúci kód:
    <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. Pridajte štyri tlačidlá navigácia strany, použite nasledujúci kód:
    <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. Otvorte súbor Default.aspx.cs kód.

  6. Import System.Data a System.IO priestor názvov na stránku, použite nasledujúci kód:
    using System.Data;
    using System.IO;

  7. Vložte nasledujúci kód vytvoriť dve nové vlastnosti Page_Index a 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. Vložte nasledujúci kód získať počet:
    //return total number of images
    protected int ImageCount()
    {
    DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/"));
    FileInfo[] fi = di.GetFiles();
    return fi.GetLength(0);
    }

  9. Vložte nasledujúci kód naviazať syntaxe :
    //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. Vložte nasledujúci kód na stránke tlačidlo udalostí:
    //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. Vložte nasledujúci kód na spracovanie obrazu kliknite na položku udalosti:
    //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);
    }


Technológia kategórií

  • ASP.NET 2.0

  • ASP.NET 3.5

  • ASP.NET 4.0

Jazyky

Táto vzorka kódu je dostupný v nasledujúcich jazykmi:


Jazyk

Názov projektu

Visual C#

CSASPNETDataListImageGallery

Visual Basic.NET

VBASPNETDataListImageGallery

Odkazy

Ďalšie informácie o syntaxe servera webovej lokalite vývojárov spoločnosti Microsoft (MSDN):

Všeobecné informácie o serveri syntaxeĎalšie informácie o tom, ako určiť, kedy sa má použiť údajová mriežka syntax a pokrytia kontroly, nájdete na nasledujúcej webovej lokalite MSDN:

Ako sa rozhodnúť pri použití ovládacieho prvku údajová mriežka, syntax a pokrytiaĎalšie informácie o údajov stránkovací ASP.NET 2.0 syntax kontroly a ObjectDataSource, navštívte nasledujúce websit:

Všeobecné informácie o údajov stránkovací ASP.NET 2.0 syntaxe a ObjectDataSource

Ďalšie informácie

Čo je všetko v jednom kód rámca?

Všetko v jednom kód rámca ukazuje väčšina Microsoft vývoj techniky pomocou ukážky kódu v rôznych jazykmi. Každý príklad je starostlivo vybrané zložený a zdokumentované Ukázať jeden spoločný kód scenár. Ďalšie informácie o všetko v jednom kód rámca nájdete na nasledujúcej webovej lokalite spoločnosti Microsoft:

http://1code.codeplex.com

Ako nájsť ďalšie príklady všetko v jednom kód rámca

Ak chcete nájsť ďalšie príklady všetko v jednom kód rámca, hľadanie "kbcodefx" s súvisiace kľúčové slová Microsoft webovú lokalitu technickej podpory. Alebo nájdete na nasledujúcej webovej lokalite spoločnosti Microsoft:

Všetko v jednom kód rámca vzorky

Rýchle publikovanie upozornenie

Spoločnosť Microsoft ani jej dodávatelia robiť žiadne záruky týkajúce sa vhodnosti, spoľahlivosti alebo presnosti informácií a súvisiace grafiky obsiahnuté. Všetky tieto informácie a súvisiace grafické prvky sú poskytované "as is" bez záruky akéhokoľvek druhu. Spoločnosť Microsoft ani jej dodávatelia týmto odmietajú všetky záruky a podmienky vzťahujúce sa na tieto informácie a súvisiace grafické prvky vrátane všetkých záruk a podmienok obchodovateľnosti, vhodnosti na určitý účel, neprítomnosti úsilie, názvu a neporušenia cudzích práv. Konkrétne súhlasíte s tým, že v žiadnom prípade spoločnosť Microsoft ani jej dodávatelia sa zodpovednosť za akékoľvek priamych, nepriamych, represívne, náhodné, špeciálne, následné škody vrátane, bez obmedzenia, škody za stratu používania, údajov alebo zisku, vyplývajúce z alebo akokoľvek spojené s používaním alebo nemožnosť použitia informácií a súvisiace grafiky obsiahnuté, na základe zmluvy, deliktu, nedbalosti, plnej zodpovednosti alebo inak, aj keď Microsoft alebo ktoréhokoľvek z jej dodávateľov upozornení na možnosť škôd.

Potrebujete ďalšiu pomoc?

Rozšírte svoje zručnosti
Preskúmať školenie
Buďte medzi prvými, ktorí získajú nové funkcie
Pripojiť k Microsoft insiderov chcú

Považujete poskytnuté informácie za užitočné?

Ďakujem za vaše pripomienky!

Ďakujeme vám za pripomienky. Pravdepodobne vám pomôže, ak vás spojíme s pracovníkom podpory pre Office.

×