Principy částečných aktualizací stránek technologií ASP.NET AJAX

Scott Cate

Možná nejviditelnější funkcí rozšíření ASP.NET AJAX je schopnost provádět částečné nebo přírůstkové aktualizace stránky bez provedení úplného postbacku na server, bez jakýchkoli změn kódu a minimálních změn značek. Výhody jsou rozsáhlé – stav vašich multimédií (například Adobe Flash nebo Windows Media) se nemění, náklady na šířku pásma se snižují a klient nezaznamená blikání, které obvykle souvisí s postbackem.

Úvod

Technologie ASP.NET od Microsoftu přináší objektově orientovaný programovací model řízený událostmi a spojuje ho s výhodami zkompilovaného kódu. Model zpracování na straně serveru má však několik nevýhod, které s technologií vyplývají:

• Aktualizace stránky vyžadují odezvu na server, která vyžaduje aktualizaci stránky.
• Doby odezvy nezachovávají žádné efekty generované javascriptem nebo jinou technologií na straně klienta (například Adobe Flash).
• Během postbacku nepodporují prohlížeče jiné než Microsoft Internet Explorer automatické obnovení pozice posouvání. A i v Internet Exploreru se při aktualizaci stránky stále bliká.
• Zpětné odeslání může zahrnovat velkou šířku pásma, protože __VIEWSTATE pole formuláře může růst, zejména při práci s ovládacími prvky, jako je GridView ovládací prvek nebo opakovače.
• Neexistuje jednotný model pro přístup k webovým službám prostřednictvím JavaScriptu nebo jiné technologie na straně klienta.

Zadejte ASP.NET rozšíření AJAX od Microsoftu. AJAX, což je zkratka pro synchronníJ avaScript A nd X ML, je integrovaná architektura pro poskytování přírůstkových aktualizací stránek prostřednictvím multiplatformního JavaScriptu, která se skládá z kódu na straně serveru, který se skládá z rozhraní Microsoft AJAX Framework, a komponenty skriptu označované jako Microsoft AJAX Script Library. Rozšíření ASP.NET AJAX také poskytují podporu více platforem pro přístup k webovým službám ASP.NET prostřednictvím Jazyka JavaScript.

Tento dokument white paper zkoumá funkce částečné aktualizace stránky rozšíření ASP.NET AJAX, která zahrnuje komponentu ScriptManager, ovládací prvek UpdatePanel a ovládací prvek UpdateProgress, a zvažuje scénáře, ve kterých by měly nebo neměly být použity.

Tento dokument white paper je založený na verzi Beta 2 sady Visual Studio 2008 a rozhraní .NET Framework 3.5, která integruje rozšíření ASP.NET AJAX do základní knihovny tříd (kde byla dříve doplňková komponenta dostupná pro ASP.NET 2.0). Tento dokument white paper také předpokládá, že používáte Visual Studio 2008 a nikoli Visual Web Developer Express Edition; Některé odkazované šablony projektů nemusí být k dispozici uživatelům visual Web Developer Express.

Částečné Aktualizace stránky

Možná nejviditelnější funkcí rozšíření ASP.NET AJAX je schopnost provádět částečné nebo přírůstkové aktualizace stránky bez provedení úplného postbacku na server, bez jakýchkoli změn kódu a minimálních změn značek. Výhody jsou rozsáhlé – stav vašich multimédií (jako je Adobe Flash nebo Windows Media) se nemění, náklady na šířku pásma se snižují a klient nezaznamená blikání, které obvykle souvisí s postbackem.

Možnost integrace částečného vykreslování stránek je integrovaná do ASP.NET s minimálními změnami v projektu.

Návod: Integrace částečného vykreslování do existujícího projektu

