Vous êtes sur la page 1sur 20

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX.

par Scott Cate (Traduction par Rmy Mainil)

La fonctionnalit la plus spectaculaire des extensions ASP.NET AJAX est probablement la possibilit d'effectuer un rafraichissement partiel ou incrmental d'une page sans effectuer un postback complet vers le serveur, sans changement de code et avec peu de changements de balises. Les avantages sont nombreux : l'tat de vos objets multimdias (tels que Adobe Flash ou Windows Media) est inchang, les cots de bande passante sont rduits et le client ne subit pas le clignotement habituellement associ au postback.

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Traduction.....................................................................................................................................................................3 1 - Introduction.............................................................................................................................................................4 2 - Rafraichissement partiel d'une page..................................................................................................................... 5 3 - Mode d'emploi : Intgrer le rafraichissement partiel dans un projet existant.........................................................6 4 - Le contrle ScriptManager...................................................................................................................................10 4.1 - Rfrences du contrle ScriptManager....................................................................................................... 10 4.2 - Fournir des scripts alternatifs et / ou supplmentaires................................................................................12 4.3 - Gestion d'erreurs personnalise pour les UpdatePanels............................................................................ 12 4.4 - Support de l'Internationalisation et de la Localisation................................................................................. 12 6 - Le contrle UpdatePanel..................................................................................................................................... 13 6.1 - Rfrences du contrle UpdatePanel......................................................................................................... 13 6.2 - Note pour les contrles personnaliss........................................................................................................ 14 6.3 - Considrations sur l'UpdatePanel............................................................................................................... 14 7 - Le contrle UpdateProgress................................................................................................................................ 18 7.1 - Rfrences du contrle UpdateProgress.................................................................................................... 18 8 - Rsum................................................................................................................................................................ 19 Biographie.................................................................................................................................................................. 20

-2Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Traduction
Cet article est la traduction la plus fidle possible de l'article original : with ASP.NET AJAX Understanding Partial Page Updates

-3Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

1 - Introduction
La technologie ASP.NET de Microsoft apporte un modle de programmation orient-objet et ax sur les vnements, coupl au bnfice du code compil. Cependant, son modle de traitement ct serveur souffre de quelques inconvnients inhrents la technologie : Actualiser une page ncessite un aller-retour vers le serveur, ce qui ncessite un rafraichissement de la page Les aller-retour serveurs ne maintiennent pas les modifications apportes par le JavaScript ou toute autre technologie "ct-client" (telle que Adobe Flash) et, mme dans Internet Explorer, il y a toujours un clignotement lorsque la page est actualise. Les postbacks entranent une consommation gourmande de la bande passante au fur et mesure que le __VIEWSTATE grandit, spcialement lorsqu'on travaille avec des contrles tels que la GridView ou les Repeaters. Il n'y a pas de modle unifi pour utiliser des Web Services via JavaScript ou une autre technologie "ctclient"

