Interakce stránky předlohy se stránkou obsahu (VB)

Článek
07/13/2023

Zkoumá, jak volat metody, nastavit vlastnosti atd. stránky obsahu z kódu na stránce předlohy.

Úvod

Předchozí kurz zkoumal, jak nechat stránku obsahu programově interagovat se stránkou předlohy. Vzpomeňte si, že jsme aktualizovali stránku předlohy tak, aby zahrnovala ovládací prvek GridView, který obsahuje pět naposledy přidaných produktů. Pak jsme vytvořili stránku obsahu, ze které může uživatel přidat nový produkt. Po přidání nového produktu musela stránka obsahu dát stránce předlohy pokyn, aby aktualizovala zobrazení GridView tak, aby obsahovala právě přidaný produkt. Tato funkce byla provedena přidáním veřejné metody na stránku předlohy, která aktualizovala data svázaná s GridView, a poté vyvoláním této metody ze stránky obsahu.

Nejběžnější forma interakce obsahu a stránky předlohy pochází ze stránky obsahu. Je však možné, aby stránka předlohy aktivovala aktuální stránku obsahu a tato funkce může být nutná, pokud stránka předlohy obsahuje prvky uživatelského rozhraní, které uživatelům umožňují upravovat data, která se také zobrazují na stránce obsahu. Představte si stránku obsahu, která zobrazuje informace o produktech v ovládacím prvku GridView, a stránku předlohy, která obsahuje ovládací prvek Tlačítko, který po kliknutí zdvojnásobí ceny všech produktů. Podobně jako v příkladu v předchozím kurzu je třeba po kliknutí na tlačítko dvojité ceny aktualizovat GridView tak, aby se zobrazily nové ceny, ale v tomto scénáři je to stránka předlohy, která potřebuje probudit stránku obsahu do akce.

V tomto kurzu se dozvíte, jak na stránce obsahu definovat funkci vyvolání stránky předlohy.

Podněcování programové interakce prostřednictvím obslužných rutin událostí a událostí

Vyvolání funkcí stránky obsahu ze stránky předlohy je náročnější než naopak. Vzhledem k tomu, že stránka obsahu má jednu stránku předlohy, víme při zahájení programové interakce ze stránky obsahu, jaké veřejné metody a vlastnosti máme k dispozici. Stránka předlohy však může mít mnoho různých stránek obsahu, z nichž každá má vlastní sadu vlastností a metod. Jak potom můžeme na stránce předlohy napsat kód, který na stránce obsahu provede nějakou akci, když nevíme, která stránka obsahu se bude vyvolávat až do doby běhu?

Zvažte ASP.NET webový ovládací prvek, jako je například ovládací prvek Tlačítko. Ovládací prvek Tlačítko se může zobrazit na libovolném počtu ASP.NET stránek a potřebuje mechanismus, pomocí kterého může upozornit stránku, že na něj někdo kliknul. Toho se dosahuje pomocí událostí. Konkrétně ovládací prvek Tlačítko vyvolá svoji Click událost po kliknutí. Stránka ASP.NET, která obsahuje tlačítko, může volitelně reagovat na toto oznámení prostřednictvím obslužné rutiny události.

Stejný vzor lze použít k tomu, aby se na stránkách obsahu používala funkce triggeru stránky předlohy:

Přidejte událost na stránku předlohy.
Vyvolá událost vždy, když stránka předlohy potřebuje komunikovat se svou stránkou obsahu. Pokud například stránka předlohy potřebuje upozornit svoji stránku obsahu, že uživatel zdvojnásobil ceny, její událost by byla vyvolána okamžitě po zdvojnásobování cen.
Na těchto stránkách obsahu vytvořte obslužnou rutinu události, která musí provést nějakou akci.

Tento zbytek tohoto kurzu implementuje příklad popsaný v úvodu. konkrétně stránku obsahu, která obsahuje seznam produktů v databázi, a stránku předlohy, která obsahuje ovládací prvek Tlačítko pro zdvojnásobení cen.

Krok 1: Zobrazení produktů na stránce obsahu

Naší první obchodní činností je vytvoření stránky obsahu, která obsahuje seznam produktů z databáze Northwind. (Databázi Northwind jsme do projektu přidali v předchozím kurzu Interakce se stránkou předlohy ze stránky obsahu.) Začněte tím, že do ~/Admin složky s názvem Products.aspxpřidáte novou stránku ASP.NET a nezapomeňte ji svázat se stránkou Site.master předlohy. Obrázek 1 ukazuje Průzkumník řešení po přidání této stránky na web.

