Les Bases Fondamentales de Microsoft ASP - Net Ajax

Lesbasesfondamentales deMicrosoft ASP.
NETAjax
Version1.0

JamesRAVAILLE
http://blogs.dotnetfrance.com/jamesr
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009
Sommaire
1 Introduction.....................................................................................................................................4 1.1 1.2 1.3 2 Prsentation............................................................................................................................ 4 RappelssurlatechnologieASP.NET....................................................................................... 4 Utilit.......................................................................................................................................4
LesbasesfondamentalesdASP.NETAjax...................................................................................... 5 2.1 2.2 2.3 Echangesclient/serveuravecASP.NET(classiques).........................................................5 Echangesclient/serveuravecASP.NETAjax........................................................................... 5 Formatdchangededonnes................................................................................................ 6
PrsentationdASP.NETAjax.......................................................................................................... 7 3.1 3.2 3.3 Vuedensemble....................................................................................................................... 7 MicrosoftASP.NETAjax:ctserveur................................................................................... 7 MicrosoftASP.NETAjax:ctclient...................................................................................... 7
MicrosoftAjaxLibrary:lesextensionsJavaScript........................................................................... 9 4.1 4.2 4.3 4.4 4.5 Prsentation............................................................................................................................ 9 Lestypesdehautniveau......................................................................................................... 9 Lalias$get............................................................................................................................. 10 Lesextensionsorientesobjet.............................................................................................. 10 Exemplesdutilisationdecesextensions.............................................................................. 10 Exempledecrationduneclasse................................................................................. 10
4.5.1 5 6
MicrosoftAjaxLibrary:lesclassesdunoyau................................................................................ 12 LesextensionsduFrameworkASP.NETAjax................................................................................ 13 6.1 6.2 LesextensionsduFrameworkASP.NETAjax........................................................................ 13 LescontrlesScriptManageretScriptManagerProxy...........................................................13 LecontrleScriptManager............................................................................................ 13 LecontrleScriptManagerProxy................................................................................... 15
6.2.1 6.2.2 6.3
LecontrleUpdatePanel....................................................................................................... 16 Prsentation.................................................................................................................. 16 Proprits...................................................................................................................... 16 Miseenuvre ............................................................................................................... 17
6.3.1 6.3.2 6.3.3 6.4
LecontrleUpdateProgress.................................................................................................. 21 Prsentation.................................................................................................................. 21 DotnetFranceAssociationJamesRAVAILLE
6.4.1
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009 6.4.2 6.4.3 6.4.4 6.4.5 6.5 Proprits...................................................................................................................... 21 AssociationduncontrleUpdateProgressunouplusieurscontrlesUpdatePanel .22 Dfinitionducontenu .................................................................................................... 22 Miseenuvre ............................................................................................................... 22
LecontrleTimer.................................................................................................................. 23 Prsentation.................................................................................................................. 23 Proprits...................................................................................................................... 23 LvnementTick ........................................................................................................... 23 Miseenuvre ............................................................................................................... 24
6.5.1 6.5.2 6.5.3 6.5.4 7
Conclusion.....................................................................................................................................25
DotnetFranceAssociationJamesRAVAILLE
1 Introduction
1.1 Prsentation
Ce chapitre sadresse des personnes, matrisant la conception et le dveloppement dapplications Web, avec la technologie ASP .NET. Aussi, il met laccent sur le Framework Ajax ct serveur.Lectclientseraaborddansunautrechapitre.
1.2 RappelssurlatechnologieASP.NET
La technologie ASP .NET est une technologie propose par Microsoft, permettant de dvelopper des applications Web. En 2005, Microsoft a propos la technologie ASP .NET 2.0, qui a apportdimportantesavancesparrapportauxversionsprcdentes: DanslaconceptiondesprojetsWeb:crationduneapplicationWeboudunsiteWeb Dans le dveloppement: les pages matres, gestion de ltat des donnes, propositions de services dapplication (gestion de la scurit, de la navigation, des dpendances de cache verslesbasesdedonnes,degestiondesprofilsutilisateurs). DenouveauxcontrlesASP.NET. Dans le dploiementvia Visual Studio : copie et synchronisation via loutil de copie de sites Web, et la publication avec la possibilit de compiler partiellement ou quasicompltement lessourcesdelapplication
Cependant, dimportants flux de donnes naviguent entre les serveurs et les clients Web, et les performances ct client restent limites (nativement, pas denvoi de requte HTTP en mode asynchrone), et la conception de contrles utilisateurs sophistiques est aise Cest pourquoi, MicrosoftproposeuneimplmentationdesconceptsdAjax(AsynchronousJavaScriptAndXML): Sousformedextensionsdepuislaversion2.0duFramework.NET. IntgredansleFramework.NETdepuislaversion3.5.
1.3 Utilit
MicrosoftASP.NETAjaxpeuttreutilisdesfinsdiverses: Validationetmisejourdunepartiedunepage Aidelasaisie(listes) LecturedefluxRSS Tri,filtrageetrorganisationdedonnesctclient Applicationsdegestiondedocuments Chargementprogressifdedonnesvolumineuses Consommationdeservicesdistants
2 LesbasesfondamentalesdASP.NETAjax
2.1 Echangesclient/serveuravecASP.NET(classiques)
DansuneapplicationASP.NETclassique,unclientWebenvoiedesrequtesHTTPauserveur Web.Chacunedesrequtesestexcutedemaniresynchrone.Voiciunexempledescnario: Leclientenvoieunepremirerequteauserveur,etpatiente. Le serveur traite cette requte, excute la page ASP .NET vise, et renvoie le rsultat de lexcutionauclient. Le client clique par exemple sur un bouton, une nouvelle requte est alors envoye au serveurWeb.Ilpatientedenouveau,pendantqueleserveurtraitesarequte. Une fois la rponse obtenue, le client voit dans son navigateur le rsultat de lexcution, et peutdenouveauenvoyunenouvellerequte. Voiciunschmaexplicitantcescnario:
Client Web (browser)