Voyons maintenant du ct de Microsoft ASP.NET AJAX. AJAX, qui signifie Asynchronous JavaScript And XML, est un Framework intgr permettant des actualisations progressives des pages via du JavaScript multiplateformes, compos de code ct serveur comprenant le Framework AJAX, ainsi que d'un script qui constitue la librairie Microsoft AJAX Script. Les extensions ASP.NET AJAX fournissent galement une mthode, multiplateformes, d'accs des services Web ASP.NET via JavaScript. Cet article explique la fonctionnalit de rafraichissement partiel des extensions ASP.NET AJAX, ce qui inclus le composant ScriptManager, les contrles UpdatePanel et UpdateProgress, et explore diffrents scnarios dans lesquels ils devraient, ou non, tre utiliss. Cet article (NdT : au moment de sa rdaction) est bas sur la version Beta 2 de Visual Studio 2008 et sur le Framework .NET 3.5, qui intgre les extensions ASP.NET AJAX dans les classes de base (l o elles taient prcdemment disponibles sous forme d'add-on pour ASP.NET 2.0). Cet article prsume galement que vous utilisez Visual Studio 2008 et non Visual Web Developer Express Edition; certains modles de projet qui sont rfrencs ne sont ventuellement pas disponibles pour les utilisateurs de Visual Web Developer Express.

-4Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

2 - Rafraichissement partiel d'une page


La fonctionnalit la plus spectaculaire des extensions ASP.NET AJAX est probablement la possibilit d'effectuer un rafraichissement partiel ou incrmental d'une page sans effectuer un postback complet vers le serveur, sans changement de code et avec peu de changements de balises. Les avantages sont nombreux : l'tat de vos objets multimdias (tels que Adobe Flash ou Windows Media) est inchang, les cots de bande passante sont rduits et le client ne subit pas le clignotement habituellement associ au postback. Peu de changements sont ncessaires dans votre projet pour y intgrer le rafraichissement partiel des pages, cette technologie s'intgrant dans ASP.NET.

-5Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

3 - Mode d'emploi : Intgrer le rafraichissement partiel dans un projet existant


1) Dans Microsoft Visual Studio 2008, crez un nouveau Site Web ASP.NET en allant dans le menu Fichier -> Nouveau -> Site Web et en choisissant Site Web ASP.NET. Vous pouvez le nommer comme bon vous semble et vous pouvez l'installer soit dans le systme de fichiers soit dans Internet Information Services (IIS). 2) Vous vous retrouverez devant la classique page par dfaut avec les balises ASP.NET standard (un form avec runat="server" et la directive @Page). Dposez-y un label appel Label1 et un bouton appel Button1 entre les balises du formulaire. Vous pouvez attribuer ce que vous voulez leur proprit Text. 3) Dans la vue Design, double-cliquez sur le contrle Button1 pour gnrer le gestionnaire d'vnement ct code. Dans ce gestionnaire d'vnement, changez la proprit Text de Label1 en "Vous avez cliqu sur le bouton !". Listing 1: Contenu de default.aspx avant que le rafraichissement partiel ne soit mis en place
<%@ 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-transitiona <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </div> </form> </body> </html>

Listing 2: Codebehind (allg) de default.aspx.cs


public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Vous avez cliqu sur le bouton !"; } }

4) Appuyez sur F5 pour lancer le site web. Visual Studio vous proposera de modifier le fichier web.config pour activer le dbogage; faites-le. Quand vous cliquez sur le bouton, un rafraichissement de la page survient pour changer le contenu du label et il y a un lger scintillement lorsque la page est redessine. 5) Aprs avoir ferm la fentre de votre navigateur, retournez dans Visual Studio, sur l'affichage des balises de la page. Cherchez dans la bote outils de Visual Studio et trouvez la section "Extensions AJAX". (Si vous n'avez pas cette section du fait que vous utilisez une ancienne version des extensions AJAX ou Atlas, rfrez-vous au mode d'emploi pour enregistrer la section des Extensions AJAX dans la bote outils, plus loin dans cet article, ou installez la version actuelle avec l'installeur tlchargeable depuis le site http:// www.asp.net/ajax/

-6Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

a. Problme connu : Si vous installez Visual Studio 2008 Beta 2 sur un ordinateur o Visual Studio 2005 est dj install avec les extensions AJAX pour ASP.NET 2.0, Visual Studio 2008 va importer les lments de la section "Extensions AJAX" dans la bote outils. Vous pouvez dterminer si tel est le cas en examinant l'info bulle au survol des composants; ils devraient indiquer "Version 3.5.0.0". S'ils indiquent "Version 2.0.0.0", alors vous avez import les anciens lments de la bote outils et vous devrez importer les bons manuellement en choisissant "Choisir les lments" (NdT : via clic droit dans la bote outils) dans Visual Studio. Il ne vous sera pas possible d'ajouter les contrles en version 2 via le designer. 6) Avant la balise ouvrante <asp:Label>, ajoutez une ligne blanche puis double-cliquez sur le contrle "UpdatePanel" dans la bote outils. Notez qu'une nouvelle directive @Register est inclue en dbut de page, indiquant que les contrles dans l'espace de noms System.Web.UI doivent tre insrs en utilisant le prfixe asp: 7) Dplacez la balise fermante </asp:UpdatePanel> aprs la balise fermante de l'lment Button de telle faon que l'lment soit bien form et qu'il comprenne le Label et le Bouton. 8) Aprs la balise ouvrante <asp:UpdatePanel>, ouvrez une nouvelle balise. Notez que l'IntelliSense vous propose 2 options. Dans ce cas, crez une balise ContentTemplate. Soyez sur que ces balises englobent le Label et le Bouton de faon ce que la balise soit bien forme.