Obrázek 01: Přidání nové stránky ASP.NET do Admin složky (kliknutím zobrazíte obrázek v plné velikosti)

Vzpomeňte si, že v kurzu Určení názvu, metaznačky a dalších hlaviček HTML v rámci stránky předlohy jsme vytvořili vlastní třídu základní stránky s názvem BasePage , která vygeneruje název stránky, pokud není explicitně nastaven. Přejděte na Products.aspx třídu kódu na pozadí stránky a nechte ji odvodit z BasePage (místo z System.Web.UI.Page).

Nakonec soubor aktualizujte Web.sitemap tak, aby obsahoval položku pro tuto lekci. Pod lekci Interakce obsahu se stránkou předlohy přidejte následující značku <siteMapNode> :

<siteMapNode url="~/Admin/Products.aspx" title="Master to Content Page Interaction" />

Přidání tohoto <siteMapNode> prvku se projeví v seznamu lekce (viz obrázek 5).

Vraťte se do Products.aspx. V ovládacím prvku Obsahu pro MainContentpřidejte ovládací prvek GridView a pojmenujte ho ProductsGrid. Vytvořte vazbu GridView na nový ovládací prvek SqlDataSource s názvem ProductsDataSource.

Obrázek 02: Vytvoření vazby GridView k novému ovládacímu prvku SqlDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Nakonfigurujte průvodce tak, aby používal databázi Northwind. Pokud jste prošli předchozím kurzem, měli byste už mít připojovací řetězec s názvem NorthwindConnectionString v Web.config. V rozevíracím seznamu zvolte tuto připojovací řetězec, jak je znázorněno na obrázku 3.

Obrázek 03: Konfigurace sqlDataSource pro použití databáze Northwind (kliknutím zobrazíte obrázek v plné velikosti)

Dále určete příkaz ovládacího prvku zdroje dat tak, že SELECT v rozevíracím seznamu vyberete tabulku Products (Produkty) a vrátíte ProductName sloupce a UnitPrice (viz Obrázek 4). Kliknutím na Další a potom na Dokončit dokončete průvodce Konfigurací zdroje dat.

Obrázek 04: Vrácení ProductName polí a UnitPrice z Products tabulky (kliknutím zobrazíte obrázek v plné velikosti)

A je to! Po dokončení průvodce Visual Studio přidá dvě BoundFields do GridView zrcadlit dvě pole vrácená ovládacím prvku SqlDataSource. Následují značky ovládacích prvků GridView a SqlDataSource. Obrázek 5 ukazuje výsledky při prohlížení v prohlížeči.

<asp:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" 
 DataSourceID="ProductsDataSource">
 <Columns>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Columns>
</asp:GridView>

<asp:SqlDataSource ID="ProductsDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>

Obrázek 05: Každý produkt a jeho cena jsou uvedeny v GridView (kliknutím zobrazíte obrázek v plné velikosti).

Poznámka

Nebojte se vyčistit vzhled GridView. Mezi návrhy patří formátování zobrazené hodnoty UnitPrice jako měny a použití barev a písem pozadí ke zlepšení vzhledu mřížky. Další informace o zobrazování a formátování dat v ASP.NET najdete v mé sérii kurzů Práce s daty.

Krok 2: Přidání tlačítka Dvojité ceny na stránku předlohy

Naším dalším úkolem je přidat webový ovládací prvek Tlačítko na stránku předlohy, který po kliknutí zdvojnásobí cenu všech produktů v databázi. Site.master Otevřete stránku předlohy a přetáhněte tlačítko z panelu nástrojů na Designer a umístěte ho RecentProductsDataSource pod ovládací prvek SqlDataSource, který jsme přidali v předchozím kurzu. Nastavte vlastnost tlačítka ID na DoublePrice a jeho Text vlastnost na "Double Product Prices".