Requte HTTP GET Rponse HTTP
Serveur Web
Excution de la page
Requte HTTP POST Rponse HTTP Application Web Requte HTTP POST Rponse HTTP Excution dune partie de la page Excution dune partie de la page
Page Web
2.2 Echangesclient/serveuravecASP.NETAjax
Avec ASP .NET Ajax, le client pourra envoyer des requtes HTTP, qui mettront jour une ou plusieurs parties dune mme page. Ces requtes pourront sexcuter de manire asynchrone (en mmetemps). DotnetFranceAssociationJamesRAVAILLE
2.3 Formatdchangededonnes
Actuellement (en 2009), le langage dchanges de donnes standard interapplicatif est le langage XML. Cependant, dans ASP .NET Ajax, ce langage pose des problmes en matire de performance: Le langage XML est un langage verbeux (balises douverture et de fermeture, rptition dlments,).Lesdonneschangesentreleclientetleserveursontdoncvolumineuses. Un flux XML nest pas interprt nativement par le langage JavaScript. Ainsi, pour accder auxdonnesduflux,ilestncessairedeparsercefluxetcrerunarbreDOM.
Fort de ces constats, dans ASP .NET Ajax, les changes de donnes (par dfaut, car il est possibledemodifiercecomportement)sefontaveclelangageJSON(JavaScriptObjectNotation).Ce langage permet dcrire des flux moins volumineux, et est nativement interprt par le langage JavaScript.Pourvousmontrerladiffrenceentrecesdeuxlangages,voicideuxfluxdedonnes:
' Flux de donnes au format XML
<?xmlversion="1.0"?> <menubar> <menuname="File"> <commandvalue="New"action="CreateDoc"/> <commandvalue="Open"action="OpenDoc"/> <commandvalue="Close"action="CloseDoc"/> </menu> </menubar>

