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

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>
Posted: dimanche 10 décembre 2006 01:53 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

sebeuh a dit :

Salut Cyril,

Je viens (seulement !) de lire ce post concernant la mise à jour d'un UpdatePanel !

Excuse moi si je parais con mais je ne comprends pas la phrase "une astuce très simple qui vous permettra de rafraichir un UdpatePanel à la mano" ! Simple ??? On ne doit pas avoir la même perception de ce mot :p

Pourquoi ne déclares-tu pas ton contrôle "ManualUpdatePanel1Trigger" comme controle AsyncPostBack !

Dans ton page_load :

ScriptManager1.RegisterAsyncPostBackControl(ManualUpdatePanel1Trigger);

Puis sur l'event click de ton linkbutton :

UpdatePanel1.Update();

Au final le code :

protected void Page_Load(object sender, EventArgs e)

{

  ScriptManager1.RegisterAsyncPostBackControl(ManualUpdatePanel1Trigger);

}

protected void ManualUpdatePanel1Trigger_Click(object sender, EventArgs e)

{

  UpdatePanel1.Update();

}

Ca pour moi c'est "simple" :)

A bon entendeur

SeBeuH

# décembre 19, 2006 17:50

sebeuh a dit :

Quoique ton astuce peut etre utile dans certaine situation ;) Merci pr l'info qd meme ^^

Et désolé pour le spam/troll :)

# décembre 19, 2006 18:06

bianca a dit :

Comment peut-on différencier le postback de l'update panel d'un postback classique ?

# janvier 19, 2007 15:16

cyril a dit :

Tu peux utiliser la propriété isInAsyncPostback du scriptmanager, et tu as aussi la propriété isInPartialRendering d'un updatepanel, mais celle ci est buggé (c'est qu'un bug de plus :))

# janvier 19, 2007 15:52

Chubyone a dit :

Bonjour,

je me permets de poster tardivement ici,afin de faire part de ma petite expérience sur les problèmes de raffraichissement manuel d'un UpdatePanel...

J'avais trouvé l'astuce simplette (j'aurais aimé plus propre) d'un Button caché sur lequel on simule un click de souris dans une fonction javascript :

document.getElementById('Button2').click();

Ce Button étant dans un updatePanel, paf pif poum, cool ca marche, UpdatePanel refresh...

Sous Opera et Internet Explorer...

FireFox lui, m'embete... Il me reload la page... :( le vilain...

Très embetant... Car j'ai un swf en dehors de l'UpdatePanel, qui se recharge lui aussi...

Après quelques moults recherches je suis tombé la dessus :

http://jeffzon.net/Blog/post/Refresh-the-UpdatePanel-using-JavaScript-code.aspx

Avec la réponse à mon problème firefox : pour simuler un click sur le Button il faut :

var button = document.getElementById("Button2");

if ( !navigator.appName.indexOf("Microsoft") )

{

   // IE

   button.click();

}

else

{

   // FireFox

   var e = document.createEvent("MouseEvents");

   e.initEvent("click", true, true);

   button.dispatchEvent(e);

}

L'auteur n'est pas très satisfait de cette façon et nous propose une seconde méthode :

un très simple...

__doPostBack("Button2", "");

... dans la fonction javascript.

(J'ai taillé dans le tas par rapport à son exemple pour mon test...)

Me voici enfin avec un code qui fonctionne sous les 3 principaux Navig (pas testé les autres)

# mai 11, 2007 17:23
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- 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

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01