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