' Flux de donnes au format JSON [ { "menu": "File", "commands": [ { "value":"New", "action":"CreateDoc" }, { "value":"Open", "action":"OpenDoc" }, { "value":"Close", "action": "CloseDoc" } ] } ]
Sivoussouhaitezensavoirplussurcelangage,vouspouvezconsulterlesiteofficieldeJSON, quipubliesesspcifications:www.json.org
3 PrsentationdASP.NETAjax
3.1 Vuedensemble
Ajax nest pas une technologie propre Microsoft, qui en propose toutefois une implmentation, afin dtendre sa technologie permettant de dvelopper des applications Web, la technologieASP.NET: Microsoft ASP .NET AJAX Library : framework JavaScript (nouveaux lments de syntaxe, bibliothquedeclassescomplmentaire) Microsoft ASP .NET AJAX Extensions, prsents sous la forme de nouveaux contrles serveur ASP.NET,etclassesassocies Microsoft ASP .NET AJAX Control Toolkit: un ensemble de contrles Web enrichis (widgets). Ces contrles ne sont pas abords dans ce cours. Si vous souhaitez en savoir plus, vous pouvezlirelechapitreAjaxControlToolkit
La philosophie de Microsoft ASP .NET Ajax, telle quelle est prsente par Microsoft, est trs oriente serveur: dans la continuit de la technologie ASP.NET, elle propose une implmentation base sur des composants serveurs. Toutefois, cette implmentation est extensible, en nous laissant lapossibilitdecrernosproprescomposants.
3.2 MicrosoftASP.NETAjax:ctserveur
VoiciunschmaprsentantlesfonctionnalitsprisesenchargeparleFramework.NET,ct serveur:
Cescomposantspermettent: DeconfigurerlecodeJavaScriptgnrdanslapage: Localisation / globalisation, de manire internationaliser / personnaliserlestextesetformatsdedonnes Dbogageettraage De crer des services Web Ajax, des services WCF et des mthodes depageconsommablesdansleblocJavaScriptdespagesASP.NET De configurer et utiliser les services dapplication ASP .NET (gestion de lauthentification des utilisateurs, des autorisations sur les ressourcesdelapplicationetgestionduprofiledesutilisateurs) De crer des contrles serveur personnaliss, qui dfinissent un comportementctclient(extenders)
3.3 MicrosoftASP.NETAjax:ctclient
VoiciunschmaprsentantlesfonctionnalitsprisesenchargeparleFramework.NET,ct serveur: DotnetFranceAssociationJamesRAVAILLE
CeframeworkctclientestcomposdefichiersJavaScript, assurant: Lapossibilitdecrerdescomposantsctclient,avecunfort aspectorientobjet LapriseenchargedelacompatibilitdanslesnavigateursWeb Lescomposantsrseaupermettentdesimplifierlacommunication aveclapplicationctserveur
4 MicrosoftAjaxLibrary:lesextensionsJavaScript
Ce sujet est trop vaste pour pouvoir le traiter dans ce support de cours. Nous nous attacheronsainsivousprsenterenquoiconsistelesextensionsJavaScript.
4.1 Prsentation
Microsoft Ajax Library contient des fichiers dextension .js, tlchargs sur le navigateur client la demande, autrement dit suivant les fonctionnalits utiliss dans la page affiche. Tous ces fichiers de base sont contenus en tant que ressources incorpore dans lassembly System.Web.Extensions.dllduFramework.NET. LesextensionsJavaScriptenrichissentlelangageJavaScriptdebase,toutenproposantdes: Objets, instructions et concepts de plus haut niveau, tels que des notions objet (classes, hritage,interfaces,numrations). Reconnaissancedetypedunobjet. Descapacitsdemiseenuvredelarflexion. Autrement dit, Microsoft Ajax Library contient une importante couche dabstraction sur le langageJavaScript,afin: Il est important de noter que Microsoft Ajax Library, fonctionne dans la plupart des navigateurs, couramment utiliss par les internautes (Internet Explorer, FireFox, Google Chrome, Opera,) Deproposerdestypesdehautniveau,enrichissantlestypesnatifsdulangageJavaScript. Dimplmenterdanscelangage,desconceptsorientsobjet. Deproposerdenouvellesclassesetobjetsoffrantdavantagesdefonctionnalits.
4.2 Lestypesdehautniveau
LestypesdehautniveaufournisparleFrameworkJavaScriptsontlessuivants: Array : tant le type Array natif, afin de pouvoir facilement numrer et rechercher les lmentsdansuntableau Boolean : tant le type Boolean natif, afin de pouvoir dduire une valeur boolenne partir dunechanedecaractres Date : tend le type Date natif, notamment avec la prise en compte du formatage de donnes Error:permetdesimuleruneexception Function:tendletypeFunctionnatif,afindeproposerdesmthodespermettantdedfinir desclasses,espacesdenoms Number:tendletypeNumbernatif DotnetFranceAssociationJamesRAVAILLE
10
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009 Object:tendletypeObjectnatif RegExp:encapsuleletypeRegExpnatif String : tend le type String natif, en fournissant diffrentes options de formatage, de dcoupageetdanalysedechanesdecaractres
4.3 Lalias$get
Equivalente linstruction JavaScript document.getElementById(), lalias $get permet daccder un contrle de la page, via son modle DOM. Cet alias est utilisable dans tous les navigateurs:
$get('idControl')
4.4 Lesextensionsorientesobjet
LesextensionsorientesobjetapportesparleFrameworkJavaScriptsontlessuivantes: Crationdeclasses Spcificationdespacedenoms Miseenuvredelhritage Utilisationdesinterfaces Utilisationdnumrations
4.5 Exemplesdutilisationdecesextensions
4.5.1 Exempledecrationduneclasse Voici quelques exemples de mise en uvre, des extensions proposes par Microsoft Ajax Library:
11
' Exemple de cration de classes avec Microsoft Ajax Library // Enregistrement de l'espace de noms de la classe. Type.registerNamespace("ExtensionsJavaScript"); // Dfinition de la classe. ExtensionsJavaScript.Personne = function ExtensionsJavaScript$Personne(nom, prenom) { // Valorisation des attributs. this._nom = nom; this._prenom = prenom; } // Prototype de la classe. ExtensionsJavaScript.Personne.prototype = { toString : function toString () { return this._nom + ' ' + this._prenom; }, get_nom : function () { return this._nom; }, get_prenom : function () { return this._prenom; } } // Enregistrement de la classe. ExtensionsJavaScript.Personne.registerClass("ExtensionsJavaScript.Personn e");
' Exemple de cration dune numration Type.registerNamespace("ExtensionsJavaScript"); ExtensionsJavaScript.Couleurs = function(){}; ExtensionsJavaScript.Couleurs.prototype = { Rouge: 0xFF0000, Bleu: 0x0000FF, Vert: 0x00FF00, Blanc: 0xFFFFFF } Type.registerEnum("ExtensionsJavaScript.Couleurs");
' Exemple de mise en uvre de lhritage // Dfinition de la classe Employe. ExtensionsJavaScript.Employe = function ExtensionsJavaScript$Employe(nom, prenom, service) { ExtensionsJavaScript.Employe.initializeBase(this, [nom, prenom]); this._service = service; } // Enregistrement de la classe, avec l'hritage. ExtensionsJavaScript.Employe.registerClass("ExtensionsJavaScript.Employe" , ExtensionsJavaScript.Personne);
12
5 MicrosoftAjaxLibrary:lesclassesdunoyau
Ce sujet est trop vaste pour pouvoir le traiter dans ce support de cours. Il devra tre trait dansunautresupportdecours.Maisonpeuttoutdemmeseposerlaquestionsuivante:comment leclientfaitilpourdownloaderlesfichiersJavaScriptconstituantceFramework? Pour trouver une rponse cette question, il suffit de se positionner dans le fichier de configurationdelapplicationASP.NET.Ontrouvealorsladfinissantunhandler,quipeuttreutilis distance,pardesblocsdecodeJavaScript.Voiciladfinitiondecehandler:
<httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/> </httpHandlers>
Par ailleurs, lutilisation de ce handler est visible dans le code source XHTML, que le serveur retourneauclient.Envoiciunexemple:
<script src="/DF-ExtensionsAjaxCoteServeurVB/ScriptResource.axd?d=4_dOjNXd0PPvxMzoLqP5Ut39d3BB7vr_NoCLtaBpR7njCjZai ou11hTzd33AXFZCDbjosECAkS8p0NaCp3_vZG78IGQOB_Yp2_gOn3lJCl81&t=fffffff f8e6551fd" type="text/javascript"></script>
13
6 LesextensionsduFrameworkASP.NETAjax
6.1 LesextensionsduFrameworkASP.NETAjax
Le Framework .NET propose, ct serveur, 5 contrles ASP .NETAjax. Ces contrles sont disponiblesdanslongletExtensionsAjaxdelaboiteoutilsdeVisualStudio: ScriptManager / ScriptManagerProxy : ces deux contrles permettent de mettre en uvre et paramtrer, les mcanismes Ajax dans les pagesASP.NET Timer : ce contrle fonctionne de manire analogue au contrle Timer du Framework .NET, pour les applications Windows .NET. Il permet un client Web dexcuter des requtes HTTP asynchrones, de manire rptitive UpdatePanel : ce contrle est un conteneur de contrles ASP .NET et XHTML,permettantdemettrejourdespartiesdunepageASP.NET UpdateProgress : ce contrle permet dafficher un message dattente, pendantlamisejourpartielledunepageASP.NET
6.2 LescontrlesScriptManageretScriptManagerProxy
LecontrleScriptManager Le contrle ScriptManager est obligatoire dans toutes les pages, dans lesquelles il est ncessaire dutiliser un contrle ASP .NET Ajax, un contrle Ajax Control Toolkit, ou tout autre mcanismeAjax.Ilpermet: DemettredispositionlesclassesetobjetsJavaScriptutilissdanslesscripts. Demettreenuvredesappelssynchronesetasynchronesdeservicesdistants. Degrerlalocalisationetlaglobalisationdespages. Lamisejourpartielledespages. Dutiliserleservicedapplicationdescuritetdegestiondeprofils. DenregistrerdesnouveauxscriptsJavaScriptbasesurMicrosoftAjaxLibrary. 6.2.1
Aussi,ilnepeutenexisterquuneseuleinstancedansune page ASP.NET.Le langageXHTML tantinterprt,ildoittrepositionnavanttoutautrecontrleAJAXdanslapage:

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
VoiciquelquespropritsducontrleScriptManager: Proprits Description
14
allowCustomErrorsRedirect
Indique si les redirections derreurs personnalises sont autorises lors dunpostbackasynchrone(trueestlavaleurpardfaut) Lit et crit le message derreur envoyer au client lorsquune exception nongreseproduit,lorsdunpostbackasynchrone Contient lidentifiant du contrle serveur qui a dclench le postback asynchrone Dure en secondes, permettant de dfinir le timeout dun postback excutdemanireasynchrone Permetdedfinirltatduservicedauthentificationctclient Indique si les mthodes de pages ASP .NET peuvent tre appeles par le scriptctclient(falsepardfaut) Indiquesilerendupartielestautorispourlapage(truepardfaut) Indique si le contrle ScriptManager prend en charge via du code JavaScript, la mise en forme de donnes suivant une culture (false par dfaut) Indique si le contrle ScriptManager extrait des fichiers de scripts pour la culturecourante(falsepardfaut) Indique si le code JavaScript gnr contient des informations et instructionsdedbogage Indiquesilarequteexcuteestunpostbackasynchrone Permetdedfinirltatduservicedeprofilsdutilisateursctclient Permetdedfinirlesscriptscharger,suivantle mode:Auto(pardfaut), Inherit,DebugouRelease Indique si un navigateur ou une version de navigateur peut supporter le rendu partiel dune page. Si cette proprit vaut false, aucun rendu partiel ne sera effectu, indpendamment de la valeur de proprit EnablePartialRendering Mthode statique permettant dobtenir linstance du contrle ScriptManagerdelapageencours
asyncPostBackErrorMessage
asyncPostBackSourceElementID
asyncPostBackTimeOut
authenticationService enablePageMethod
enablePartialRendering enableScriptGlobalization
enableScriptLocalization
isDebuggingEnabled
isInAsyncPostBack profileService scriptMode
supportsPartialRendering
getCurrent
15
registerPostBackControl / RegisterAsyncPostBackControl registerClientScriptBlock
Permet au contrle spcifi de dclencher un postback synchrone / asynchronedepuisunpanneaumodifiable Mthode statique permettant dajouter des blocs dinstructions JavaScript danslerendudunepage PermetdenregistrerunextenderAjaxdanslapage Mthode cach permettant dajouter un champ cach dans la page (contrleinputdetypehidden)
registerExtenderControl registerHiddenField
registerOnSubmitStatement
Mthodestatiquequiassurequelescriptctclientassocilvnement OnSubmitduformulaireestmisdansunrendupartieldelapage Permet de spcifier le positionnement du focus vers le contrle spcifi, aprsunpostbackasynchrone Est lev quand une exception nest pas gre ct serveur lors de lexcutiondunpostbackasynchrone Est lev lorsque le contrle ScriptManager va rsoudre une rfrence un script.Ilestainsipossibledemodifierlemplacementduscript
setFocus
asyncPostBackError
resolveScriptReference
LecontrleScriptManagerProxy Cependant, comment utiliser le contrleScriptManager ? Dans une application ASP .NET, il nestpasncessairedelajouterdanstouteslespages: Si les pages sont des pages Web classiques, on peut encapsuler ce contrle dans un contrle Webpersonnalis,afindecentraliserlinitialisationdesesattributsetsoncomportement. Silespagessontdespagesdecontenu,ilestpossibledajouteruniquementcecontrledans la page matre. Toutes les pages de contenues bnficieront automatiquement de contrle, lorsdeleurexcution. 6.2.2
Quelque soit le scnario que vous prenez, il se peut que vous avez besoin daccder au contrleScriptManagerdansunepageASP.NET.LecontrleScriptManagerProxyvouspermettrady accder:
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"> </asp:ScriptManagerProxy>
16
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009 Mais attention, toutes les proprits, mthodes et vnements du contrle ScriptManager, nesont paspropossautraversducontrleScriptManagerProxy. Cestpourquoi,onpourra prfrer lutilisationdaccesseurenlectureseulepourlexposer.
6.3 LecontrleUpdatePanel
Prsentation Un contrle UpdatePanel est un conteneur de contrles, dsignant une partie dune page, qui peut tre rafrachie de manire indpendante de la page. En effet, le contenu de ce contrle peut tre rafrachi de manire asynchrone, lorsque lun des contrles contenu (ou bien mme de la page) effectue un postback. Ainsi, vu quil permet alors dviter les rafrachissements complets des pages,onconstateleseffetssuivants: Rductionduscintillementdespages Meilleureinteractivitentrelutilisateuretlapplication 6.3.1
Afin de pouvoir tre utilis dans les pages Web, la proprit EnablePartialRendering du contrle ScriptManager doit tre valorise True (valeur par dfaut). Une page peut contenir un ou plusieurscontrlesUpdatePanel. 6.3.2 Proprits VoiciquelquespropritsducontrleUpdatePanel: Description Indiquesilespostbacksdescontrlesenfantsprovoquerontunemisejour ducontrleUpdatePanel.Trueestlavaleurpardfaut.ValoriseFalse, cettepropritpermetdautoriseruniquementunemisejourdynamique ContrledfinissantlerenduducontrleUpdatePanellorsdesonexcution Contrleutilispourajouterdynamiquementdescontrlesenfants IndiquesilamisejourducontrleUpdatePanel,faitpartiedelamisejour partielledelapage Indiquesilerenduducontrleesteffectuenmodeblockouinline. blockestlavaleurpardfaut Collectiondedclencheurs,ochacunestrattachunvnement permettantlamisejourducontrle
Proprit childrenAsTriggers
contentTemplate contentTemplateContainer isInPartialRendering
renderMode
triggers
17
updateMode
Permetdedfinirlemodederendudutableau,endterminantsousquelles conditionsilpeuttremisjour.Deuxvaleurspossibles:always(par dfaut)etconditional
6.3.3 Miseenuvre
6.3.3.1 Unpremierexemple DansunepageASP.NET: AjouteruncontrleScriptManager. AjouterdeuxcontrlesLabelaffichantladateetlheurecourante. AjouterunboutonspermettantdevalorisantlesdeuxcontrlesLabelprcdemment ajouts,avecladateetlheurecourante.
// C# <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Date et heure n1 : <asp:Label ID="LblDateHeure1" runat="server" Text=""></asp:Label> <br /> <br /> Date et heure n2 : <asp:Label ID="LblDateHeure2" runat="server" Text=""></asp:Label> <br /> <br /> <asp:Button ID="CmdRafraichir" runat="server" Text="Rafraichir" onclick="CmdRafraichir_Click" /> </form>
protected void CmdRafraichir_Click(object sender, EventArgs e) { string sDateHeureCourante; sDateHeureCourante = DateTime.Now.ToString(); LblDateHeure1.Text = sDateHeureCourante; LblDateHeure2.Text = sDateHeureCourante; }
18
' VB .NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Date et heure n1 : <asp:Label ID="LblDateHeure1" runat="server" Text=""></asp:Label> <br /> <br /> Date et heure n2 : <asp:Label ID="LblDateHeure2" runat="server" Text=""></asp:Label> <br /> <br /> <asp:Button ID="CmdRafraichir" runat="server" Text="Rafraichir" /> </form> Protected Sub CmdRafraichir_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CmdRafraichir.Click Dim sDateHeure As String sDateHeure = DateTime.Now.ToString() LblDateHeure1.Text = sDateHeure LblDateHeure2.Text = sDateHeure End Sub
Onobtientlersultatsuivant:
Etlorsdechaque clicksurleboutonRafraichir,lesdeuxdatessontmisesjour.Apportezau code prcdent la modification suivante: mettre le second affichage de lheure et le bouton de rafraichissement,dansuncontrleUpdatePanel.Onobtientalorslecodesuivant:
19
// C# <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Date et heure n1 : <asp:Label ID="LblDateHeure1" runat="server" Text=""></asp:Label> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> Date et heure n2 : <asp:Label ID="LblDateHeure2" runat="server" Text=""></asp:Label> <br /> <br /> <asp:Button ID="CmdRafraichir" runat="server" Text="Rafraichir" onclick="CmdRafraichir_Click" /> </ContentTemplate> </asp:UpdatePanel> </form>
' VB .NET <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Date et heure n1 : <asp:Label ID="LblDateHeure1" runat="server" Text=""></asp:Label> <br /> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> Date et heure n2 : <asp:Label ID="LblDateHeure2" runat="server" Text=""></asp:Label> <br /> <br /> <asp:Button ID="CmdRafraichir" runat="server" Text="Rafraichir" /> </ContentTemplate> </asp:UpdatePanel> </form>
Onobtientalorslersultatsuivant:
20
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009 On peut remarquer que seuls les contrles contenus dans le contrle UpdatePanel, ont t mis jour lors de lexcution de la page ct serveur. Mme si le cycle de vie de la page est intgralement excut ct serveur, les donnes renvoyes au client ne contiennent que les informations sur la ou les parties de page mettre jour (y compris le ViewState). Voici le flux de donnesrenvoyparleserveur:
269|updatePanel|UpdatePanel1| Date et heure n2 : <span id="LblDateHeure2">28/12/2008 21:51:58</span> <br /> <br /> <input type="submit" name="CmdRafraichir" value="Rafraichir" id="CmdRafraichir" />
|164|hiddenField|__VIEWSTATE|/wEPDwUJODQ3ODY5Mjc0D2QWAgIDD2QWBAIDDw8WAh4E VGV4dAUTMjgvMTIvMjAwOCAyMjoxNTo1MGRkAgUPZBYCZg9kFgICAQ8PFgIfAAUTMjgvMTIvM jAwOCAyMjoxNTo1MGRkZOiE1zpWhtz9SuEv/4YXgiJ3/0qy|48|hiddenField|__EVENTVAL IDATION|/wEWAgKUkYeGCALzsoLFCrqoQrEFLEQiRXpzSq6K7WG4TiiX|0|asyncPostBackC ontrolIDs|||0|postBackControlIDs|||13|updatePanelIDs||tUpdatePanel1|0|chi ldUpdatePanelIDs|||12|panelsToRefreshIDs||UpdatePanel1|2|asyncPostBackTim eout||90|12|formAction||Default.aspx|
Aussi, ct serveur, tant donn que la page est intgralement excute, veuillez bien grer cette opration de postback particulire. En effet, nexcutez pas de tches ou de traitements particuliers, qui nont aucune utilit lors de la mise jour partielle de la page. Pour ce faire, tester la valeur de la proprit isInAsyncPostBack du contrle ScriptManager, et la proprit isInPartialRenderingdescontrlesUpdatePanel. 6.3.3.2 Dfinitionducontenu LecontenuducontrleUpdatePanel,peuttredfini: Demaniredclarative,enmodesourceoudesign,lorsdelaconceptiondunepage.Cestle casdupremierexempleraliscidessus. Demanireimprative: o En ajoutant des contrles la collection de contrles, accessibles au travers de la propritContentTemplateContainerducontrleUpdatePanel. o En dfinissant la proprit ContentTemplate, avec tout objet cr partir dune classe implmentant linterface ITemplate du Framework .NET. Cette opration peut uniquement tre effectue, si aucun contenu na pas t dfini de manire dclarative.
// C# UpdatePanel1.ContentTemplate = Page.LoadTemplate("~/UC/UC_Contenu.ascx");
21
' VB .NET UpdatePanel1.ContentTemplate = Page.LoadTemplate("~/UC/UC_Contenu.ascx")
6.3.3.3 Misejour ConcernantlamisejourduncontrleUpdatePanel,lesrglesdebase(pardfaut)sontles suivantes: ToutcontrlesitudansuncontrleUpdatePanelralisantunpostback,metjour: o LecontrleUpdatePanelluimme. o Tous les autres contrles UpdatePanel prsents dans la page, except pour ceux pourlesquelslapropritUpdateMode estvaloriseConditional. Toutcontrlecontenudirectementdanslapage,ralisantunpostback,metjourlapage,et parconsquentlescontrlesUpdatePanelcontenus.Cetterglenestplusvraiesiuntrigger (dclencheur) est dfinie sur un des contrles UpdatePanel de la page. Dans ce cas, on retombedanslecasprcdent.Ilexistedeuxtypesdetriggers: o Lestriggersasynchrones(AsyncPostBackTrigger). o Lestriggerssynchrones(PostBackTrigger). Cesdeuxtriggerspossdentdeuxproprits: ControlID:identifiantducontrledclenchantlepostback. EventName:nomdelvnementducontrle,partirduquellepostbackseraeffectu. Il est aussi possible de mettre jour dynamiquement le contrle UpdatePanel ct serveur, vialamthodeUpdate().Maisattention,cettemthodepeutleveruneexceptiondanslescaso: LapropritUpdateModeducontrleUpdatePanelestvaloriseAlways. Sielleestappeleaprslobtentiondurendudelapage.
6.4 LecontrleUpdateProgress
Prsentation La mise jour de la page peut tre potentiellement longue. De plus tant partielle et asynchrone,lutilisateurnevoitpasquunerequteatenvoyeauserveur,cequipeutlinciterde envoyerdenouveauunerequte, Pendant la mise jour partielle du page, le contrle UpdateProgress permet de prvenir lutilisateur,quunepartiedunepageestencoursdemisejour. 6.4.2 Proprits VoiciquelquespropritsducontrleUpdateProgress: DotnetFranceAssociationJamesRAVAILLE 6.4.1
22
Proprit
Description
associatedUpdatePanelId IdentifiantducontrleUpdatePanel,auquellecontrleUpdateProgressest associ
displayAfter
Dureenmillisecondes,aprslaquellelerenduducontrleUpdateProgressest affich.Valeurpardfaut:500
dynamicLayout
ValeurboolenneindiquantsilecontrleUpdateProgressestrendu dynamiquementdanslapage.Trueestlavaleurpardfaut
progressTemplate
PermetdedfinirdynamiquementlecontenuducontrleUpdateProgress
AssociationduncontrleUpdateProgressunouplusieurscontrles UpdatePanel La proprit AssociatedUpdatePanelId permet de dsigner un contrle UpdatePanel particulier.Ainsi,lecontrleUpdateProgressapparatralorsquelecontrleUpdatePanelassocisera encoursdexcution.IldisparatraautomatiquementunefoislerenducontrleUpdatePanelaffich. Sicettepropritnestpasvalorise,alorslecontrleUpdateProgressseraaffichlorsdelexcution detouslescontrlesUpdatePaneldelapage Dfinitionducontenu Tout comme le contrle UpdatePanel, Le contrle UpdateProgress peut tre mis jour, soit de manire dclarative (lors de la conception de la page), soit de manire imprative (dynamiquementlorsdelexcutiondelapage). Miseenuvre Le contrle UpdateProgress est un conteneur de contrles. Il peut contenir tout type de contrlesASP.NET.Voiciunexemple: 6.4.5 6.4.4 6.4.3
23
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <asp:Image runat="server" ImageUrl="/Images/Attente.gif" ImageAlign="AbsMiddle" /> Veuillez patientez... </ProgressTemplate> </asp:UpdateProgress>
Voicilersultat,quiapparatautomatiquement,lorsdelamisejourpartielledunepage:
6.5 LecontrleTimer
Prsentation Ce contrle se comporte de manire similaire un contrle Timer dans les applications WindowsForms,enexcutedespostbacksintervallergulier.Ilpermetainsiderafraichirunepage WebouuneouplusieurspartiesdunepageWeb,intervallergulier(suivantsalocalisationdansla page,etlestriggersdfinis). Attention:lutilisationdececontrlepeutaugmenterletraficdedonnesentrelesclientset leserveurWeb. 6.5.2 Proprits Cecontrlepossdedeuxpropritsintressantes: Description IndiquesilecontrleTimerestactifctclient.Trueestlavaleurpardfaut. IntervalledetempsauboutduqueluneactionesteffectueparlecontrleTimerctserveur. Valeurexprimeenmillisecondes.Valeurpardfaut:60000(soit1minute). 6.5.1
Proprit enabled interval
LvnementTick Le contrle Timer possde un vnement Tick, qui permet de spcifier les instructions excutes ct serveur, chaque de fois que la dure dfinie dans la proprit Interval du contrle Timer,arriveexpiration. 6.5.3
24
LesbasesfondamentalesdeMicrosoftASP.NETAjaxv1.007/01/2009 6.5.4 Miseenuvre Voici un exemple dun contrle Timer, ralisant un postback toutes les secondes. En implmentantlvnementTick,onspcifielesactionsraliserchacundesespostbacks:
// C# <asp:Timer ID="Timer1" runat="server" Enabled="true" Interval="3000" ontick="Timer1_Tick" />
protected void Timer1_Tick(object sender, EventArgs e) { LblDateHeure3.Text = DateTime.Now.ToString(); }
// VB .NET
<asp:Timer ID="Timer1" runat="server" Enabled="true" Interval="3000" /> Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick LblDateHeure2.Text = DateTime.Now.ToString() End Sub
25
7 Conclusion
Dans ce chapitre, nous avons mis en vidence les avantages apports par la technologie Microsoft ASP .NET Ajax, dans le dveloppement dapplications Web. Elle permet de crer des applications plus interactives, offrant de surcrot de meilleurs performances, que des applications Webnonajaxises.