Dále přidejte na stránku předlohy ovládací prvek SqlDataSource a pojměte ho DoublePricesDataSource. Tento SqlDataSource se použije k provedení UPDATE příkazu, který zdvojnásobí všechny ceny. Konkrétně potřebujeme nastavit jeho ConnectionString vlastnosti a UpdateCommand na odpovídající připojovací řetězec a UPDATE příkaz. Pak musíme volat metodu Update tohoto ovládacího prvku SqlDataSource při kliknutí na DoublePrice tlačítko. Vlastnosti a UpdateCommand nastavíte ConnectionString tak, že vyberete ovládací prvek SqlDataSource a přejdete na okno Vlastnosti. Vlastnost ConnectionString obsahuje seznam připojovacích řetězců, které už jsou uložené v Web.config rozevíracím seznamu. Zvolte možnost, jak je znázorněno na obrázku NorthwindConnectionString 6.

Obrázek 06: Konfigurace sqlDataSource pro použití NorthwindConnectionString (kliknutím zobrazíte obrázek v plné velikosti)

Pokud chcete vlastnost nastavitUpdateCommand, vyhledejte v okno Vlastnosti možnost UpdateQuery. Tato vlastnost, pokud je vybrána, zobrazí tlačítko se třemi tečkami; Kliknutím na toto tlačítko zobrazíte dialogové okno Command and Parameter Editor zobrazené na obrázku 7. Do textového pole dialogového okna zadejte následující UPDATE příkaz:

UPDATE Products SET UnitPrice = UnitPrice * 2

Tento příkaz po provedení zdvojnásobí UnitPrice hodnotu každého záznamu v tabulce Products .

Obrázek 07: Nastavení vlastnosti SqlDataSource UpdateCommand (kliknutím zobrazíte obrázek v plné velikosti)

Po nastavení těchto vlastností by deklarativní kód ovládacích prvků Button a SqlDataSource měl vypadat nějak takto:

<asp:Button ID="DoublePrice" runat="server" 
 Text="Double Product Prices" />

<asp:SqlDataSource ID="DoublePricesDataSource" runat="server" 
 UpdateCommand="UPDATE Products SET UnitPrice = UnitPrice * 2" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>">
</asp:SqlDataSource>

Vše, co zbývá, je volání jeho Update metody při kliknutí na DoublePrice tlačítko. Vytvořte obslužnou Click rutinu DoublePrice události pro button a přidejte následující kód:

Protected Sub DoublePrice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DoublePrice.Click
 ' Double the prices
 DoublePricesDataSource.Update()
End Sub

Pokud chcete tuto funkci otestovat, přejděte na ~/Admin/Products.aspx stránku, kterou jsme vytvořili v kroku 1, a klikněte na tlačítko Dvojité ceny produktů. Kliknutí na tlačítko způsobí zpětné odeslání a spustí obslužnou rutinu DoublePrice události buttonu Click , která zdvojnásobí ceny všech produktů. Stránka se pak znovu vykreslí a kód se vrátí a znovu zobrazí v prohlížeči. GridView na stránce obsahu však uvádí stejné ceny jako před kliknutím na tlačítko "Double Product Prices". Důvodem je to, že data původně načtená v GridView měla svůj stav uložený ve stavu zobrazení, takže se znovu nenačtou při zpětném odeslání, pokud není uvedeno jinak. Pokud navštívíte jinou stránku a pak se vrátíte na ~/Admin/Products.aspx stránku, uvidíte aktualizované ceny.

Krok 3: Vyvolání události při zdvojnásobití cen

Vzhledem k tomu, že GridView na ~/Admin/Products.aspx stránce neodráží okamžitě zdvojnásobení ceny, může se uživatel pochopitelně domnívat, že neklikli na tlačítko "Double Product Price" nebo že to nefunguje. Můžou se pokusit kliknout na tlačítko ještě několikrát a znovu zdvojnásobit ceny. Abychom to vyřešili, musíme, aby mřížka na stránce obsahu zobrazovala nové ceny hned po jejich zdvojnásobití.

Jak je popsáno dříve v tomto kurzu, musíme vyvolat událost na stránce předlohy pokaždé, když uživatel klikne na DoublePrice tlačítko. Událost je způsob, jak může jedna třída (vydavatel události) oznámit jiné sadě dalších tříd (předplatitelům událostí), že došlo k něčemu zajímavému. V tomto příkladu je stránka předlohy vydavatelem události; ty stránky obsahu, které se starají o kliknutí na DoublePrice tlačítko, jsou odběratelé.