1. V sadě Microsoft Visual Studio 2008 vytvořte nový projekt ASP.NET webu tak, že přejdete na Soubor–> Nový–> Web a v dialogovém okně vyberete ASP.NET Web. Můžete ji pojmenovat, jak chcete, a můžete ji nainstalovat buď do systému souborů, nebo do Internetové informační služby (IIS).
2. Zobrazí se prázdná výchozí stránka se základním kódem ASP.NET (formulář na straně serveru a direktiva @Page ). Přetáhněte label s názvem Label1 a button volaný Button1 na stránku v rámci elementu formuláře. Jejich vlastnosti textu můžete nastavit tak, jak se vám zlíbí.
3. V návrhovém zobrazení poklikáním Button1 vygenerujete obslužnou rutinu události kódu na pozadí. V rámci této obslužné rutiny události nastavte Label1.Text na Tlačítko Jste klikli! .

Výpis 1: Revize pro default.aspx před povolením částečného vykreslování

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

Výpis 2: Codebehind (oříznuto) v default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}

1. Stisknutím klávesy F5 spusťte web. Visual Studio vás vyzve k přidání souboru web.config pro povolení ladění. udělejte to. Když kliknete na tlačítko, všimněte si, že se stránka aktualizuje, aby se změnil text v popisku, a při překreslení stránky se krátce bliká.
2. Po zavření okna prohlížeče se vraťte do sady Visual Studio a na stránku se značkami. V sadě nástrojů sady Visual Studio se posuňte dolů a najděte kartu s názvem Rozšíření AJAX. (Pokud tuto kartu nemáte, protože používáte starší verzi rozšíření AJAX nebo Atlas, přečtěte si návod pro registraci položek sady nástrojů ROZŠÍŘENÍ AJAX dále v tomto dokumentu white paper nebo nainstalujte aktuální verzi pomocí Instalační služby systému Windows ke stažení z webu.)

(Kliknutím zobrazíte obrázek v plné velikosti.)

1. Známý problém:Pokud nainstalujete sadu Visual Studio 2008 do počítače, na který už je nainstalovaná sada Visual Studio 2005 s rozšířeními ASP.NET 2.0 AJAX, naimportuje Visual Studio 2008 položky sady nástrojů AJAX Extensions. Můžete zjistit, zda se jedná o tento případ prozkoumáním popisu komponent; Měla by se zobrazit verze 3.5.0.0. Pokud se zobrazí verze 2.0.0.0, znamená to, že jste naimportovali staré položky panelu nástrojů a budete je muset importovat ručně pomocí dialogového okna Zvolit položky panelu nástrojů v sadě Visual Studio. Nebudete moci přidat ovládací prvky verze 2 prostřednictvím návrháře.

2. Před zahájením <asp:Label> značky vytvořte řádek prázdných znaků a poklikejte na ovládací prvek UpdatePanel v sadě nástrojů. Všimněte si, že v horní části stránky je uvedena nová @Register direktiva, která označuje, že ovládací prvky v oboru názvů System.Web.UI by měly být importovány pomocí předpony asp: .

3. Přetáhněte uzavírací </asp:UpdatePanel> značku za konec prvku Button tak, aby byl prvek ve správném formátu se zabalenými ovládacími prvky Popisek a Tlačítko.

4. Po úvodní <asp:UpdatePanel> značce začněte otevírat novou značku. IntelliSense vás vyzve ke dvěma možnostem. V takovém případě vytvořte <ContentTemplate> značku. Nezapomeňte tuto značku zabalit kolem popisků a tlačítek, aby byly značky ve správném formátu.

(Kliknutím zobrazíte obrázek v plné velikosti.)

1. Kdekoli v elementu <form> zahrňte ovládací prvek ScriptManager poklikáním ScriptManager na položku v sadě nástrojů.
2. <asp:ScriptManager> Upravte značku tak, aby obsahovala atribut EnablePartialRendering= true.

Výpis 3: Revize pro default.aspx s povoleným částečným vykreslováním

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. Otevřete soubor s web.config. Všimněte si, že sada Visual Studio automaticky přidala odkaz na kompilaci pro System.Web.Extensions.dll.

