UpdatePanel en ASP.NET, attention au piège

 Posté le 06/05/2010  |  2 minutes  |  Aymeric

En ASP.NET, l'UpdatePanel permet d’intéragir avec le serveur sans avoir à recharcher la page (mode asynchrone).

Le code suivant affiche la date courante dans le label lors du click sur le bouton sans avoir à recharger la page :

UpdatePanel.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
        <asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="bt1" runat="server" Text="Button"
onclick="bt1_Click" />
<asp:Label ID="lbl1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:updatepanel>
    </div>
    </form>
</body>
</html>

UpdatePanel.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class UpdatePanel : System.Web.UI.Page
{
    protected void bt1_Click(object sender, EventArgs e)
    {
        lbl1.Text = DateTime.Now.ToString();
    }
}

Ce qui donne le résultat suivant lors du click sur le bouton, le tout sans rechargement de page :

Update Panel

Le processus est très simple, on pourrait être tenter de mettre ce contrôle partout sur le site internet pour bénéficier de la fluidité de l'AJAX.

Si on regarde d’un peu plus près ce qu’il se passe entre le client et le serveur, on s’aperçoit que tout le view state de la page est renvoyé à chaque action dans l'UpdatePanel :

Update Panel 2

Si on multiplie ce type d’action plusieurs fois dans la page avec plusieurs contrôles (TextBox, Label, etc…), chaque échange avec le serveur peut devenir très lourd. Cette lourdeur n’empêche pas l’utilisation desUpdatePanels, il faut juste être conscient du fonctionnement de ce contrôle pour ne pas l’utiliser à outrance. Ici l’utilisation du framework ASP.NET AJAX est une très bonne alternative pour alléger les échanges.

Info : Pour obtenir des informations concernant les échanges entre le client et le serveur, utilisez Firefox avec le module Firebug.

AJAX  ASP.NET 

Voir également