Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Propriete Triggers, ChildrenAsTriggers, UpdateMode d'un UpdatePanel

Le contrôle UpdatePanel permet de rafraichir une zone particulière de la page sans faire un rafraichissement complet de celle-ci, en interne Atlas Microsoft ASP.net Ajax Extensions utilise l'objet XMLHttpRequest.  

Pour utiliser un UpdatePanel et rafraichir seulement une zone de la page, il suffit de mettre un contrôle qui fait un PostBack à l'intérieur de l'UpdatePanel :

<asp:UpdatePanel ID="UP1" runat="server"> <ContentTemplate> <%=DateTime.Now.ToLongTimeString() %> <asp:LinkButton ID="lb1" runat="server" Text="Rafraichir via Ajax" /> </ContentTemplate> </asp:UpdatePanel>

Les triggers

Si vous voulez rafraichir une zone suite à un click d'un bouton qui ne fait pas partie de votre UpdatePanel il vous faudra utiliser les triggers :

<asp:UpdatePanel ID="UP1" runat="server"> <ContentTemplate> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lb1" /> </Triggers> </asp:UpdatePanel> <!-- quelque part ailleurs loin dans votre code HTML --> <asp:LinkButton ID="lb1" runat="server" Text="Rafraichir via Ajax" />

Il peut aussi arriver que vous vouliez qu'un contrôle de votre UpdatePanel ne fasse pas un AsyncPostBack mais un classic PostBack, il vous faut là aussi utiliser un trigger, mais plutôt qu'un AsyncPostBackTrigger vous allez utiliser un PostBackTrigger.

<asp:UpdatePanel ID="UP1" runat="server"> <ContentTemplate> <asp:LinkButton ID="lb2" runat="server" Text="Rafraichir via Classic Postback" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="lb2" /> <asp:AsyncPostBackTrigger ControlID="lb1" /> </Triggers> </asp:UpdatePanel> <!-- quelque part ailleurs loin dans votre code HTML --> <asp:LinkButton ID="lb1" runat="server" Text="Rafraichir via Ajax" />

Vous pouvez aussi avoir envie de faire un AsyncPostBack sans pour autant avoir envie de rafraichir un UpdatePanel : envoyer une information vers le serveur sans pour autant attendre de retour. C'est là que la propriété ChildrenAsTriggers intervient, par défaut celle-ci est à true, en la mettez à false, les contrôles à l'intérieur de l'UpdatePanel vont continuer de faire un AsyncPostBack sans pour autant rafraichir l'UpdatePanel

<asp:UpdatePanel ID="UP1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional"> <ContentTemplate> <asp:LinkButton ID="lb2" runat="server" Text="Envoyer la requête sans rafraichir" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel>

Si vous voulez tout de même rafraichir un UpdatePanel il vous faudra alors utiliser sa méthode Update. Vous pouvez également rajouter des triggers à cet UpdatePanel pour qu'il se rafraichisse malgré tout.

A noter que l'on peut enregistrer certains contrôles pour qu'ils fassent un AsyncPostBack plutôt qu'un PostBack directement dans le code .net, ce qui revient à envoyer une information vers le serveur sans avoir de retour :

ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(lb1);

UpdateMode

Par défaut lorsque vous faites une requête pour rafraichir un UpdatePanel, tous les UpdatePanel de votre page se rafraichissent. Dans l'exemple ci-dessous, si vous cliquer sur l'un des LinkButton les deux UpdatePanels vont se rafraichir :

<asp:UpdatePanel ID="UP1" runat="server"> <ContentTemplate> <asp:LinkButton ID="lb1" runat="server" Text="Rafraichir cet UpdatePanel" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UP2" runat="server"> <ContentTemplate> <asp:LinkButton ID="lb2" runat="server" Text="Rafraichir cet UpdatePanel" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel>

Pour éviter ce problème il faudra utiliser la propriété UpdateMode de l'UpdatePanel, cette propriété n'accepte que deux valeurs : Conditional et Always, par défaut l'UpdateMode est à Always c'est à dire que l'UpdatePanel se rafraichira à tous les AsyncPostBack. Dans l'exemple plus haut il faut mettre la propriété UpdateMode à Conditional afin de rafraichir seulement un UpdatePanel lors d'un click sur un linkbutton :

<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:LinkButton ID="lb1" runat="server" Text="Rafraichir cet UpdatePanel" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UP2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:LinkButton ID="lb2" runat="server" Text="Rafraichir cet UpdatePanel" /> <%=DateTime.Now.ToLongTimeString() %> </ContentTemplate> </asp:UpdatePanel>

Dans la pratique on définit cette propriété à Conditional pour chaque utilisation de l'UpdatePanel.

RenderMode

Enfin dernière propriété interessante de l'UpdatePanel : RenderMode cette propriété permet de définir la balise HTML utilisé par un UpdatePanel par défaut la valeur de cette propriété est Block ce qui génère une balise de <div> qui est de type block, c'est à dire que la balise fera un retour à la ligne avant et après, si vous mettez cette propriété à Inline l'UpdatePanel utilisera la balise HTML <span> qui est une balise de type inline c'est à dire qu'elle peut être utilisé dans du texte sans retour à la ligne. Vous pouvez avoir plus d'info sur les balises inline et block sur cet article : La structure des balises : bloc et en-ligne

Posted: mercredi 7 mars 2007 14:58 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

loussaille a dit :

Dès que j'ai un problème sur un développement en ASP.NET, je fais un tour sur ton blog ou tes posts sur Codes-Sources ...

Une fois encore je trouve les explications pour le module AJAX.

Merci beaucoup !

# octobre 22, 2007 15:43

jmolho a dit :

Bonjour Cyril,

Pourriez-vous, SVP, m'indiquer comment envoyer au CodeBehind la valeur d'une variable Javascript (HiddenField par exemple), sans avoir à passer par un btnClick ?

Exemple : j'ai valorisé la résolution de l'écran dans un HiddenField de la Master Page et je souhaite la récupérer dans le codebehind de toutes les pages de mon site (lors du chargement de celles-ci), afin, par exemple, d'adapter la taille des photos. L'idéal pour moi serait de récupérer ces valeurs lors du PageLoad de ces pages (sans avoir à cliquer sur un bouton).

Je vous remercie infiniment pour votre réponse.

Bien cordialement.

PS : Bravo pour votre Blog !!!!!

Jacques.

# septembre 9, 2011 15:27
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01