2. Novinky v sadě Visual Studio 2008: web.config, která je součástí šablon projektů webu ASP.NET, automaticky obsahuje všechny potřebné odkazy na rozšíření ASP.NET AJAX a obsahuje okomentované části informací o konfiguraci, které je možné zrušit komentář, aby bylo možné povolit další funkce. Visual Studio 2005 mělo podobné šablony při instalaci rozšíření AJAX ASP.NET 2.0. V sadě Visual Studio 2008 jsou však rozšíření AJAX ve výchozím nastavení odhlašována (to znamená, že jsou ve výchozím nastavení odkazována, ale lze je odebrat jako odkazy).

(Kliknutím zobrazíte obrázek v plné velikosti.)

1. Stisknutím klávesy F5 spusťte svůj web. Všimněte si, že pro podporu částečného vykreslování nebyly nutné žádné změny zdrojového kódu – změnily se jenom značky.

Když spustíte svůj web, měli byste vidět, že částečné vykreslování je teď povolené, protože když kliknete na tlačítko, nedojde k žádnému blikání ani k žádné změně pozice posouvání stránky (tento příklad to neukazuje). Pokud jste se po kliknutí na tlačítko podívali na vykreslený zdroj stránky, potvrdí se, že ve skutečnosti nedošlo k zpětnému odeslání – původní text popisku je stále součástí zdrojového kódu a popisek se změnil v JavaScriptu.

Zdá se, že Visual Studio 2008 neobsahuje předdefinované šablony pro web ASP.NET AJAX-Enabled. Taková šablona však byla k dispozici v sadě Visual Studio 2005, pokud byla nainstalována rozšíření AJAX sady Visual Studio 2005 a ASP.NET 2.0. Konfigurace webu a spuštění šablony webu AJAX-Enabled bude pravděpodobně ještě jednodušší, protože šablona by měla obsahovat plně nakonfigurovaný soubor web.config (podporující všechny ASP.NET rozšíření AJAX, včetně přístupu k webovým službám a serializace JSON – JavaScript Object Notation) a ve výchozím nastavení v hlavní Web Forms stránce obsahuje UpdatePanel a ContentTemplate. Povolení částečného vykreslování s touto výchozí stránkou je stejně jednoduché, jako když si projděte krok 10 tohoto návodu a přetáhněte ovládací prvky na stránku.

Ovládací prvek ScriptManager

Referenční dokumentace ovládacího prvku ScriptManager

Markup-Enabled vlastnosti:

Název vlastnosti	Typ	Popis
AllowCustomErrors-Redirect	Logická hodnota	Určuje, jestli se má ke zpracování chyb použít oddíl s vlastními chybami v souboru web.config.
AsyncPostBackError-Message	Řetězec	Získá nebo nastaví chybovou zprávu odeslanou klientovi, pokud je vyvolána chyba.
AsyncPostBack-Timeout	Int32	Získá nebo nastaví výchozí dobu, po kterou by klient měl čekat na dokončení asynchronního požadavku.
EnableScript-Globalization	Logická hodnota	Získá nebo nastaví, zda je povolena globalizace skriptu.
EnableScript-Localization	Logická hodnota	Získá nebo nastaví, zda je povolena lokalizace skriptu.
ScriptLoadTimeout	Int32	Určuje povolený počet sekund pro načítání skriptů do klienta.
ScriptMode	Výčet (automatický, ladicí, vydaný, zděděný)	Získá nebo nastaví, jestli se mají vykreslit vydané verze skriptů.
Cesta skriptu	Řetězec	Získá nebo nastaví kořenovou cestu k umístění souborů skriptu, které mají být odeslány klientovi.

Code-Only vlastnosti:

Název vlastnosti	Typ	Popis
Authenticationservice	AuthenticationService-Manager	Získá podrobnosti o ASP.NET ověřovací služby proxy, který bude odeslán klientovi.
IsDebuggingEnabled	Logická hodnota	Získá, zda skript a ladění kódu je povoleno.
Isinasyncpostback	Logická hodnota	Získá, zda stránka je aktuálně v asynchronní post back požadavek.
Profileservice	ProfileService-Manager	Získá podrobnosti o proxy serveru služby profilace ASP.NET, který bude odeslán klientovi.
Skripty	Referenční informace ke skriptu kolekce<>	Získá kolekci skript odkazy, které budou odeslány klientovi.
Služby	Referenční informace ke službě Collection<Service>	Získá kolekci odkazy proxy webové služby, které budou odeslány klientovi.
SupportsPartialRendering	Logická hodnota	Získá, zda aktuální klient podporuje částečné vykreslování. Pokud tato vlastnost vrátí hodnotu false, budou všechny požadavky na stránku standardním zpětným odesláním.