Třída se přihlásí k odběru události vytvořením obslužné rutiny události, což je metoda, která se spouští v reakci na vyvolání události. Vydavatel definuje události, které vyvolá, definováním delegáta události. Delegát události určuje, jaké vstupní parametry musí obslužná rutina události přijmout. V rozhraní .NET Framework delegáti událostí nevrací žádnou hodnotu a přijímají dva vstupní parametry:

, Objectkterý identifikuje zdroj událostí a
Třída odvozená z System.EventArgs

Druhý parametr předaný obslužné rutině události může obsahovat další informace o události. Zatímco základní EventArgs třída nepředává žádné informace, rozhraní .NET Framework obsahuje řadu tříd, které rozšiřují EventArgs a zahrnují další vlastnosti. Instance je například předána obslužným rutinům událostí, CommandEventArgs které na událost reagují Command , a obsahuje dvě informační vlastnosti: CommandArgument a CommandName.

Poznámka

Další informace o vytváření, vytváření a zpracování událostí najdete v tématu Události a delegáti a delegáti událostí v jednoduché angličtině.

K definování události použijte následující syntaxi:

Public Event eventName As eventDelegate

Vzhledem k tomu, že stačí upozornit stránku obsahu, když uživatel klikne na DoublePrice tlačítko a nemusí předávat žádné další další informace, můžeme použít delegáta EventHandlerudálosti , který definuje obslužnou rutinu události, která přijímá jako druhý parametr objekt typu System.EventArgs. Pokud chcete vytvořit událost na stránce předlohy, přidejte do třídy kódu na pozadí stránky předlohy následující řádek kódu:

Partial Class Site
 Inherits System.Web.UI.MasterPage

 Public Event PricesDoubled As EventHandler
 ...
End Class

Výše uvedený kód přidá veřejnou událost na stránku předlohy s názvem PricesDoubled. Nyní musíme tuto událost zvýšit, jakmile se ceny zdvojnásobí. K vyvolání události použijte následující syntaxi:

RaiseEvent eventName(sender, eventArgs)

Kde sender a eventArgs jsou hodnoty, které chcete předat obslužné rutině události odběratele.

Aktualizujte obslužnou rutinu DoublePriceClick události následujícím kódem:

Protected Sub DoublePrice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DoublePrice.Click
 ' Double the prices
 DoublePricesDataSource.Update()

 ' Refresh RecentProducts
 RecentProducts.DataBind()

 ' Raise the PricesDoubled event
 RaiseEvent PricesDoubled(Me, EventArgs.Empty)
End Sub

Stejně jako dříve obslužná rutina Click události začíná voláním DoublePricesDataSource metody ovládacího prvku Update SqlDataSource zdvojnásobit ceny všech produktů. Za tímto účelem jsou k obslužné rutině události dva dodatky. Nejprve se aktualizují RecentProducts data objektu GridView. Toto zobrazení GridView bylo přidáno na stránku předlohy v předchozím kurzu a zobrazuje pět naposledy přidaných produktů. Tuto mřížku musíme aktualizovat tak, aby zobrazovala právě zdvojnásobené ceny těchto pěti produktů. Potom se PricesDoubled vyvolá událost. Odkaz na samotnou stránku předlohy (Me) se odešle obslužné rutině události jako zdroj události a prázdný EventArgs objekt se odešle jako argumenty události.

Krok 4: Zpracování události na stránce obsahu

V tomto okamžiku stránka předlohy vyvolá svou PricesDoubled událost při každém kliknutí na DoublePrice ovládací prvek Tlačítko. To je však jen polovina bitvy - stále musíme zvládnout událost v odběrateli. To zahrnuje dva kroky: vytvoření obslužné rutiny události a přidání kódu pro zapojení událostí tak, aby se při vyvolání události obslužná rutina události spustila.

Začněte vytvořením obslužné rutiny události s názvem Master_PricesDoubled. Vzhledem k tomu, jak jsme definovali PricesDoubled událost na stránce předlohy, musí být dva vstupní parametry obslužné rutiny události typů Object a EventArgs, v uvedeném pořadí. V obslužné rutině události volejte metodu ProductsGrid GridView DataBind , aby se data znovu přidružovala k mřížce.

Private Sub Master_PricesDoubled(ByVal sender As Object, ByVal e As EventArgs)
 ' Rebind data to ProductsGrid
 ProductsGrid.DataBind()
