Stránky předlohy a ASP.NET AJAX (C#)

Scott Mitchell

Popisuje možnosti použití ASP.NET AJAX a stránek předlohy. Prohlédne si použití Třídy ScriptManagerProxy; popisuje, jak se načítají různé soubory JS v závislosti na tom, zda je scriptManager použit na stránce předlohy nebo na stránce Obsahu.

Úvod

V posledních několika letech se více a více vývojářů vytvářelo webové aplikace s podporou AJAX. Web s podporou AJAX používá řadu souvisejících webových technologií, které nabízejí rychlejší uživatelské prostředí. Vytváření ASP.NET aplikací s podporou AJAX je úžasně snadné díky architektuře ASP.NET AJAX od Microsoftu. ASP.NET AJAX je součástí ASP.NET 3.5 a Visual Studio 2008; je také k dispozici jako samostatný soubor ke stažení pro aplikace ASP.NET 2.0.

Při vytváření webových stránek s podporou AJAX s architekturou ASP.NET AJAX musíte přidat přesně jeden ovládací prvek ScriptManager na každou stránku, která používá architekturu. Jak název napovídá, ScriptManager spravuje skript na straně klienta, který se používá na webových stránkách s podporou AJAX. ScriptManager minimálně vygeneruje HTML, který dává prohlížeči pokyn ke stažení souborů JavaScriptu, které jsou součástí ASP.NET AJAX Client Library. Dá se také použít k registraci vlastních souborů JavaScriptu, webových služeb s podporou skriptů a funkcí vlastních aplikačních služeb.

Pokud váš web používá stránky předlohy (jak by měl), nemusíte nutně přidávat ovládací prvek ScriptManager na každou stránku obsahu; Místo toho můžete přidat ovládací prvek ScriptManager na stránku předlohy. Tento kurz ukazuje, jak přidat ovládací prvek ScriptManager na stránku předlohy. Také se podíváme na to, jak pomocí ovládacího prvku ScriptManagerProxy zaregistrovat vlastní skripty a skriptovací služby na konkrétní stránce obsahu.

Poznámka

Tento kurz se nezabývá navrhováním nebo sestavováním webových aplikací s podporou ajaxu pomocí architektury ASP.NET AJAX. Další informace o používání jazyka AJAX najdete v ASP.NET videích a kurzech ajax a také v materiálech uvedených v části Další čtení na konci tohoto kurzu.

Zkoumání revize generované ovládacím prvku ScriptManager

Ovládací prvek ScriptManager vygeneruje kód, který dává prohlížeči pokyn ke stažení souborů JavaScriptu, které jsou make-up ASP.NET AJAX Client Library. Přidá také na stránku, která inicializuje tuto knihovnu, trochu vloženého JavaScriptu. Následující kód zobrazuje obsah, který je přidán do vykresleného výstupu stránky, která obsahuje ovládací prvek ScriptManager:

<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>

Značky <script src="url"></script> instrukuje prohlížeč ke stažení a spuštění souboru JavaScriptu na adrese URL. ScriptManager vygeneruje tři takové značky; jeden odkazuje na soubor WebResource.axd, zatímco ostatní dva odkazují na soubor ScriptResource.axd. Tyto soubory ve skutečnosti neexistují jako soubory na vašem webu. Místo toho, když požadavek na některý z těchto souborů dorazí na webový server, modul ASP.NET prozkoumá řetězec dotazu a vrátí příslušný javascriptový obsah. Skript poskytnutý těmito třemi externími soubory JavaScriptu tvoří klientskou knihovnu rozhraní ASP.NET AJAX. Ostatní <script> značky generované správcem ScriptManager zahrnují vložený skript, který inicializuje tuto knihovnu.

Odkazy na externí skripty a vložené skripty generované správcem ScriptManager jsou nezbytné pro stránku, která používá rozhraní ASP.NET AJAX, ale není potřeba pro stránky, které tuto architekturu nepoužívají. Proto si můžete myslet, že je ideální přidat ScriptManager pouze na ty stránky, které používají ASP.NET AJAX framework. A to je dostačující, ale pokud máte mnoho stránek, které používají architekturu, nakonec přidáte na všechny stránky ovládací prvek ScriptManager - přinejmenším opakující se úkol. Případně můžete na stránku předlohy přidat ScriptManager, který pak vloží tento potřebný skript do všech stránek obsahu. S tímto přístupem nemusíte pamatovat na přidání ScriptManager na novou stránku, která používá rozhraní ASP.NET AJAX, protože je již součástí stránky předlohy. Krok 1 vás provede přidáním ScriptManageru na stránku předlohy.

Poznámka

Pokud plánujete zahrnout funkce AJAX do uživatelského rozhraní stránky předlohy, pak nemáte na výběr v této záležitosti – musíte zahrnout ScriptManager na stránku předlohy.

Nevýhodou přidání ScriptManageru na stránku předlohy je, že výše uvedený skript se vygeneruje na každé stránce bez ohledu na to, zda je potřeba. To jasně vede k plýtvání šířkou pásma pro ty stránky, které mají ScriptManager (prostřednictvím stránky předlohy), ale nepoužívají žádné funkce rozhraní ASP.NET AJAX. Ale kolik šířky pásma je zbytečné?

• Skutečný obsah vygenerovaný správcem ScriptManager (viz výše) je o něco více než 1 kB.
• Tři soubory externích skriptů, na které <script> element odkazuje, však tvoří přibližně 450 kB nekomprimovaných dat. Na webu, který používá kompresi gzip, lze tuto celkovou šířku pásma snížit téměř 100 kB. Tyto soubory skriptů jsou však prohlížečem uloženy v mezipaměti po dobu jednoho roku, což znamená, že je stačí stáhnout pouze jednou a pak je lze znovu použít na jiných stránkách webu.

V lepším případě jsou při ukládání souborů skriptů do mezipaměti celkové náklady 1 kB, což je zanedbatelné. V nejhorším případě je to ale v případě, že soubory skriptů ještě nebyly staženy a webový server nepoužívá žádnou formu komprese, je šířka pásma přibližně 450 kB, což může uživatelům přes vytáčené modemy přidat až minutu od sekundy nebo dvou přes širokopásmové připojení. Dobrou zprávou je, že vzhledem k tomu, že soubory externích skriptů jsou uloženy v mezipaměti prohlížečem, dochází k tomuto nejhoršímu scénáři zřídka.

Poznámka

Pokud se vám stále nedaří umístit ovládací prvek ScriptManager na stránku předlohy, zvažte webový formulář ( <form runat="server"> kód na stránce předlohy). Každá ASP.NET stránka, která používá model postbacku, musí obsahovat přesně jeden webový formulář. Přidání webového formuláře přidá další obsah: řadu skrytých polí formuláře, <form> samotnou značku a v případě potřeby funkci JavaScriptu pro zahájení zpětného vrácení ze skriptu. Tato revize není nutná pro stránky, které se nesmlouvají. Tento nadbytečný kód lze odstranit odebráním webového formuláře ze stránky předlohy a ručním přidáním na každou stránku obsahu, která ho potřebuje. Výhody webového formuláře na stránce předlohy však převáží nevýhody jeho zbytečného přidání na určité stránky obsahu.

Krok 1: Přidání ovládacího prvku ScriptManager na stránku předlohy

Každá webová stránka, která používá rozhraní ASP.NET AJAX, musí obsahovat přesně jeden ovládací prvek ScriptManager. Vzhledem k tomuto požadavku má obvykle smysl umístit na stránku předlohy jeden ovládací prvek ScriptManager tak, aby všechny stránky obsahu měly ovládací prvek ScriptManager automaticky zahrnuté. Kromě toho musí správce ScriptManager předcházet některému z ASP.NET ovládacích prvků serveru AJAX, jako jsou ovládací prvky UpdatePanel a UpdateProgress. Proto je nejlepší umístit ScriptManager před ovládací prvky ContentPlaceHolder v rámci webového formuláře.

Site.master Otevřete stránku předlohy a přidejte ovládací prvek ScriptManager na stránku v rámci webového formuláře, ale před <div id="topContent"> prvek (viz Obrázek 1). Pokud používáte Visual Web Developer 2008 nebo Visual Studio 2008, je ovládací prvek ScriptManager umístěn v sadě nástrojů na kartě ROZŠÍŘENÍ AJAX. Pokud používáte Visual Studio 2005, budete muset nejprve nainstalovat rozhraní ASP.NET AJAX a přidat ovládací prvky do sady nástrojů. Navštivte ASP.NET AJAX Wiki a získejte architekturu pro ASP.NET 2.0.

Po přidání ScriptManageru na stránku změňte jeho ID z ScriptManager1 na MyManager.

Obrázek 01: Přidání správce ScriptManager na stránku předlohy (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Použití ASP.NET rozhraní AJAX ze stránky obsahu

Po přidání ovládacího prvku ScriptManager na stránku předlohy teď můžeme přidat ASP.NET funkce architektury AJAX na libovolnou stránku obsahu. Pojďme vytvořit novou stránku ASP.NET, která zobrazí náhodně vybraný produkt z databáze Northwind. Pomocí ovládacího prvku Timer architektury ASP.NET AJAX aktualizujeme tuto obrazovku každých 15 sekund a zobrazí se nový produkt.

Začněte vytvořením nové stránky v kořenovém adresáři s názvem ShowRandomProduct.aspx. Nezapomeňte svázat tuto novou stránku se stránkou předlohy Site.master .

Obrázek 02: Přidání nové stránky ASP.NET na web (kliknutím zobrazíte obrázek v plné velikosti)

Vzpomeňte si, že v kurzu Určení názvu, metaznaček 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á vygenerovala název stránky, pokud nebyl explicitně nastaven. Přejděte na ShowRandomProduct.aspx třídu kódu na pozadí stránky a nechte ji odvodit z BasePage (místo z System.Web.UI.Page).

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

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

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

Zobrazení náhodně vybraného produktu

Vraťte se do ShowRandomProduct.aspx. Z Designer přetáhněte ovládací prvek UpdatePanel z panelu nástrojů do MainContent ovládacího prvku Content a nastavte jeho ID vlastnost na ProductPanel. UpdatePanel představuje oblast na obrazovce, kterou lze asynchronně aktualizovat prostřednictvím částečného postback stránky.

Naším prvním úkolem je zobrazit informace o náhodně vybraném produktu v rámci UpdatePanel. Začněte přetažením ovládacího prvku DetailsView do prvku UpdatePanel. Nastavte vlastnost ovládacího prvku ID DetailsView na ProductInfo a vymažte jeho Height a Width vlastnosti. Rozbalte inteligentní značku DetailsView a v rozevíracím seznamu Zvolit zdroj dat zvolte vytvořit vazbu DetailsView na nový ovládací prvek SqlDataSource s názvem RandomProductDataSource.

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

Nakonfigurujte ovládací prvek SqlDataSource pro připojení k databázi Northwind přes NorthwindConnectionString (který jsme vytvořili v kurzu Interakce se stránkou předlohy z kurzu Stránka obsahu ). Při konfiguraci příkazu select zvolte zadání vlastního příkazu SQL a pak zadejte následující dotaz:

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

Klíčové TOP 1 slovo v klauzuli SELECT vrátí pouze první záznam vrácený dotazem. FunkceNEWID() vygeneruje novou hodnotu globálně jedinečného identifikátoru (GUID) a dá se v ORDER BY klauzuli použít k vrácení záznamů tabulky v náhodném pořadí.

Obrázek 04: Konfigurace sqldatasource pro vrácení jednoho náhodně vybraného záznamu (kliknutím zobrazíte obrázek v plné velikosti)

Po dokončení průvodce visual studio vytvoří BoundField pro dva sloupce vrácené výše uvedeným dotazem. V tomto okamžiku by deklarativní kód stránky měl vypadat nějak takto:

<asp:UpdatePanel ID="ProductPanel" runat="server">
 <ContentTemplate>
 <asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False" 
 DataSourceID="RandomProductDataSource">
 <Fields>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Fields>
 </asp:DetailsView>
 <asp:SqlDataSource ID="RandomProductDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

Obrázek 5 znázorňuje ShowRandomProduct.aspx stránku při zobrazení v prohlížeči. Kliknutím na tlačítko Aktualizovat v prohlížeči stránku znovu načtěte; měly by se ProductName zobrazit hodnoty a UnitPrice pro nový náhodně vybraný záznam.

Obrázek 05: Zobrazí se název a cena náhodného produktu (kliknutím zobrazíte obrázek v plné velikosti)

Automatické zobrazení nového produktu každých 15 sekund

Rozhraní ASP.NET AJAX zahrnuje ovládací prvek Časovač, který provádí postback v zadaném čase; na postbacku je vyvolána událost Časovače Tick . Pokud je ovládací prvek Timer umístěn v updatePanel aktivuje částečné postback stránky, během kterého můžeme znovu přidružovat data do DetailsView a zobrazit nový náhodně vybraný produkt.

Chcete-li toho dosáhnout, přetáhněte časovač z panelu nástrojů a přetáhněte ho do panelu UpdatePanel. Změňte hodnotu Časovač ID z Timer1 na ProductTimer a jeho Interval vlastnost z 60000 na 15000. Vlastnost Interval označuje počet milisekund mezi postbacky. Nastavení na hodnotu 15000 způsobí, že časovač každých 15 sekund aktivuje částečný postback stránky. V tomto okamžiku by deklarativní kód časovače měl vypadat přibližně takto:

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

Vytvořte obslužnou rutinu události časovače Tick . V této obslužné rutině události musíme znovu připojit data k DetailsView voláním metody DetailsView DataBind . To dává zobrazení DetailsView pokyn, aby znovu načetl data ze svého ovládacího prvku zdroje dat, který vybere a zobrazí nový náhodně vybraný záznam (stejně jako při opětovném načtení stránky kliknutím na tlačítko Aktualizovat v prohlížeči).

protected void ProductTimer_Tick(object sender, EventArgs e)
{
    ProductInfo.DataBind();
}

A je to! Znovu přejděte na stránku v prohlížeči. Zpočátku se zobrazí informace o náhodném produktu. Pokud trpělivě watch obrazovku, všimnete si, že po 15 sekundách informace o novém produktu magicky nahradí stávající displej.

Abychom lépe viděli, co se tady děje, přidáme do UpdatePanel ovládací prvek Popisek, který zobrazuje čas poslední aktualizace zobrazení. Přidejte ovládací prvek Label Web v rámci UpdatePanel, nastavte ho ID na LastUpdateTimea vymažte jeho Text vlastnost. Dále vytvořte obslužnou rutinu události pro událost UpdatePanel Load a zobrazte aktuální čas v popisku. (Událost UpdatePanel se Load aktivuje při každém úplném nebo částečném zpětném odeslání stránky.)

protected void ProductPanel_Load(object sender, EventArgs e)
{
    LastUpdateTime.Text = "Last updated at " + DateTime.Now.ToLongTimeString();
}

Po dokončení této změny bude stránka obsahovat čas načtení aktuálně zobrazeného produktu. Obrázek 6 ukazuje stránku při první návštěvě. Obrázek 7 ukazuje stránku o 15 sekund později po zaškrtnutí ovládacího prvku Časovač a aktualizaci UpdatePanel, aby se zobrazily informace o novém produktu.

Obrázek 06: Náhodně vybraný produkt se zobrazí při načtení stránky (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 07: Každých 15 sekund se zobrazí nový náhodně vybraný produkt (kliknutím zobrazíte obrázek v plné velikosti)

Krok 3: Použití ovládacího prvku ScriptManagerProxy

Spolu se zahrnutím skriptu potřebného pro klientskou knihovnu rozhraní ASP.NET AJAX může ScriptManager také registrovat vlastní soubory JavaScriptu, odkazy na webové služby s povolenými skripty a vlastní služby ověřování, autorizace a profilu. Tato přizpůsobení jsou obvykle specifická pro určitou stránku. Pokud jsou však soubory vlastních skriptů, odkazy na webovou službu nebo ověřovací, autorizační nebo profilové služby odkazovány ve správci ScriptManager na stránce předlohy, jsou zahrnuty do všech stránek webu.

Chcete-li přidat přizpůsobení související s ScriptManager na stránce po stránce, použijte ScriptManagerProxy ovládací prvek. Můžete přidat ScriptManagerProxy na stránku obsahu a pak zaregistrovat vlastní javascriptový soubor, odkaz na webovou službu nebo ověřovací, autorizační nebo profilovou službu z ScriptManagerProxy; to má za následek registraci těchto služeb pro konkrétní stránku obsahu.

Poznámka

Na stránce ASP.NET může být pouze jeden ovládací prvek ScriptManager. Proto nelze přidat ovládací prvek ScriptManager na stránku obsahu, pokud je již na stránce předlohy definován ovládací prvek ScriptManager. Jediným účelem ScriptManagerProxy je poskytnout vývojářům způsob, jak definovat ScriptManager na stránce předlohy, ale stále mají možnost přidávat vlastní nastavení ScriptManageru po stránce.

Pokud chcete zobrazit ovládací prvek ScriptManagerProxy v akci, rozšíříme updatePanel v ShowRandomProduct.aspx souboru o tlačítko, které pomocí skriptu na straně klienta pozastaví nebo obnoví ovládací prvek Časovač. Ovládací prvek Časovač má tři metody na straně klienta, které můžeme použít k dosažení této požadované funkce:

• _startTimer() – spustí ovládací prvek Časovač.
• _raiseTick() - způsobí, že ovládací prvek Časovač "odškrtá", čímž se publikuje zpět a vyvolá jeho Tick událost na serveru.
• _stopTimer() – zastaví ovládací prvek Časovač.

Pojďme vytvořit javascriptový soubor s proměnnou s názvem timerEnabled a funkcí s názvem ToggleTimer. Proměnná timerEnabled označuje, jestli je ovládací prvek Časovač aktuálně povolený nebo zakázaný. Výchozí hodnota je true. Funkce ToggleTimer přijímá dva vstupní parametry: odkaz na tlačítko Pozastavit/Pokračovat a hodnotu na straně id klienta ovládacího prvku Časovač. Tato funkce přepíná hodnotu , timerEnabledzíská odkaz na ovládací prvek Časovač, spustí nebo zastaví časovač (v závislosti na hodnotě timerEnabled) a aktualizuje zobrazovaný text tlačítka na "Pozastavit" nebo "Pokračovat". Tato funkce se zavolá při každém kliknutí na tlačítko Pozastavit/Pokračovat.

Začněte vytvořením nové složky na webu s názvem Scripts. Dále přidejte nový soubor do složky Scripts typu TimerScript.js JScript File.

Obrázek 08: Přidání nového souboru JavaScriptu Scripts do složky (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 09: Na web byl přidán nový soubor JavaScriptu (kliknutím zobrazíte obrázek v plné velikosti)

Dále do souboru TimerScript.js přidejte následující scrip:

var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
    // Toggle the timer enabled state
    timerEnabled = !timerEnabled;

    // Get a reference to the Timer
    var timer = $find(timerID);

    if (timerEnabled)
    {
        // Start timer
        timer._startTimer();

        // Immediately raise a tick
        timer._raiseTick();

        btn.value = 'Pause';
    }
    else
    {
        // Stop timer
        timer._stopTimer();

        btn.value = 'Resume';
    }
}

Teď musíme zaregistrovat tento vlastní javascriptový soubor v ShowRandomProduct.aspxnástroji . Vraťte se na ShowRandomProduct.aspx stránku a přidejte na stránku ovládací prvek ScriptManagerProxy; nastavte ho ID na MyManagerProxy. Pokud chcete zaregistrovat vlastní soubor JavaScriptu, vyberte v Designer ovládací prvek ScriptManagerProxy a pak přejděte na okno Vlastnosti. Jedna z vlastností má název Skripty. Výběrem této vlastnosti se zobrazí kolekce ScriptReference Editor zobrazená na obrázku 10. Kliknutím na tlačítko Přidat přidejte odkaz na nový skript a potom zadejte cestu k souboru skriptu ve vlastnosti Path: ~/Scripts/TimerScript.js.

Obrázek 10: Přidání odkazu na skript do ovládacího prvku ScriptManagerProxy (kliknutím zobrazíte obrázek v plné velikosti)

Po přidání odkazu na skript se deklarativní kód ovládacího prvku ScriptManagerProxy aktualizuje tak, aby zahrnoval <Scripts> kolekci s jednou ScriptReference položkou, jak ukazuje následující fragment kódu:

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

Položka ScriptReference instruuje ScriptManagerProxy, aby do vykresleného kódu zahrnul odkaz na javascriptový soubor. To znamená, že registrací vlastního skriptu v ScriptManagerProxy ShowRandomProduct.aspx teď vykreslený výstup stránky obsahuje další <script src="url"></script> značku: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Teď můžeme volat funkci definovanou ToggleTimer v TimerScript.js z klientského skriptu na ShowRandomProduct.aspx stránce. Do elementu UpdatePanel přidejte následující kód HTML:

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

Zobrazí se tlačítko s textem Pozastavit. Při každém kliknutí se volá funkce ToggleTimer JavaScriptu, která předává odkaz na tlačítko a hodnotu ID ovládacího prvku Timer (ProductTimer). Všimněte si syntaxe pro získání id hodnoty ovládacího prvku Časovač. <%=ProductTimer.ClientID%> vygeneruje hodnotu ProductTimer vlastnosti ovládacího prvku ClientID Timer. V kurzu Pojmenování ID ovládacího prvku na stránkách obsahu jsme probrali rozdíly mezi hodnotou na straně ID serveru a výslednou hodnotou na straně id klienta a o tom, jak ClientID vrací hodnotu na straně idklienta .

Obrázek 11 ukazuje tuto stránku při první návštěvě v prohlížeči. Časovač je aktuálně spuštěný a každých 15 sekund aktualizuje zobrazené informace o produktu. Obrázek 12 znázorňuje obrazovku po kliknutí na tlačítko Pozastavit. Kliknutím na tlačítko Pozastavit zastavíte časovač a aktualizujete text tlačítka na Pokračovat. Jakmile uživatel klikne na Pokračovat, informace o produktu se aktualizují (a budou se aktualizovat každých 15 sekund).

Obrázek 11: Kliknutím na tlačítko Pozastavit zastavte ovládací prvek časovače (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 12: Kliknutím na tlačítko Pokračovat restartujte časovač (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

Při vytváření webových aplikací s podporou AJAX pomocí rozhraní ASP.NET AJAX je nutné, aby každá webová stránka s podporou AJAX obsahovala ovládací prvek ScriptManager. Abychom tento proces usnadnili, můžeme na stránku předlohy přidat ScriptManager místo toho, abychom museli pamatovat na přidání ScriptManageru na každou stránku obsahu. Krok 1 ukázal, jak přidat ScriptManager na stránku předlohy, zatímco krok 2 se podíval na implementaci funkcí AJAX na stránce obsahu.

Pokud potřebujete přidat vlastní skripty, odkazy na webové služby s povolenými skripty nebo přizpůsobené ověřovací, autorizační nebo profilové služby na konkrétní stránku obsahu, přidejte ovládací prvek ScriptManagerProxy na stránku obsahu a pak nakonfigurujte přizpůsobení tam. Krok 3 prozkoumal, jak použít ScriptManagerProxy k registraci vlastního souboru JavaScriptu na konkrétní stránce obsahu.

Šť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í:

• ASP.NET AJAX Framework
• kurzy k ASP.NET AJAX
• ASP.NET AJAX Videa
• Vytváření interaktivního uživatelského rozhraní pomocí Microsoft ASP.NET AJAX
• Použití NEWID k náhodnému řazení záznamů
• Použití ovládacího prvku Časovač

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 poslední kniha je Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Scotta můžete zastihnout na adrese mitchell@4GuysFromRolla.com nebo prostřednictvím svého blogu na adrese http://ScottOnWriting.NET.

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Chtěli byste si projít své nadcházející články na webu MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.com

PředchozíDalší