Metody veřejného kódu:

Název metody	Typ	Popis
SetFocus(řetězec)	Void	Nastaví fokus klienta na konkrétní ovládací prvek po dokončení požadavku.

Potomci značek:

Tag	Popis
<Authenticationservice>	Poskytuje podrobnosti o proxy pro službu ověřování ASP.NET.
<Profileservice>	Poskytuje podrobnosti o proxy serveru pro službu profilace ASP.NET.
<Skripty>	Poskytuje další odkazy na skripty.
<asp:ScriptReference>	Označuje odkaz na konkrétní skript.
<Služba>	Poskytuje další odkazy na webovou službu, které budou mít vygenerované třídy proxy.
<asp:ServiceReference>	Označuje konkrétní odkaz na webovou službu.

Ovládací prvek ScriptManager je základním jádrem rozšíření ASP.NET AJAX. Poskytuje přístup ke knihovně skriptů (včetně rozsáhlého systému typů skriptů na straně klienta), podporuje částečné vykreslování a poskytuje rozsáhlou podporu pro další služby ASP.NET (jako je ověřování a profilace, ale i další webové služby). Ovládací prvek ScriptManager také poskytuje podporu globalizace a lokalizace pro klientské skripty.

Poskytování alternativních a doplňkových skriptů

Zatímco Microsoft ASP.NET 2.0 AJAX Rozšíření zahrnují celý kód skriptu v ladicích i vydaných edicích jako prostředky vložené v odkazovaných sestaveních, vývojáři mohou přesměrovat ScriptManager na soubory přizpůsobených skriptů, stejně jako zaregistrovat další nezbytné skripty.

Chcete-li přepsat výchozí vazbu pro obvykle zahrnuté skripty (například ty, které podporují obor názvů Sys.WebForms a vlastní systém psaní), můžete zaregistrovat pro ResolveScriptReference událost ScriptManager třídy. Když je volána tato metoda, obslužná rutina události má příležitost změnit cestu k příslušnému souboru skriptu; Správce skriptů pak pošle klientovi jinou nebo přizpůsobenou kopii skriptů.

Kromě toho lze odkazy na skripty (reprezentované ScriptReference třídou) zahrnout programově nebo prostřednictvím značek. Provedete to tak, že buď programově upravíte kolekci ScriptManager.Scripts , nebo zahrňte <asp:ScriptReference> značky pod <Scripts> značku , která je podřízeným elementem první úrovně ovládacího prvku ScriptManager.

Vlastní zpracování chyb pro updatepanely

Ačkoli aktualizace jsou zpracovávány triggery určené UpdatePanel ovládací prvky, podpora zpracování chyb a vlastní chybové zprávy je zpracována ScriptManager ovládacího prvku instance stránky. To se provádí tak, AsyncPostBackErrorže se na stránce zobrazí událost , která pak může poskytnout vlastní logiku zpracování výjimek.

Použitím události AsyncPostBackError můžete zadat AsyncPostBackErrorMessage vlastnost , která pak způsobí vyvolání pole upozornění po dokončení zpětného volání.

Přizpůsobení na straně klienta je také možné místo použití výchozího pole upozornění; Například můžete chtít místo výchozího modálního dialogového okna prohlížeče zobrazit přizpůsobený <div> prvek. V takovém případě můžete chybu zpracovat v klientském skriptu:

Výpis 5: Skript na straně klienta pro zobrazení vlastních chyb

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Jednoduše řečeno, výše uvedený skript zaregistruje zpětné volání s modulem runtime AJAX na straně klienta při dokončení asynchronního požadavku. Poté zkontroluje, jestli byla nahlášena chyba, a pokud ano, zpracuje podrobnosti o této chybě a nakonec indikuje modulu runtime, že chyba byla zpracována ve vlastním skriptu.