End Sub

Kód obslužné rutiny události je dokončený, ale ještě jsme nepřivedli událost stránky předlohy PricesDoubled k této obslužné rutině události. Odběratel od drátu událost do obslužné rutiny události pomocí následující syntaxe:

AddHandler publisher.eventName, AddressOf methodName

publisher je odkaz na objekt, který nabízí událost eventName, a methodName je název obslužné rutiny události definované v odběrateli.

Tento kód zapojení události musí být proveden při první návštěvě stránky a následném zpětném odeslání a měl by nastat v bodě životního cyklu stránky, který předchází, kdy může být událost vyvolána. Vhodný čas k přidání kódu zapojení událostí je ve fázi PreInit, ke které dochází velmi brzy v životním cyklu stránky.

Otevřete ~/Admin/Products.aspx a vytvořte obslužnou rutinu Page_PreInit události:

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
 ' TODO: Put event wiring logic here
End Sub

K dokončení tohoto kódu zapojení potřebujeme programový odkaz na stránku předlohy ze stránky obsahu. Jak je uvedeno v předchozím kurzu, existují dva způsoby, jak to udělat:

Přetypováním vlastnosti volného typu Page.Master na příslušný typ stránky předlohy nebo
Přidáním @MasterType direktivy na .aspx stránku a následným použitím vlastnosti silného typu Master .

Pojďme použít druhý přístup. Na začátek deklarativního kódu stránky přidejte následující @MasterType direktivu:

<%@ MasterType VirtualPath="~/Site.master" %>

Pak do obslužné rutiny Page_PreInit události přidejte následující kód zapojení událostí:

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
 AddHandler Master.PricesDoubled, AddressOf Master_PricesDoubled
End Sub

S tímto kódem na místě, GridView na stránce obsahu se aktualizuje při každém kliknutí na DoublePrice tlačítko.

Toto chování znázorňují obrázky 8 a 9. Obrázek 8 znázorňuje stránku při první návštěvě. Všimněte si, že cenové hodnoty v RecentProducts GridView (v levém sloupci stránky předlohy) a ProductsGrid GridView (na stránce obsahu). Obrázek 9 znázorňuje stejnou obrazovku hned po kliknutí na DoublePrice tlačítko. Jak vidíte, nové ceny se okamžitě projeví v obou zobrazeních GridView.

Obrázek 08: Hodnoty počáteční ceny (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 09: Ceny Just-Doubled jsou zobrazeny v zobrazení GridViews (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

V ideálním případě jsou stránka předlohy a stránky jejího obsahu zcela oddělené od sebe a nevyžadují žádnou úroveň interakce. Pokud ale máte stránku předlohy nebo stránku obsahu, která zobrazují data, která se dají změnit ze stránky předlohy nebo stránky obsahu, může být potřeba, aby stránka předlohy při úpravě dat upozornila stránku obsahu (nebo naopak), aby bylo možné aktualizovat zobrazení. V předchozím kurzu jsme viděli, jak nechat stránku obsahu programově interagovat se stránkou předlohy; V tomto kurzu jsme se podívali na to, jak zahájit interakci stránkou předlohy.

I když programová interakce mezi obsahem a stránkou předlohy může pocházet z obsahu nebo stránky předlohy, použitý vzorec interakce závisí na původu. Rozdíly jsou způsobené tím, že stránka obsahu má jednu stránku předlohy, ale stránka předlohy může obsahovat mnoho různých stránek obsahu. Než aby stránka předlohy přímo interagovala se stránkou obsahu, je lepším přístupem nechat stránku předlohy vyvolat událost, která signalizují, že došlo k nějaké akci. Stránky obsahu, které se o akci zajímají, můžou vytvářet obslužné rutiny událostí.

Šťastné programování!

Další čtení

Další informace o tématech probíraných v tomto kurzu najdete v následujících zdrojích informací:

O autorovi

Scott Mitchell, autor několika knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 3,5 za 24 hodin. Scotta můžete zastihnout na mitchell@4GuysFromRolla.com nebo prostřednictvím jeho blogu na http://ScottOnWriting.NETadrese .

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavním recenzentem pro tento kurz byl Suchi Banerjee. Chcete si projít moje nadcházející články na WEBU MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.com

Předchozí Další

Share via