Jquery asp.net Schaltfläche Klicken Ereignis über Ajax

Question

Ich frage mich, ob mir jemand die richtige Richtung weisen kann. Ich habe eine asp.net-Schaltfläche mit einem Klick-Ereignis (die einige Server-Side-Code läuft). Was ich tun möchte, ist dieses Ereignis über Ajax und Jquery aufrufen. Gibt es eine Möglichkeit, dies zu tun? Wenn ja, würde ich gerne einige Beispiele.

Vielen Dank im Voraus

Answer 1

Dies ist, wo jQuery wirklich glänzt für ASP.Net-Entwickler. Sagen wir, Sie haben diese ASP-Schaltfläche:

Wenn das gerendert wird, können Sie sich den Quelltext der Seite ansehen und die ID wird nicht btnAwesome, sondern $ctr001_btnAwesome oder so ähnlich lauten. Dies macht es zu einem Schmerz in den Hintern zu finden, in javascript. Geben Sie jQuery.

$(document).ready(function() {
  $("input\[id$='btnAwesome'\]").click(function() {
    // Do client side button click stuff here.
  });
});

Die id$= macht eine Regex-Übereinstimmung für eine id ENDE mit btnAwesome.

Editar:

Wollten Sie, dass der Ajax-Aufruf vom Schaltflächenklick-Ereignis auf der Client-Seite aufgerufen wird? Was wollten Sie aufrufen? Es gibt eine Menge wirklich guter Artikel über die Verwendung von jQuery, um Ajax-Aufrufe an ASP.Net-Code hinter Methoden zu machen.

Das Wesentliche dabei ist, dass Sie eine statisch Methode, die mit dem Attribut WebMethod gekennzeichnet ist. Sie können sie dann mit jQuery aufrufen, indem Sie $.ajax verwenden.

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

Ich habe meine WebMethod-Kenntnisse von: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Dort gibt es eine Menge wirklich guter ASP.Net/jQuery-Sachen. Stellen Sie sicher, dass Sie lesen, warum Sie msg.d in der Rückkehr auf .Net 3.5 (vielleicht seit 3.0) Zeug verwenden müssen.

Answer 2

Die Antwort von Gromer gefällt mir, aber sie wirft bei mir eine Frage auf: Was ist, wenn ich mehrere "btnAwesome"-Elemente in verschiedenen Steuerelementen habe?

Um dieser Möglichkeit Rechnung zu tragen, würde ich Folgendes tun:

$(document).ready(function() {
  $('#<%=myButton.ClientID %>').click(function() {
    // Do client side button click stuff here.
  });
});

Es handelt sich nicht um eine Regex-Übereinstimmung, aber meiner Meinung nach ist eine Regex-Übereinstimmung hier auch nicht erforderlich. Wenn Sie sich auf eine bestimmte Schaltfläche beziehen, benötigen Sie eine präzise Textübereinstimmung wie diese.

Wenn Sie jedoch dieselbe Aktion für jedes btnAwesome durchführen möchten, sollten Sie sich an Gromers Antwort halten.

Answer 3

ASP.NET-Webformulare verfügen bereits über eine JavaScript-Methode zur Behandlung von PostBacks namens "__doPostBack".

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

Verwenden Sie das Folgende in Ihrer Codedatei, um das JavaScript zu generieren, das das PostBack ausführt. Mit dieser Methode wird sichergestellt, dass die richtige ClientID für das Steuerelement verwendet wird.

protected string GetLoginPostBack()
{
    return Page.ClientScript.GetPostBackEventReference(btnLogin, string.Empty);
}

Fügen Sie dann auf der ASPX-Seite einen Javascript-Block hinzu.

<script language="javascript">
function btnLogin_Click() {
  <%= GetLoginPostBack() %>;
}
</script>

Das endgültige Javascript wird wie folgt gerendert werden.

<script language="javascript">
function btnLogin_Click() {
  __doPostBack('btnLogin','');
}
</script>

Jetzt können Sie "btnLogin_Click()" aus Ihrem Javascript verwenden, um den Klick auf die Schaltfläche an den Server zu übermitteln.

Answer 4

Auf der Client-Seite behandeln Sie das Click-Ereignis der Schaltfläche und verwenden die Eigenschaft ClientID, um die ID der Schaltfläche zu erhalten:

$(document).ready(function() {
$("#<%=myButton.ClientID %>,#<%=muSecondButton.ClientID%>").click(

    function() {
     $.get("/myPage.aspx",{id:$(this).attr('id')},function(data) {
       // do something with the data
     return false;
     }
    });
 });

In Ihrer Seite auf dem Server:

protected void Page_Load(object sender,EventArgs e) {
 // check if it is an ajax request
 if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") {
  if (Request.QueryString["id"]==myButton.ClientID) {
    // call the click event handler of the myButton here
    Response.End();
  }
  if (Request.QueryString["id"]==mySecondButton.ClientID) {
    // call the click event handler of the mySecondButton here
    Response.End();
  }
 }
}

Answer 5

Ich habe mich dabei ertappt, dass ich dies tun wollte, und ich habe mir die obigen Antworten angeschaut und einen Mischansatz daraus gemacht. Es wurde ein wenig kompliziert, aber ich habe es so gemacht:

Meine Schaltfläche funktionierte bereits mit einem serverseitigen Beitrag. Ich wollte, dass zu lassen, um weiterhin zu arbeiten, so dass ich die "OnClick" die gleichen, aber fügte eine OnClientClick:

OnClientClick="if (!OnClick_Submit()) return false;"

Hier ist mein vollständiges Schaltflächenelement, falls es von Bedeutung ist:

<asp:Button UseSubmitBehavior="false" runat="server" Class="ms-ButtonHeightWidth jiveSiteSettingsSubmit" OnClientClick="if (!OnClick_Submit()) return false;" OnClick="BtnSave_Click" Text="<%$Resources:wss,multipages_okbutton_text%>" id="BtnOK" accesskey="<%$Resources:wss,okbutton_accesskey%>" Enabled="true"/>

Wenn ich das onclick-Attribut der HTML-Schaltfläche zur Laufzeit untersuche, sieht es tatsächlich so aus:

if (!OnClick_Submit()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$ctl03$RptControls$BtnOK", "", true, "", "", false, true))

Dann habe ich in meinem Javascript die Methode OnClick_Submit hinzugefügt. In meinem Fall musste ich prüfen, ob ich dem Benutzer einen Dialog anzeigen muss. Wenn ich den Dialog zeige, gebe ich false zurück, was dazu führt, dass das Ereignis nicht weiter verarbeitet wird. Wenn ich den Dialog nicht zeige, gebe ich true zurück, wodurch das Ereignis weiter verarbeitet wird und meine Postback-Logik wie gewohnt abläuft.

function OnClick_Submit() {
    var initiallyActive = initialState.socialized && initialState.activityEnabled;
    var socialized = IsSocialized();
    var enabled = ActivityStreamsEnabled();

    var displayDialog;

    // Omitted the setting of displayDialog for clarity

    if (displayDialog) {
        $("#myDialog").dialog('open');
        return false;
    }
    else {
        return true;
    }
}

Dann in meinem Javascript-Code, der ausgeführt wird, wenn der Dialog akzeptiert wird, tue ich das Folgende, je nachdem, wie der Benutzer mit dem Dialog interagiert hat:

$("#myDialog").dialog('close');
__doPostBack('message', '');

Die obige "Nachricht" ist tatsächlich unterschiedlich, je nachdem, welche Nachricht ich senden möchte.

Aber halt, es gibt noch mehr!

Zurück in meinem Server-seitigen Code, änderte ich OnLoad von:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        return;
    }

    // OnLoad logic removed for clarity
}

Para:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e)
    if (IsPostBack)
    {
        switch (Request.Form["__EVENTTARGET"])
        {
            case "message1":
                // We did a __doPostBack with the "message1" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message1", null));
                break;

            case "message2":
                // We did a __doPostBack with the "message2" command provided
                Page.Validate();
                BtnSave_Click(this, new CommandEventArgs("message2", null));
                break;
            }
            return;
    }

    // OnLoad logic removed for clarity
}

Dann in BtnSave_Click-Methode tue ich das folgende:

CommandEventArgs commandEventArgs = e as CommandEventArgs;
string message = (commandEventArgs == null) ? null : commandEventArgs.CommandName;

Und schließlich kann ich eine Logik bereitstellen, die darauf basiert, ob ich eine Nachricht habe oder nicht, und die auf dem Wert dieser Nachricht basiert.