Podpora globalizace a lokalizace

Ovládací prvek ScriptManager poskytuje rozsáhlou podporu pro lokalizaci řetězců skriptů a součástí uživatelského rozhraní; Toto téma je však mimo rozsah tohoto dokumentu white paper. Další informace najdete v dokumentu white paper Podpora globalizace v ASP.NET rozšíření AJAX.

Ovládací prvek UpdatePanel

Referenční dokumentace ovládacího prvku UpdatePanel

Markup-Enabled vlastnosti:

Název vlastnosti	Typ	Popis
ChildrenAsTriggers	bool	Určuje, jestli podřízené ovládací prvky automaticky vyvolávají aktualizaci při zpětném odeslání.
RenderMode	enum (Block, Inline)	Určuje způsob, jakým bude obsah vizuálně prezentován.
Updatemode	enum (Always, Conditional)	Určuje, jestli se updatePanel vždy aktualizuje během částečného vykreslení, nebo jestli se aktualizuje jenom při stisknutí aktivační události.

Code-Only vlastnosti:

Název vlastnosti	Typ	Popis
IsInPartialRendering	bool	Získá, zda UpdatePanel podporuje částečné vykreslování pro aktuální požadavek.
Contenttemplate	Itemplate	Získá šablonu značek pro žádost o aktualizaci.
Kontejner obsahu	Řízení	Získá programovou šablonu pro žádost o aktualizaci.
Aktivační události	UpdatePanel – TriggerCollection	Získá seznam aktivačních událostí přidružených k aktuálnímu UpdatePanel.

Metody veřejného kódu:

Název metody	Typ	Popis
Update()	Void	Aktualizace zadaný updatePanel programově. Umožňuje požadavek serveru aktivovat částečné vykreslení jinak netriggered UpdatePanel.

Potomci značek:

Tag	Popis
<Contenttemplate>	Určuje kód, který se má použít k vykreslení částečného výsledku vykreslování. Podřízený prvek <asp:UpdatePanel>.
<Triggery>	Určuje kolekci n ovládacích prvků přidružených k aktualizaci tohoto prvku UpdatePanel. Podřízený prvek <asp:UpdatePanel>.
<asp:AsyncPostBackTrigger>	Určuje aktivační událost, která vyvolá vykreslení částečné stránky pro daný UpdatePanel. To může nebo nemusí být ovládací prvek jako potomek dané UpdatePanel. Podrobné informace o názvu události Podřízený prvek aktivačních <událostí>.
<asp:PostBackTrigger>	Určuje ovládací prvek, který způsobí aktualizaci celé stránky. To může nebo nemusí být ovládací prvek jako potomek dané UpdatePanel. Podrobné informace k objektu. Podřízený prvek aktivačních <událostí>.

Ovládací UpdatePanel prvek je ovládací prvek, který odlišuje obsah na straně serveru, který se bude podílet na funkci částečného vykreslování rozšíření AJAX. Neexistuje žádné omezení počtu ovládacích prvků UpdatePanel, které mohou být na stránce, a mohou být vnořené. Každý UpdatePanel je izolovaný, takže každý může pracovat nezávisle (můžete mít dva updatepanely spuštěné současně, vykreslování různých částí stránky, nezávisle na postback stránky).

UpdatePanel ovládací prvek primárně pracuje s ovládacími aktivačními událostmi - ve výchozím nastavení je jakýkoli ovládací prvek obsažený v UpdatePanel ContentTemplate , který vytváří postback, je registrován jako aktivační událost pro UpdatePanel. To znamená, že UpdatePanel může pracovat s výchozími ovládacími prvky vázané na data (například GridView) s uživatelskými ovládacími prvky a mohou být naprogramovány ve skriptu.