9) N'importe o dans l'lment <form>, insrez un contrle ScriptManager en double cliquant sur l'lment ScriptManager dans la bote outils. 10) Editez la balise <asp:ScriptManager> de faon y prciser l'attribut EnablePartialRendering="true" Listing 3: Dtail des balises pour default.aspx avec le rafraichissement partiel activ
<%@ 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-transitiona <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> -7Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Listing 3: Dtail des balises pour default.aspx avec le rafraichissement partiel activ

</asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

11) Ouvrez votre web.config. Notez que Visual Studio a automatiquement ajout une srie de rfrences vers System.Web.Extensions.dll a. Ce qu'il y a de nouveau dans Visual Studio 2008 : Le fichier web.config ajout avec un projet de site web ASP.NET inclus automatiquement toutes les rfrences ncessaires vers les extensions AJAX ASP.NET, et inclus des sections de configuration commentes qui peuvent tre dcomentes pour activer des fonctionnalits supplmentaires. Visual Studio 2005 dispose du mme modle de projet une fois les extensions AJAX pour ASP.NET 2.0 installes. Cependant, dans Visual Studio 2008, les extensions AJAX sont opt-out par dfaut (ce qui signifie qu'elles sont rfrences par dfaut mais peuvent tre retires comme rfrences).

12) Appuyez sur F5 pour lancer le site web. Notez qu'aucune modification du code source de la page n'a t ncessaire pour activer le rafraichissement partiel. Seules les balises ont t modifies.

Quand vous lancez le site web, vous devriez remarquer que le rafraichissement partiel est maintenant activ, parce que quand vous cliquez sur le bouton il n'y a plus de clignotement ni de changement de position dans le dfilement de la page (bien que non visible dans l'exemple actuel). Si vous regardez le code source de la page affiche aprs
-8Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

avoir cliqu sur le bouton, cela confirmera qu'aucun postback n'a eu lieu - le texte original du label fait toujours partie de la source, et le label a t modifi via JavaScript. Visual Studio 2008 Beta 2 ne semble pas venir avec un modle prdfini de site web ASP.NET avec AJAX activ. Cependant, un tel modle tait disponible dans Visual Studio 2005 si les Extensions AJAX d'ASP.NET 2.0 pour Visual Studio 2005 taient installes. En consquence, configurer un site web et dmarrer avec le modle de site web avec AJAX activ sera probablement encore plus facile, car le modle comprend un fichier web.config entirement configur (supportant toutes les Extensions AJAX pour ASP.NET, incluant l'accs aux Services WEB et la srialisation JSON - JavaScript Object Notation) et inclus un UpdatePanel et un ContentTemplate dans le Form de la page principale par dfaut. Activer le rafraichissement partiel pour cette page par dfaut est aussi simple que r excuter le point 10 de cet article et de dposer le contrle sur la page.

-9Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

4 - Le contrle ScriptManager 4.1 - Rfrences du contrle ScriptManager


Proprits accessibles depuis la balise : Nom AllowCustomErrors-Redirect Bool Type Description Dtermine s'il faut ou non utiliser la section des erreurs personnalises du web.config pour la gestion des erreurs Obtient ou dfinit le message d'erreur envoy au client si une erreur survient. Obtient ou dfinit le dlai d'attente client maximum pour qu'une requte asynchrone se termine. Obtient ou dfinit si l'internationalisation du script est active. Obtient ou dfinit si la localisation du script est active. Obtient ou dfinit le temps maximum impartit (en secondes) pour le chargement des scripts ct client. Obtient ou dfinit le mode de rendu des scripts. Obtient ou dfinit l'emplacement o sont stocks les fichiers de script envoyer au client.

AsyncPostBackErrorMessage AsyncPostBack-Timeout

String Int32

EnableScript-Globalization EnableScript-Localization ScriptLoadTimeout

