web-dev-qa-db-fra.com

Mettre à jour manuellement un UpdatePanel à l'aide de JavaScript ou de jQuery

Est-il possible de mettre à jour un UpdatePanel manuellement à l'aide de JavaScript ou de jQuery?

Ce que j'ai est une zone de texte en haut de ma page. Lorsqu'un utilisateur quitte cette zone de texte, je souhaite exécuter du code serveur (un enregistrement sera ajouté à ma base de données) puis, au bas de la page, un UpdatePanel qui sera actualisé. Le UpdatePanel a un GridView qui aura une entrée pour l'enregistrement ajouté)

javascriptjqueryasp.net.netupdatepanel
12
Rush Frisby

Appelez cette fonction javascript. Ici, UpdatePanel1 est l'identifiant de updatepanel

 <script type="text/javascript">

            var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';

            function ShowItems()
            {
               if (UpdatePanel1 != null) 
               {
                   __doPostBack(UpdatePanel1, '');
               }
            }       

        </script>
21
Azhar

Je pense avoir obtenu ma réponse ... je dois créer un bouton caché dans UpdatePanel puis appeler

__doPostBack('<%= Button.ClientID %>','');
12
Rush Frisby

Bien qu’une vieille question, je pense qu’elle mérite la mention d’une solution supplémentaire.

Si vous ne souhaitez pas vous fier aux boutons cachés ou à l'illusion de __doPostBack, vous avez l'option "ClientScript.GetPostBackEventReference", comme décrit dans cette page (également assez ancienne mais néanmoins excellente):

http://www.4guysfromrolla.com/articles/033110-1.aspx

En bref, si votre UpdatePanel est déclaré comme ceci:

<asp:UpdatePanel ID="MyUpdatePanel" runat="server">...</UpdatePanel>

ensuite, en JavaScript, vous pouvez appeler le script généré par ce côté serveur code:

ClientScript.GetPostBackEventReference(MyUpdatePanel, "")

Donc, dans votre page aspx, vous pourriez avoir quelque chose comme ceci:

function MyJavaScriptFunction(){
   doSomeStuff();
   <%=ClientScript.GetPostBackEventReference(MyUpdatePanel, "")%>
}

Le code entre <% et%> sera remplacé par un appel javascript lors de l'analyse de la page. Vous pourrez donc le consulter en affichant le code source de la page dans votre navigateur.

Ce n'est peut-être pas plus facile que les autres réponses, mais je le préfère car il n'introduit aucun élément supplémentaire et __doPostBack ressemble à un hack. :-)

9
Culme

Eh bien, dans mon cas, la réponse a été l'utilisation de UniqueID. ClientID n'a pas fonctionné.

 __doPostBack("<%=btnTest.UniqueID %>", "");

Cela fonctionne parfaitement. Ne me demande pas pourquoi.

3
Rony

Créer une fonction pour la publication asynchrone:

    function __doPostBackAsync(eventName, eventArgs) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (!Array.contains(prm._asyncPostBackControlIDs, eventName)) {
            prm._asyncPostBackControlIDs.Push(eventName);
        }

        if (!Array.contains(prm._asyncPostBackControlClientIDs, eventName)) {
            prm._asyncPostBackControlClientIDs.Push(eventName);
        }

        __doPostBack(eventName, eventArgs);
    }

Appelez cette fonction là où vous en avez besoin (dans l'événement click, l'événement load, ...):

 __doPostBackAsync("UpdatePanel1", "");

Dans codebehind Page_Load, vérifiez la publication asynchrone et mettez à jour le UpdatePanel souhaité:

if (scriptManager.IsInAsyncPostBack)
{
      if (Request["__EVENTTARGET"] == UpdatePanel1.ID)
      {
         ...

         //Do update
         UpdatePanel1.Update();
      }
}
1
Marian Schutz

Il vous suffit d’appeler change () lors du contrôle que vous avez déclenché dans votre updatePanel.

Par exemple:

  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1" ChildrenAsTriggers="True">
    <ContentTemplate>
      <asp:DropDownList ID="ddl" runat="server" Visible="true" AutoPostBack="true" CssClass='someClass' />
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="ddl" EventName="SelectedIndexChanged" />
    </Triggers>
  </asp:UpdatePanel


<script>          
  $(".someClass").change();
 </script>
0
itfake

Cela fonctionne pour moi:

<asp:UpdatePanel id="pnl" UpdateMode="Conditional" runat="server">
 <contentemplate>
    <div>...your content...</div>
     <div style="display: none; line-height: 0pt;">
        <asp:Button id="btnUpdate" runat="server" UseSubmitBehavior="false"  />
     </div>
</contentemplate>
</asp:UpdatePanel>

JavaScript:

function doUpdate()
{
  var btn = document.getElementById("<%#= btnUpdate.ClientID %>");
  if(btn != null) { btn.click(); }
}
0
Alex N.