Ve výchozím nastavení, když je aktivována částečná vykreslení stránky, všechny updatePanel ovládací prvky na stránce budou aktualizovány, ať už ovládací prvky UpdatePanel definované triggery pro takovou akci. Například pokud jeden UpdatePanel definuje ovládací prvek Tlačítko a tento ovládací prvek Button je kliknut, všechny UpdatePanel ovládací prvky na této stránce budou aktualizovány ve výchozím nastavení. Je to proto, že ve výchozím nastavení UpdateMode je vlastnost UpdatePanel nastavena na Always. Alternativně můžete vlastnost UpdateMode nastavit na Conditional, což znamená, že UpdatePanel se aktualizuje pouze v případě, že dojde k dosažení konkrétní aktivační události.

Poznámky k vlastnímu ovládacímu prvku

UpdatePanel lze přidat do libovolného uživatelského ovládacího prvku nebo vlastní ovládací prvek; Stránka, na které jsou tyto ovládací prvky zahrnuty však musí také obsahovat ScriptManager ovládací prvek s vlastností EnablePartialRendering nastavena na true.

Jedním ze způsobů, jak byste to mohli zohlednit při použití webových vlastních ovládacích prvků, je přepsat chráněnou CreateChildControls() metodu CompositeControl třídy. Tímto způsobem můžete vložit UpdatePanel mezi ovládacího prvku děti a vnější svět, pokud zjistíte, že stránka podporuje částečné vykreslování; jinak můžete podřízené ovládací prvky jednoduše vrstvit do instance kontejneru Control .

Důležité informace o updatePanel

UpdatePanel funguje jako něco jako černá skříňka, která ASP.NET postbacks v kontextu JavaScript XMLHttpRequest. Je však potřeba vzít v úvahu důležité aspekty výkonu, a to jak z hlediska chování, tak rychlosti. Chcete-li pochopit, jak UpdatePanel funguje, abyste se mohli nejlépe rozhodnout, kdy je jeho použití vhodné, měli byste prozkoumat ajax výměny. Následující příklad používá existující web a Mozilla Firefox s rozšířením Firebug (Firebug zachycuje data XMLHttpRequest).

Představte si formulář, který má mimo jiné textové pole PSČ, které má naplnit pole města a státu ve formuláři nebo ovládacím prvku. Tento formulář nakonec shromažďuje informace o členství, včetně jména, adresy a kontaktních údajů uživatele. Na základě požadavků konkrétního projektu je potřeba vzít v úvahu mnoho aspektů návrhu.

(Kliknutím zobrazíte obrázek v plné velikosti.)

(Kliknutím zobrazíte obrázek v plné velikosti.)

V původní iteraci této aplikace byl vytvořen ovládací prvek, který zahrnoval veškerá data registrace uživatele, včetně PSČ, města a státu. Celý ovládací prvek byl zabalen do ovládacího prvku UpdatePanel a přehozen do webového formuláře. Při zadání PSČ uživatelem updatePanel zjistí událost (odpovídající Událost TextChanged v back-endu, buď zadáním triggerů, nebo pomocí vlastnosti ChildrenAsTriggers nastavené na true). AJAX publikuje všechna pole v ovládacího panelu UpdatePanel, jak je zachytil FireBug (viz diagram vpravo).

Jak ukazuje snímek obrazovky, hodnoty z každého ovládacího prvku v rámci UpdatePanel jsou doručeny (v tomto případě jsou všechny prázdné), stejně jako ViewState pole. Vše řečeno, je odesláno více než 9 kB dat, ale ve skutečnosti bylo k provedení tohoto konkrétního požadavku potřeba pouze pět bajtů dat. Odpověď je ještě více nafouknutá: celkem je klientovi odesláno 57 kB jednoduše kvůli aktualizaci textového pole a rozevíracího pole.

Může být také zajímavé zjistit, jak ASP.NET AJAX aktualizuje prezentaci. Část odpovědi updatePanel žádosti o aktualizaci je zobrazena v zobrazení konzoly Firebug na levé straně; jedná se o speciálně formulovaný řetězec oddělený kanály, který je rozdělen klientským skriptem a poté znovu sestaven na stránce. Konkrétně ASP.NET AJAX nastaví vlastnost innerHTML elementu HTML na klientovi, který představuje váš UpdatePanel. Když prohlížeč znovu vygeneruje dom, dochází k mírnému zpoždění v závislosti na množství informací, které je potřeba zpracovat.

