it-swarm.com.de

ASP.NET-Postback mit JavaScript

Ich habe mehrere kleine divs, die jQuery draggable verwenden. Diese divs werden in einem UpdatePanel platziert, und bei Dragstop verwende ich die JavaScript-Funktion _doPostBack(). wo ich notwendige Informationen aus dem Seitenformular extrahiere.

Mein Problem ist, dass, wenn ich diese Funktion aufrufe, die ganze Seite neu geladen wird, aber ich möchte nur, dass das Update-Panel neu geladen wird.

80
ErnieStings

Hier ist eine vollständige Lösung

Ganzes Formular-Tag der asp.net-Seite

<form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%>

    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br />
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br />

    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br />
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" />
</form>

Gesamter Inhalt der Code-Behind-Klasse der Seite

Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click
    Response.Write("You ran the ButtonA click event")
End Sub

Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click
    Response.Write("You ran the ButtonB click event")
End Sub
  • Der LinkButton ist enthalten, um sicherzustellen, dass die JavaScript-Funktion __doPostBack für den Client gerendert wird. Wenn Sie nur Button-Steuerelemente verwenden, wird diese __doPostBack-Funktion nicht gerendert. Diese Funktion wird aufgrund einer Vielzahl von Steuerelementen auf den meisten ASP.NET-Seiten gerendert, sodass in der Regel keine leere Verknüpfungsschaltfläche erforderlich ist

Was ist los?

Dem Client werden zwei Eingabesteuerelemente angezeigt:

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  • __EVENTTARGET Erhält Argument 1 von __doPostBack
  • __EVENTARGUMENT Erhält Argument 2 von __doPostBack

Die Funktion __doPostBack sieht folgendermaßen aus:

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
  • Wie Sie sehen, werden die Werte den ausgeblendeten Eingängen zugewiesen.

Wenn das Formular gesendet/zurückgesendet wird:

  • Wenn Sie die UniqueID des Server-Control-Buttons angegeben haben, dessen Button-Click-Handler Sie ausführen möchten (javascript:__doPostBack('ButtonB',''), wird der Button-Click-Handler für diesen Button ausgeführt.

Was ist, wenn ich keinen Klick-Handler ausführen, sondern stattdessen etwas anderes tun möchte?

Sie können alles, was Sie wollen, als Argumente an __doPostBack Übergeben.

Sie können dann die versteckten Eingabewerte analysieren und bestimmten Code entsprechend ausführen:

If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then
    Response.Write("Do Something else") 
End If

Weitere Hinweise

  • Was ist, wenn ich die ID des Steuerelements nicht kenne, dessen Click-Handler ich ausführen möchte?
    • Wenn es nicht akzeptabel ist, ClientIDMode="Static" Zu setzen, können Sie so etwas tun: __doPostBack('<%= myclientid.UniqueID %>', '').
    • Oder: __doPostBack('<%= MYBUTTON.UniqueID %>','')
    • Dadurch wird die eindeutige ID des Steuerelements in das Javascript eingefügt, falls Sie dies wünschen
220
Brian Webster

Per Phairoh: Verwenden Sie dies in der Seite/Komponente für den Fall, dass sich der Panelname ändert

<script type="text/javascript">
     <!--
     //must be global to be called by ExternalInterface
         function JSFunction() {
             __doPostBack('<%= myUpdatePanel.ClientID  %>', '');
         }
     -->
     </script>
14
Laramie

Während die Lösung von Phairoh theoretisch solide erscheint, habe ich auch eine andere Lösung für dieses Problem gefunden. Durch die Übergabe der UpdatePanels-ID als Parameter (Ereignisziel) für die doPostBack-Funktion gibt das Update-Panel nur die gesamte Seite zurück.

__doPostBack('myUpdatePanelId','')

* Anmerkung: Der zweite Parameter dient zum Hinzufügen von Ereignisargumenten

hoffe das hilft jemandem!

BEARBEITEN: so scheint es, dass der gleiche Ratschlag oben gegeben wurde, als ich tippte :)

8
ErnieStings

Mit __doPostBack direkt ist sooooo die 2000er. Jeder, der 2018 WebForms codiert, verwendet GetPostBackEventReference

(Im Ernst, füge dies als Antwort für die Vollständigkeit hinzu. Mit dem __doPostBack ist direkt eine schlechte Praxis (ein einzelnes Unterstrich-Präfix weist normalerweise auf ein privates Mitglied hin und ein doppeltes auf ein universelleres privates Mitglied), obwohl es sich an dieser Stelle wahrscheinlich nicht ändern oder veralten wird. Wir haben einen vollständig unterstützten Mechanismus in ClientScriptManager.GetPostBackEventReference .)

Angenommen, Ihr btnRefresh befindet sich in unserem UpdatePanel und verursacht ein Postback. Sie können GetPostBackEventReference wie folgt verwenden ( inspiration ):

function RefreshGrid() {
    <%= ClientScript.GetPostBackEventReference(btnRefresh, String.Empty) %>;
}
7
mlhDev

Wenn jemand Probleme damit hat (wie ich), können Sie den Postback-Code für eine Schaltfläche abrufen, indem Sie das UseSubmitBehavior = "false" -Attribut hinzufügen. Wenn Sie die gerenderte Quelle der Schaltfläche untersuchen, sehen Sie genau das Javascript, das Sie ausführen müssen. In meinem Fall wurde der Name der Schaltfläche und nicht die ID verwendet.

6
user489998

Haben Sie versucht, die Client-ID des Update-Fensters an die Funktion __doPostBack zu übergeben? Mein Team hat dies getan, um ein Update-Panel zu aktualisieren, und soweit ich weiß, hat es funktioniert.

__doPostBack(UpdatePanelClientID, '**Some String**');
2
Jeremy Bade

Sie können _doPostBack() nicht aufrufen, da dies das Senden des Formulars erzwingt. Warum deaktivierst du nicht das PostBack auf dem UpdatePanel?

1
Alex Rodrigues

Verwenden Sie zunächst keine Update-Panels. Sie sind die zweitböseste Sache, die Microsoft jemals für den Webentwickler erstellt hat.

Zweitens, wenn Sie müssen Aktualisierungsfenster verwenden, setzen Sie die UpdateMode-Eigenschaft auf Conditional. Fügen Sie dann einem Asp: Hidden-Steuerelement, das Sie der Seite hinzufügen, einen Auslöser hinzu. Weisen Sie das Änderungsereignis als Auslöser zu. Ändern Sie in Ihrem Dragstop-Ereignis den Wert des ausgeblendeten Steuerelements.

Dies ist nicht getestet, aber die Theorie scheint stichhaltig ... Wenn dies nicht funktioniert, können Sie dasselbe mit einer asp: -Schaltfläche versuchen, indem Sie einfach den display: none -Stil darauf setzen und das click -Ereignis anstelle des change -Ereignisses verwenden.

1
phairoh