Bool Bool Int32

ScriptMode ScriptPath

Enum (Auto, Debug, Release, Inherit) String

Proprits accessibles par code uniquement : Nom AuthenticationService Type AuthenticationServiceManager Bool Description Obtient l'objet AuthenticationServiceManager associ l'instance du ScriptManager en cours. Obtient une valeur qui indique si les versions debug de bibliothques de scripts clients seront restitues. Obtient une valeur qui indique si le postback en

IsDebuggingEnabled

IsInAsyncPostback

Bool

- 10 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

ProfileService Scripts

Services

SupportsPartialRendering

cours est excute en mode de rendu partiel. ProfileService-Manager Obtient l'objet ProfileServiceManager associ l'instance du ScriptManager en cours. Collection<Script-Reference> Obtient un objet ScriptReferenceCollection qui contient les objets ScriptReference, chacun reprsentant un fichier de script restitu au client. Collection<ServiceObtient un objet Reference> ServiceReferenceCollection qui contient un objet ServiceReference pour chaque service Web qu'ASP.NET expose sur le client pour les fonctionnalits AJAX. Bool Obtient une valeur qui indique si le client prend en charge le rendu de page partiel. Si la proprit renvoie false, alors toutes les requtes seront des postbacks standards.

Mthode publique : Nom SetFocus(string) Type Description Attribue le focus au contrle prcis lorsque la requte est termine.

Void

Balises enfants : Tag <AuthenticationService> <ProfileService> <Scripts> <asp:ScriptReference> <Service> <asp:ServiceReference> Description Fournit des dtails propos du proxy vers le service d'authentification d'ASP.NET. Fournit des dtails propos du proxy vers le service de profilage d'ASP.NET. Fournit des rfrences vers des scripts additionnels. Dcrit une rfrence un script Fournit des rfrences supplmentaires vers des Services Web pour lesquels un proxy sera gnr. Dcrit une rfrence un service Web

Le contrle ScriptManager est le cur des extensions ASP.NET AJAX. Il fournit l'accs la bibliothque des scripts, le support du rafraichissement partiel et fournit un support complet pour des services ASP.NET supplmentaires (tels que l'authentification et le profilage, mais galement d'autres Services Web). Le contrle ScriptManager fournit galement le support de l'internationalisation et localisation pour les scripts clients.

- 11 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

4.2 - Fournir des scripts alternatifs et / ou supplmentaires