Regenerace model DOM vyvolá řadu dalších problémů:

(Kliknutím zobrazíte obrázek v plné velikosti.)

• Pokud je prvek HTML s fokusem uvnitř UpdatePanel, ztratí fokus. Takže pro uživatele, kteří stiskli klávesu Tab pro opuštění textového pole PSČ, by jejich dalším cílem bylo textové pole Město. Jakmile však UpdatePanel aktualizoval zobrazení, formulář by již neměl fokus a stisknutí klávesy Tab by začalo zvýrazňovat prvky fokusu (například odkazy).
• Pokud se používá jakýkoli typ vlastního skriptu na straně klienta, který přistupuje k prvkům dom, odkazy, které funkce zachovají, můžou po částečném zpětném odeslání vyřadit.

UpdatePanels nejsou určeny jako univerzální řešení. Místo toho poskytují rychlé řešení pro určité situace, včetně vytváření prototypů, malých aktualizací ovládacích prvků, a poskytují známé rozhraní pro ASP.NET vývojáře, kteří mohou být obeznámeni s objektovým modelem .NET, ale méně s modelem DOM. Existuje několik alternativ, které můžou v závislosti na scénáři aplikace vést k lepšímu výkonu:

• Zvažte použití PageMethods a JSON (JavaScript Object Notation), které vývojáři umožní vyvolat statické metody na stránce, jako by bylo vyvoláno volání webové služby. Vzhledem k tomu, že metody jsou statické, není nutné žádný stav; volající skriptu poskytne parametry a výsledek se vrátí asynchronně.
• Použití webové služby a FORMÁTU JSON zvažte, pokud je v aplikaci potřeba použít jeden ovládací prvek na několika místech. To opět vyžaduje velmi málo speciální práce a funguje asynchronně.

Začlenění funkcí prostřednictvím webových služeb nebo stránkových metod má také nevýhody. Především ASP.NET vývojáři obvykle zabudují malé součásti funkcí do uživatelských ovládacích prvků (soubory .ascx). Metody stránky nelze hostovat v těchto souborech; musí být hostovány ve skutečné třídě stránky .aspx. Webové služby musí být podobně hostované v rámci třídy .asmx. V závislosti na aplikaci může tato architektura porušit princip jednotné odpovědnosti v tom, že funkce jedné komponenty jsou nyní rozloženy mezi dvě nebo více fyzických komponent, které mohou mít málo nebo žádné soudržné vazby.

A konečně, pokud aplikace vyžaduje použití updatePanels, následující pokyny by měly pomoct s řešením potíží a údržbou.

• Vnořování objektů UpdatePanels je co nejmenší, a to nejen uvnitř jednotek, ale také napříč jednotkami kódu. Například UpdatePanel na stránce, která zabalí ovládací prvek, zatímco ovládací prvek obsahuje také UpdatePanel, který obsahuje jiný ovládací prvek, který obsahuje UpdatePanel, je vnořování mezi jednotkami. To pomáhá udržet jasné, které prvky by se měly aktualizovat, a zabraňuje neočekávaným aktualizacím podřízených prvků UpdatePanels.
• Ponechte vlastnost ChildrenAsTriggers nastavenou na false a explicitně nastavte aktivační události. <Triggers> Využití kolekce představuje mnohem jasnější způsob zpracování událostí, který může zabránit neočekávanému chování, což pomáhá s úlohami údržby a nutí vývojáře, aby se přihlásil k události.
• Pokud chcete dosáhnout funkčnosti, použijte nejmenší možnou jednotku. Jak je uvedeno v diskuzi o službě PSČ, zabalení pouze holého minima zkracuje čas na server, celkové zpracování a nároky výměny klient-server, což zvyšuje výkon.

Ovládací prvek UpdateProgress

Referenční dokumentace ovládacího prvku UpdateProgress

