it-swarm.com.de

Aktualisieren Sie ein UpdatePanel manuell mit JavaScript oder jQuery

Ist es möglich, ein UpdatePanel manuell mit JavaScript oder jQuery zu aktualisieren?

Was ich habe, ist eine Textbox oben auf meiner Seite. Wenn ein Benutzer diese TextBox verlässt, möchte ich einen Servercode ausführen (es wird ein Datensatz zu meiner Datenbank hinzugefügt). Am unteren Rand der Seite wird ein UpdatePanel angezeigt, das aktualisiert wird. Das UpdatePanel verfügt über eine GridView, in der ein Eintrag für den Datensatz hinzugefügt wird.

12
Rush Frisby

Rufen Sie einfach diese Javascript-Funktion auf. Hier ist UpdatePanel1 die ID von updatepanel

 <script type="text/javascript">

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

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

        </script>
21
Azhar

Ich glaube ich habe meine Antwort bekommen ... muss einen versteckten Button im UpdatePanel erstellen und dann aufrufen

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

Obwohl eine alte Frage, denke ich, verdient es die Erwähnung einer weiteren Lösung.

Wenn Sie sich nicht auf versteckte Schaltflächen oder das illusorische __doPostBack verlassen möchten, gibt es die Option "ClientScript.GetPostBackEventReference", wie auf dieser (ebenfalls ziemlich alten, aber immer noch tollen) Seite beschrieben:

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

Kurz gesagt, wenn Ihr UpdatePanel folgendermaßen deklariert ist:

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

dann können Sie in JavaScript das Skript aufrufen, das von diesem Server-Seite Code generiert wird:

ClientScript.GetPostBackEventReference(MyUpdatePanel, "")

Auf deiner Aspx-Seite könntest du also so etwas haben:

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

Der Code zwischen <% und%> wird durch einen tatsächlichen JavaScript-Aufruf ersetzt, wenn die Seite analysiert wird. Sie können ihn also anzeigen, indem Sie den Quellcode der Seite in Ihrem Browser anzeigen.

Es ist vielleicht nicht einfacher als die anderen Antworten, aber ich bevorzuge es, da es keine zusätzlichen Elemente einführt und sich __doPostBack wie ein Hack anfühlt. :-)

9
Culme

In meinem Fall war die Antwort die Verwendung der UniqueID. ClientID hat nicht funktioniert.

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

Das funktioniert einwandfrei. Frag mich nicht warum.

3
Rony

Funktion für asynchrones Postback erstellen:

    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);
    }

Rufen Sie diese Funktion dort auf, wo Sie sie benötigen (Klickereignis, Ladeereignis, ...):

 __doPostBackAsync("UpdatePanel1", "");

Überprüfen Sie im Codebehind Page Load das asynchrone Postback und aktualisieren Sie das gewünschte UpdatePanel:

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

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

Sie brauchen nur call change () auf der Steuerung, die Sie in Ihrem updatePanel ausgelöst haben.

Zum Beispiel:

  <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

Das funktioniert bei mir:

<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.