Alors que les Extensions AJAX pour ASP.NET 2.0 comprennent l'intgralit du code du script, tant en mode debug que production, comme ressources incorpores dans les assemblies rfrences, les dveloppeurs sont libres de rediriger le ScriptManager vers des scripts personnaliss ou encore d'ajouter des scripts supplmentaires ncessaires. Pour craser le lien par dfaut vers les scripts habituellement inclus (tels que ceux qui supportent l'espace de noms Sys.WebForms et le systme de typage personnalis), vous devez vous abonner l'vnement ResolveScriptReference de la classe ScriptManager. Quand cette mthode est invoque, le gestionnaire d'vnements l'opportunit de changer le chemin vers les scripts en question; le ScriptManager enverra alors une version diffrente ou modifie des scripts au client. De plus, les rfrences aux scripts (reprsentes par la classe ScriptReference) peuvent tre ajoutes via le code ou la balise. Pour faire cela, modifiez soit par code la collection ScriptManager.Scripts, ou ajoutez un tag <asp:ScriptReference> en dessous du tag <Scripts> qui est un enfant direct du contrle ScriptManager.

4.3 - Gestion d'erreurs personnalise pour les UpdatePanels


Mme si les rafraichissements sont grs travers des dclencheurs dfinis par des UpdatePanels, la gestion des erreurs et des messages d'erreur personnaliss s'effectue via l'instance du contrle ScriptManager de la page. Cela s'effectue en exposant un vnement, AsyncPostBackError, laquelle on peut abonner la page pour fournir une gestion d'erreurs personnalise. En consommant l'vnement AsyncPostBackError, vous pouvez prciser la proprit AsyncPostBackErrorMessage, ce qui provoquera l'apparition d'une bote d'alerte la fin du callback. La personnalisation ct client est galement possible plutt que d'utiliser la boite d'alerte par dfaut. Vous pourriez, par exemple, afficher une <div> personnalise plutt que la bote de dialogue par dfaut. Dans ce cas, vous pouvez grer l'erreur dans un script client :
<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{ // Le serveur n'tait pas le problme errorMessage = "Une erreur inconnue est survenue..."; } // Faites ce que vous voulez avec le message d'erreur ici. // Maintenant, il faut signaler qu'on a gr l'erreur. args.set_errorHandled(true); } } // --> </script>

De faon trs simple, le script ci-dessus dfinit une fonction de rappel (callback), via le noyau AJAX ct client, pour lorsque la requte asynchrone sera termine. Il vrifie ensuite si un message d'erreur a t rapport, et si c'est le cas, le traite pour finalement indiquer au noyau que l'erreur a t gre dans un script personnalis.

4.4 - Support de l'Internationalisation et de la Localisation


Le contrle ScriptManager fournit un support tendu pour la localisation des chanes des scripts et les composants de l'interface utilisateur; cependant, ce sujet dpasse le cadre de cet article. Pour en savoir plus, lisez l'article Comprendre l'internationalisation avec ASP.NET AJAX.

- 12 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

6 - Le contrle UpdatePanel 6.1 - Rfrences du contrle UpdatePanel


Proprits accessibles depuis la balise : Nom ChildrenAsTriggers Type Description Prcise si les contrles enfants provoquent automatiquement un rafraichissement lorsqu'ils dclenchent un postback. Prcise la faon dont le contenu sera prsent (dans un <div> ou dans un <span> Prcise si l'UpdatePanel est actualis chaque rafraichissement partiel ou uniquement si un dclencheur est activ.

bool

RenderMode UpdateMode

enum (Block, Inline) enum (Always, Conditional)

Proprits accessibles par code uniquement : Nom IsInPartialRendering Type Description Obtient une valeur qui indique si le contrle UpdatePanel est mis jour par suite d'une publication asynchrone. Obtient ou dfinit le modle qui dfinit le contenu du contrle UpdatePanel. Obtient un objet de contrle auquel vous pouvez ajouter des contrles enfants par programme. Obtient un objet UpdatePanelTriggerCollection qui contient des objets AsyncPostBackTrigger et PostBackTrigger enregistrs de manire dclarative pour le contrle UpdatePanel.

bool

ContentTemplate ContentTemplateContainer

ITemplate Control

Triggers

UpdatePanelTriggerCollection

Mthode publique : Nom Type Description Entrane une mise jour du contenu d'un contrle UpdatePanel.

Update()

vois

Balises enfants :

- 13 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

<ContentTemplate> <Triggers>

Tag

<asp:AsyncPostBackTrigger>

<asp:PostBackTrigger>

Description Prcise les balises qui serviront l'affichage du rsultat du rafraichissement partiel. Enfant de <asp:UpdatePanel>. Dfinit une collection de contrles associs au rafraichissement de l'UpdatePanel. Enfant de <asp:UpdatePanel>. Dfinit un dclencheur qui invoque en rafraichissement partiel de la page pour l'UpdatePanel concern. Il peut s'agir ou non d'un contrle descendant de l'UpdatePanel en question. Se rapporte un nom d'vnement. Enfant de <Triggers> Dfinit un contrle qui dclenche un rafraichissement complet de la page. Il peut s'agir ou non d'un contrle descendant de l'UpdatePanel en question. Se rapporte l'objet. Enfant de >Triggers<.

Le contrle UpdatePanel est le contrle qui dlimite le contenu ct serveur qui prendra part dans la fonctionnalit de rafraichissement partiel des extensions AJAX. Il n'y a pas de restriction quant au nombre de contrles UpdatePanel qui peut tre plac sur une page, et ils peuvent tre imbriqus. Chaque UpdatePanel est isol de faon ce que chacun travaille indpendamment (vous pouvez avoir deux UpdatePanels qui s'excutent en mme temps, actualisant deux parties diffrentes de la page, indpendamment du postback de la page). Le contrle UpdatePanel travaille principalement avec des dclencheurs - par dfaut, n'importe quel contrle contenu dans le ContentTemplate d'un UpdatePanel qui provoque un postback est enregistr comme dclencheur pour l'UpdatePanel concern. Cela signifie que l'UpdatePanel est capable de fonctionner avec les contrles liaison de donnes (tel que le contrle GridView), avec les contrles utilisateurs, et ils peuvent tre programms dans le script. Par dfaut, quand un rafraichissement partiel est dclench, tous les UpdatePanels de la page seront actualiss, qu'ils aient, ou non, dfinit un dclencheur pour une telle action. Par exemple, si un UpdatePanel contient un Bouton, et que le Bouton est cliqu, tous les UpdatePanels de la page seront actualiss par dfaut. Cela est du au fait que, par dfaut, la proprit UpdateMode d'un UpdatePanel est dfinie Always. Alternativement, vous pouvez dfinir cette proprit Conditional, ce qui signifie que l'UpdatePanel ne sera actualis que si un dclencheur spcifique est activ.

6.2 - Note pour les contrles personnaliss


Un UpdatePanel peut tre ajout n'importe quel contrle utilisateur ou contrle personnalis; cependant, la page sur laquelle ces contrles sont inclus doit galement comprendre un contrle ScriptManager pour lequel la proprit EnablePartialRendering est dfinie true. Une mthode pour vous affranchir de ce problme lorsque vous utilisez des contrles Web personnaliss et de surcharger la mthode protected CreateChildControls() de la classe CompositeControl. En procdant de la sorte, vous pouvez injecter un UpdatePanel entre les enfants du contrle et le reste si vous dterminez que la page supporte le rafraichissement partiel; autrement, vous pouvez simplement placer les contrles enfants dans une instance de contrle conteneur.

6.3 - Considrations sur l'UpdatePanel


Le fonctionnement du contrle UpdatePanel ressemble celui d'une bote noire, encapsulant les postbacks ASP.NET dans le contexte de l'objet JavaScript XMLHttpRequest. Cependant, il y a un impact significatif des performances prendre en compte, tant en terme de comportement que de vitesse. Pour comprendre comment l'UpdatePanel fonctionne, de faon pouvoir dcider quand son utilisation est perspicace, vous devriez examiner les changes AJAX. L'exemple suivant repose sur un site existant et Mozilla Firefox avec l'extension Firebug (Firebug permet d'observer les donnes de l'objet XMLHttpRequest). Imaginez un formulaire qui, entre autres choses, contient un contrle textbox pour saisir un code postal. Ce contrle tant suppos remplir les champs ville et pays du formulaire. Ce formulaire collecte finalement des informations

- 14 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

d'identification telles qu'un nom d'utilisateur, une adresse et des informations de contact. Il y a de nombreuses exigences de conception prendre en compte, bases sur des pr-requis du projet concern.

Lors du premier chargement de cette application, un contrle est cr qui contient l'entiret des informations d'identification de l'utilisateur, y compris le code postal, la ville et le pays. Le contrle entier a t inclus dans un UpdatePanel et plac dans un Web Form. Lorsque le code postal est saisi par l'utilisateur, l'UpdatePanel dtecte l'vnement (l'vnement TextChanged en l'occurrence, soit en spcifiant un dclencheur ou en dfinissant la proprit ChildrenAsTriggers true. Ajax envoie tous les champs contenus dans l'UpdatePanel, comme montr dans la capture de FireBug (voir le diagramme sur la droite). Comme illustr sur la capture d'cran, les valeurs de tous les contrles contenus dans l'UpdatePanel sont transmises (dans ce cas, elles sont toutes vides), ainsi que le ViewState. Tout compris, c'est environ 9kb de donnes qui sont envoys l o seulement 5 bytes taient ncessaires pour effectuer cette requte. La rponse est encore plus tonnante : 57kb sont envoys au client pour simplement actualiser la valeur d'un champ texte et d'une liste droulante. Il est galement intressant de voir comment ASP.NET AJAX actualise la prsentation des contrles. La portion de rponse la requte d'actualisation de l'UpdatePanel est montre dans la console d'affichage de FireBug, sur la gauche; il s'agit d'une chane formate, dlimite qui est analyse par le script client et ensuite rassemble sur la page. Plus prcisment, ASP.NET AJAX dfinit la proprit innerHTML de l'lment HTML qui reprsente l'UpdatePanel ct client. Pendant que le navigateur rgnre le DOM, il peut survenir un certain dlai, dont la dure dpend de la quantit d'information qui doit tre traite. La rgnration du DOM dclenche un certain nombre de problmes supplmentaires :

- 15 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Si l'lment HTML qui a le focus se trouve dans l'UpdatePanel, il perdra le focus. Ainsi, pour les utilisateurs qui ont appuy sur la touche Tab pour quitter la zone de saisie du code postal, leur prochaine destination aurait du tre la zone de saisie de la Ville. Cependant, une fois que l'UpdatePanel actualise son contenu, le formulaire qu'il contient perd le focus, et appuyer sur la touche Tab donnera le focus au premier lment non contenu dans l'UpdatePanel. Si un script client personnalis est en train d'utiliser des lments du DOM, les rfrences ventuellement maintenues dans des fonctions risquent de devenir invalides lors de postback partiel.

Les UpdatePanels ne sont pas destins tre des "solutions miracles". Au contraire, ils fournissent une solution rapide certaines situations, telles que du prototypage, des mises jour de petits contrles, et fournir une interface familire aux dveloppeurs ASP.NET qui sont peut-tre familiers avec le model objet .NET mais moins l'aise avec le DOM. Il existe de nombreuses alternatives qui peuvent donner de meilleures performances, selon le scnario de l'application : Utiliser les Mthodes de Page et JSON (JavaScript Object Notation) permet au dveloppeur d'invoquer une mthode statique d'une page comme s'il s'agissait d'un appel un service Web. Comme les mthodes sont statiques, aucun tat n'est ncessaire; le script appelant fournit les paramtres et le rsultat est retourn de faon asynchrone. Pensez utiliser un service Web et JSON si vous avez un contrle qui doit tre utilis plusieurs endroits de votre application. De nouveau, cela ncessite peu de travail et fonctionne de faon asynchrone.

Ajouter des fonctionnalits travers un Service Web ou des mthodes de page a galement des inconvnients. D'abord et avant tout, les dveloppeurs ASP.NET tendent habituellement crer des petits composants regroupant certaines fonctionnalits au sein de contrles utilisateurs (fichiers .ascx). Les mthodes de Page ne peuvent pas tre intgres ces contrles; elles doivent tre intgres directement dans le code-behind de la page .aspx. Les services Web, quant eux, doivent tre compris dans des fichiers .asmx. En fonction de l'application, cette architecture peut ne pas respecter le principe de responsabilit unique en ce sens que la fonctionnalit d'un composant unique est maintenant rpartie travers plusieurs composants physiques qui peuvent avoir peu de cohsion entre eux. Pour finir, si une application ncessite d'utiliser des UpdatePanels, les rgles suivantes devraient vous aider grer les problmes et la maintenance. Evitez autant que possible d'emboter les UpdatePanels, pas seulement au sein du mme composant, mais galement travers diffrents composants. Par exemple, un contrle sur une page qui contient lui-mme un contrle contenant un UpdatePanel dans lequel se trouve galement un contrle contenant un UpdatePanel est de l'embotement inter composants. Procder sans embotement permet de savoir facilement quel lment va tre rafraichi et vite des actualisations involontaires d'UpdatePanels enfants. Maintenez la proprit ChilrdrenAsTriggers false et dfinissez explicitement les vnements dclencheurs. Utiliser la collection <Triggers> est la mthode la plus propre pour grer les vnements et peut viter des comportements inattendus, facilitant la maintenance du composant et forant les dveloppeurs effectuer des opt-in pour les vnements.

- 16 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Utilisez le composant le plus petit possible pour implmenter une fonctionnalit. Comme soulign dans la discussion sur le service du code postal, encapsuler le strict minimum rduit la charge sur le serveur, le temps de traitement, la taille des informations ncessaires aux changes client-serveur, ce qui amliore grandement les performances.

- 17 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

7 - Le contrle UpdateProgress 7.1 - Rfrences du contrle UpdateProgress


Proprits accessibles depuis la balise : Nom AssociatedUpdate-PanelID DisplayAfter Type Description Dfinit l'ID de l'UpdatePanel auquel cet UpdateProgress doit se rfrer. Dfinit le dlai en millisecondes qui spare le dbut de la requte asynchrone de l'affichage de l'UpdateProgress. Dfinit si le modle de progression est restitu dynamiquement.

String Int

DynamicLayout

Bool

Balise enfant : Tag <ProgressTemplate> Description Obtient ou dfinit le modle qui dfinit le contenu du contrle.

Le contrle UpdateProgress fournit un moyen de tenir l'utilisateur inform de la progression du traitement pendant le temps ncessaire la requte. Cela permet de faire savoir vos utilisateurs que vous tes en train d'effectuer un traitement mme si cela n'est pas apparent et cela est d'autant plus important que de plus en plus d'entre eux sont habitus la barre de progression dans la barre de statut du navigateur ainsi qu'au bouton "actualiser". Il est intressant de noter que le contrle UpdateProgress peut apparatre n'importe o dans la hirarchie de la page. Cependant, au cas o le postback partiel serait provoqu par un UpdatePanel enfant (un UpdatePanel luimme compris dans un autre UpdatePanel), le postback dclench par l'UpdatePanel enfant provoquera l'affichage de l'UpdateProgress pour son UpdatePanel mais galement pour celui du parent. Par contre, si le dclencheur est un enfant direct de l'UpdatePanel parent, seul l'UpdateProgress qui lui est associ sera affich.

- 18 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

8 - Rsum
Les extensions Microsoft ASP.NET AJAX sont des lments sophistiqus destins aider rendre le contenu de votre site web plus accessible et fournir vos utilisateurs une exprience utilisateur plus riche. Inclus dans les extensions AJAX pour ASP.NET, les contrles de restitution partielle, comprenant le ScriptManager, l'UpdatePanel et l'UpdateProgress, constituent la partie la plus visible du toolkit. Le composant ScriptManager fournit la collection des scripts JavaScript ct client et permet le fonctionnement des diffrents composants, ct client comme ct serveur, avec un minimum de dveloppement. Le contrle UpdatePanel est la "bote magique" visuelle - les balises places l'intrieur peuvent avoir du code ct serveur et ne pas dclencher de rafraichissement de la page. Les contrles UpdatePanel peuvent tre imbriqus et peuvent dpendre de contrles placs dans d'autres UpdatePanels. Par dfaut, les UpdatePanels grent tous les postbacks provoqus par leurs contrles enfants, mme si cette fonctionnalit peut-tre configure plus prcisment, tant de faon dclarative que via le code. Lorsqu'ils utilisent le contrle UpdatePanel, les dveloppeurs doivent tre conscients de l'impact sur les performances qu'ils peuvent avoir. Les alternatives ventuelles comprennent les services Web et les mthodes de page, bien que leur utilisation potentielle dpend de la conception de l'application. Le contrle UpdateProgress permet l'utilisateur de savoir qu'il ou elle n'est pas ignor, et que la requte en arrire plan se poursuit pendant que la page ne donne aucun retour son action. Il offre galement la possibilit d'annuler un rafraichissement partiel en cours. Utiliss conjointement, ces outils aident crer une exprience utilisateur riche et sans accros en faisant travailler le serveur de faon plus transparente pour l'utilisateur et en interrompant moins l'enchanement des actions.

- 19 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/

Comprendre le rafraichissement partiel d'une page avec ASP.NET AJAX. par Scott Cate (Traduction par Rmy Mainil)

Biographie
Scott Cate travaille avec les technologies Microsoft Web depuis 1997 et est le prsident de myKB.com (www.myKb.com) o il s'est spcialis dans l'criture d'applications bases sur ASP.NET et orientes vers la gestion informatique des Bases de Connaissances. Scott peut-tre contact via email scott.cate@myKb.com ou via son blog : http://weblogs.asp.net/scottcate.

- 20 Copyright 2009 - Equipe Dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/ajax/ajax-partial-update/