Les Bases Fondamentales de Microsoft ASP - Net Ajax

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Les Bases Fondamentales de Microsoft ASP - Net Ajax

Transféré par

Droits d'auteur :

Formats disponibles

Lesbasesfondamentales deMicrosoft ASP.

6.2.1 6.2.2 6.3

6.3.1 6.3.2 6.3.3 6.4

LecontrleUpdateProgress.................................................................................................. 21 Prsentation.................................................................................................................. 21 DotnetFranceAssociationJamesRAVAILLE

6.5.1 6.5.2 6.5.3 6.5.4 7

Client Web (browser)

<?xmlversion="1.0"?> <menubar> <menuname="File"> <commandvalue="New"action="CreateDoc"/> <commandvalue="Open"action="OpenDoc"/> <commandvalue="Close"action="CloseDoc"/> </menu> </menubar>

CeframeworkctclientestcomposdefichiersJavaScript, assurant: Lapossibilitdecrerdescomposantsctclient,avecunfort aspectorientobjet LapriseenchargedelacompatibilitdanslesnavigateursWeb Lescomposantsrseaupermettentdesimplifierlacommunication aveclapplicationctserveur

Aussi,ilnepeutenexisterquuneseuleinstancedansune page ASP.NET.Le langageXHTML tantinterprt,ildoittrepositionnavanttoutautrecontrleAJAXdanslapage:

VoiciquelquespropritsducontrleScriptManager: Proprits Description

isInAsyncPostBack profileService scriptMode

registerPostBackControl / RegisterAsyncPostBackControl registerClientScriptBlock

contentTemplate contentTemplateContainer isInPartialRendering

Permetdedfinirlemodederendudutableau,endterminantsousquelles conditionsilpeuttremisjour.Deuxvaleurspossibles:always(par dfaut)etconditional

6.3.3.1 Unpremierexemple DansunepageASP.NET: AjouteruncontrleScriptManager. AjouterdeuxcontrlesLabelaffichantladateetlheurecourante. AjouterunboutonspermettantdevalorisantlesdeuxcontrlesLabelprcdemment ajouts,avecladateetlheurecourante.

' VB .NET UpdatePanel1.ContentTemplate = Page.LoadTemplate("~/UC/UC_Contenu.ascx")

associatedUpdatePanelId IdentifiantducontrleUpdatePanel,auquellecontrleUpdateProgressest associ

Proprit enabled interval

protected void Timer1_Tick(object sender, EventArgs e) { LblDateHeure3.Text = DateTime.Now.ToString(); }

Vous aimerez peut-être aussi