août
2009
Un article de nico-pyright(c)
On l’a souvent vu, l’utilisation de l’updatepanel est très pratique et améliore très facilement l’expérience utilisateur d’un site web.
Mal utilisé, celui-ci peut récupérer beaucoup plus d’informations que nécessaire.
Que faire par exemple dans le cas simple suivant, lorsque l’on doit mettre à jour plusieurs zones en même temps d’une page volumineuse ?
Quelque chose dans ce genre :
Long milieu (images et textes statiques à foison)
Fin à rafraichir
Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Premier bloc à rafraichir</p>
<asp:Label runat="server" ID="label1" />
</div>
<div>
<p>Long bloc à ne pas rafraichir</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim fermentum est at porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dui lacus, ultricies ac vestibulum eu, interdum at nisl. Proin pharetra ipsum pharetra justo pharetra ornare. Integer sed enim sit amet erat suscipit sodales. Pellentesque mi dui, luctus vitae semper quis, scelerisque id orci. Praesent mattis nisi sed eros faucibus non adipiscing libero tincidunt. Aenean sollicitudin sapien ac nulla porta gravida. Phasellus ipsum arcu, aliquam semper ullamcorper quis, ultricies quis lacus. Sed porttitor, purus quis mollis interdum, dui orci feugiat nibh, non tincidunt risus lacus ut massa. Morbi eget sem id mi posuere congue. Aliquam erat volutpat. Vivamus elementum ligula augue. </p>
<p>Aenean pellentesque felis at nunc aliquet vitae porta est cursus. In hac habitasse platea dictumst. Donec arcu felis, suscipit vitae fermentum vitae, auctor ut justo. In egestas interdum erat, vel interdum nisi adipiscing sit amet. Aliquam vitae neque vel erat tempor mollis sed ac sapien. Nam sed velit ut lectus sagittis feugiat ac ut ante. Quisque non nunc lacus. Aliquam lobortis risus ac tortor cursus at tincidunt libero vulputate. Curabitur eu pellentesque diam. Vestibulum tristique tempus sollicitudin. Vestibulum pretium ipsum vitae diam bibendum placerat. Donec vel egestas augue. Suspendisse id placerat tortor. Maecenas pellentesque metus et nunc mollis id pretium tellus tincidunt. Nulla mollis cursus ligula, nec hendrerit tortor feugiat nec. In egestas, nulla ac gravida laoreet, tortor sem sollicitudin turpis, a mollis sem lectus in ipsum. Phasellus egestas fermentum lacus feugiat auctor. Aliquam augue risus, venenatis nec gravida quis, dignissim sagittis massa. Ut dapibus rhoncus sodales.</p>
<asp:Label runat="server" ID="label2" />
</div>
<div>
<p>Dernier bloc à rafraichir</p>
<asp:Label runat="server" ID="label3" />
</div>
<asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />
</form>
</body>
</html>
L’utilisateur non averti pourrait être tenté de mettre un UpdatePanel sur toute la page, ce qui fonctionnerait mais aurait pour effet de rafraîchir toute la page et par la même occasion la portion statique inutile.
Un autre utilisateur au courant de cet effet pourrait être tenté d’utiliser 2 UpdatePanel, mais comment les organiser ?
Si j’entoure mes deux blocs avec des UpdatePanel, c’est à dire :
<div>
<p>Premier bloc à rafraichir</p>
<asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<p>Long bloc ? ne pas rafraichir</p>
[…]Code inutile enlevé […]
</div>
<div>
<p>Dernier bloc à rafraichir</p>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label3" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />
Cela ne fonctionne pas, car l’événement du bouton n’est pas attrapé par l’UpdatePanel, le bouton n’étant pas dans le contrôle.
Si j’agrandis la zone du deuxième UpdatePanel pour entourer le bouton, cela ne rafraîchit que le deuxième UpdatePanel, normal …
La solution est bien d’utiliser 2 UpdatePanel, effectivement. Il faut toujours veiller à ne pas englober des zones inutiles et à réduire au maximum les zones à mettre à jour.
Il faudra par contre leurs indiquer de surveiller l’événement click du bouton. Pour ce faire, on utilisera les Triggers et plus particulièrement l’AsyncPostBackTrigger, comme ceci :
<
asp:ScriptManager runat="server" /><div>
<p>Premier bloc à rafraichir</p>
<asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<div>
<p>Long bloc à ne pas rafraichir</p>
[…]Code inutile enlevé […]
</div>
<div>
<p>Dernier bloc à rafraichir</p>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label3" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />
Et voilà, le minimum de code est rafraîchit et transite à travers le reseau.
Note : la mise à jour des labels se fait par exemple dans le OnLoad :
{
label1.Text =
DateTime.Now.ToLongTimeString();label2.Text = DateTime.Now.ToLongTimeString();
label3.Text = DateTime.Now.ToLongTimeString();
base.OnLoad(e);
}
Commentaires récents
- dans [Tests] Arrange Act Assert, une traduction ?
- dans [UnitTest][C#] Tester une méthode privée
- dans Récupérer une valeur d’un contrôle depuis une autre Form / inclusions croisées et déclaration anticipée
- dans Tutoriel : Utiliser la ListBox et l’Isolated Storage dans vos applications Windows Phone 7 avec Silverlight
- dans Tutoriel : Utiliser la ListBox et l’Isolated Storage dans vos applications Windows Phone 7 avec Silverlight
Archives
- janvier 2013
- avril 2012
- janvier 2012
- juin 2011
- janvier 2011
- décembre 2010
- novembre 2010
- septembre 2010
- juin 2010
- mars 2010
- février 2010
- janvier 2010
- décembre 2009
- novembre 2009
- octobre 2009
- septembre 2009
- août 2009
- juillet 2009
- mai 2009
- avril 2009
- mars 2009
- janvier 2009
- décembre 2008
- novembre 2008
- octobre 2008
- septembre 2008
- août 2008
- juillet 2008
- juin 2008
- mai 2008
- avril 2008
- mars 2008
- février 2008
- janvier 2008
- décembre 2007
- novembre 2007
- octobre 2007
- septembre 2007
- août 2007
- juillet 2007
- juin 2007
- mai 2007