Markup-Enabled vlastnosti:

Název vlastnosti	Typ	Popis
AssociatedUpdate-PanelID	Řetězec	Určuje ID objektu UpdatePanel, který by měl tento UpdateProgress hlásit.
Zobrazit po	Int	Určuje časový limit v milisekundách před zobrazením tohoto ovládacího prvku po zahájení asynchronního požadavku.
DynamicLayout	bool	Určuje, zda se průběh vykresluje dynamicky.

Potomci značek:

Tag	Popis
<Progresstemplate>	Obsahuje šablonu ovládacího prvku nastavenou pro obsah, který se s tímto ovládacím prvek zobrazí.

Ovládací prvek UpdateProgress poskytuje míru zpětné vazby, která zajistí, aby uživatelé měli zájem a zároveň prováděli potřebné práce pro přenos na server. To může uživatelům pomoct zjistit, že něco děláte, i když to nemusí být zřejmé, zejména proto, že většina uživatelů je zvyklá na aktualizaci stránky a zobrazení zvýraznění stavového řádku.

Poznámka: Ovládací prvky UpdateProgress se můžou zobrazit kdekoli v hierarchii stránky. Nicméně v případech, kdy částečné postback je inicializován z podřízeného UpdatePanel (kde UpdatePanel je vnořen do jiného UpdatePanel), postbacks, které aktivují podřízený UpdatePanel způsobí UpdateProgress šablony být zobrazeny pro podřízený UpdatePanel stejně jako nadřazený UpdatePanel. Pokud je ale trigger přímým podřízeným objektem nadřazeného objektu UpdatePanel, zobrazí se pouze šablony UpdateProgress přidružené k nadřazené sadě.

Souhrn

Rozšíření Microsoft ASP.NET AJAX jsou sofistikované produkty navržené tak, aby usnadnily přístupnost webového obsahu a poskytovaly bohatší uživatelské prostředí webovým aplikacím. Jako součást ASP.NET ROZŠÍŘENÍ AJAX jsou některé z nejviditelnějších součástí sady nástrojů ovládací prvky vykreslování částečné stránky, včetně ovládacích prvků ScriptManager, UpdatePanel a UpdateProgress.

Komponenta ScriptManager integruje zřizování klientského JavaScriptu pro rozšíření a umožňuje, aby různé komponenty na straně serveru a klienta spolupracovaly s minimálními investicemi do vývoje.

Ovládací prvek UpdatePanel je zdánlivé magické pole – značky v rámci UpdatePanel mohou mít na straně serveru Codebehind a ne aktivovat aktualizaci stránky. Ovládací prvky UpdatePanel mohou být vnořené a mohou být závislé na ovládacích prvcích v jiných UpdatePanels. Ve výchozím nastavení, UpdatePanels zpracovávají všechny postbacky vyvolané jejich následnými ovládacími prvky, ačkoli tato funkce může být jemně vyladěna, buď deklarativně nebo programově.

Při použití ovládacího prvku UpdatePanel by si vývojáři měli být vědomi dopadu na výkon, který může potenciálně nastat. Mezi možné alternativy patří webové služby a stránkové metody, ale návrh aplikace by se měl zvážit.

Ovládací prvek UpdateProgress umožňuje uživateli vědět, že ona nebo oni nejsou ignorováni a že zákulisní požadavek probíhá, zatímco stránka jinak nedělá nic, aby reagovala na vstup uživatele. Zahrnuje také možnost přerušit částečné výsledky vykreslování.

Tyto nástroje společně pomáhají vytvářet bohaté a bezproblémové uživatelské prostředí tím, že uživatelům zpřesní práci serveru a méně ruší pracovní postupy.

Životopis

Scott Cate pracuje s webovými technologiemi Microsoftu od roku 1997 a je prezidentem myKB.com (www.myKB.com), kde se specializuje na psaní ASP.NET aplikací zaměřených na softwarová řešení znalostní báze Knowledge Base. Scotta můžete kontaktovat prostřednictvím e-mailu nebo scott.cate@myKB.com jeho blogu na ScottCate.com

Další