Rafraichir un Updatepanel manuellement
Les UpdatePanels sont des contrôles Microsoft Ajax Extensions (Atlas) qui permettent de rafraichir une partie de la page sans postback grâce à une requête Ajax, ce nouveau postback est aussi connu sous le nom de AsyncPostBack. Pour avoir un rafraichissement partiel il faut définir dans notre page aspx quels sont les contrôles et événement qui vont rafraichir cet UpdatePanel cet action se fait via un système de triggers, par défaut tous les contrôles à l'intérieur de l'UpdatePanel déclenche un AsyncPostBack.
Pour ceux qui ne connaissent pas, voici un exemple tout simpliste qui illustre ce concept :
<asp:updatePanel id="UP1" runat="server">
<ContentTemplate>
La zone à rafraichir : <%=DateTime.Now.ToLongTimeString() %>
<asp:Button id="Button1" runat="server" text="Rafraichir !" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger eventName="Click" controlID="Button2" />
</Triggers>
</asp:updatePanel>
<asp:Button ID="Button2" runat="server" Text="Rafraichir depuis l'exterieur" />
Mais comment faire si l'on veut rafraichir notre UpdatePanel manuellement via du code JavaScript ? Pour l'instant il nous faut obligatoirement un contrôle côté serveur, mais si l'on veut rafraichir un UpdatePanel suite à une action côté client, comment fait-on ? La réponse est simple : l'UpdatePanel n'est pas prévu pour ça, c'est "By Design". Mais ce n'est pas parce que ce n'est pas prévu qu'on ne peut pas le faire ;-)
Au début je voulais une façon propre puis je me suis vite rendu compte que ça allait vite devenir compliqué lourd et inutile donc voici une astuce très simple qui vous permettra de rafraichir un UdpatePanel à la mano. Il suffit de rajouter un LinkButton dans la page de mettre un trigger sur celui ci et d'appeler "à la main" la méthode click du lien :-)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<script type="text/C#" runat="server">
protected void Page_Load(Object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(typeof(UpdatePanel), "ManualTrigger",
String.Format(@"
$addHandler(window, 'load', function(){{
while(window.prompt('dites oui !') != 'oui');
$get('{0}').click(); // C'est cette ligne qui permet de lancer l'asyncpostback à la mano
}});
", ManualUpdatePanel1Trigger.ClientID), true);
}
</script>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now.ToLongTimeString() %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger EventName="Click" ControlID="ManualUpdatePanel1Trigger" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="ManualUpdatePanel1Trigger" runat="server" Style="display: none;">Manuel trigger</asp:LinkButton>
</form>
</body>
</html>