ASP.NET-Funktion über JavaScript aufrufen?

Ich schreibe eine Webseite in ASP.NET. Ich habe JavaScript-Code und eine Schaltfläche zum Senden mit einem Klickereignis.

Ist es möglich, eine Methode aufzurufen, die ich in ASP mit dem Klickereignis von JavaScript erstellt habe?

Wenn Sie dies nicht mit Ajax oder auf andere Weise tun möchten und nur ein normales ASP.NET-Postback durchführen möchten, gehen Sie wie folgt vor (ohne andere Bibliotheken zu verwenden):

Es ist allerdings etwas knifflig ... :)

ich. Fügen Sie in Ihrer Codedatei (vorausgesetzt, Sie verwenden C # und .NET 2.0 oder höher) die folgende Schnittstelle zu Ihrer Page-Klasse hinzu, damit sie so aussieht

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

ii. Dies sollte (mit Tab- Tab) diese Funktion zu Ihrer Codedatei hinzufügen :

public void RaisePostBackEvent(string eventArgument) { }

iii. Schreiben Sie in Ihrem Onclick-Ereignis in JavaScript den folgenden Code:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

Dadurch wird die Methode 'RaisePostBackEvent' in Ihrer Codedatei mit dem 'eventArgument' als 'argumentString' aufgerufen, den Sie vom JavaScript übergeben haben. Jetzt können Sie jedes andere Ereignis aufrufen, das Sie mögen.

PS: Das ist 'Unterstrich-Unterstrich-doPostBack' ... Und in dieser Sequenz sollte kein Leerzeichen sein ... Irgendwie erlaubt mir die Massenvernichtungswaffe nicht, Unterstriche gefolgt von einem Zeichen zu schreiben!

Die __doPostBack()Methode funktioniert gut.

Eine andere Lösung (sehr hackisch) besteht darin, einfach eine unsichtbare ASP-Schaltfläche in Ihr Markup einzufügen und mit einer JavaScript-Methode darauf zu klicken.

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

Rufen Sie in Ihrem JavaScript den Verweis auf die Schaltfläche mit seiner ClientID ab und rufen Sie dann .click () auf. Methode auf.

var button = document.getElementById(/* button client id */);

button.click();

Die Microsoft AJAX-Bibliothek wird dies erreichen. Sie können auch eine eigene Lösung erstellen, bei der AJAX zum Aufrufen Ihrer eigenen Aspx-Skriptdateien (im Grunde genommen) zum Ausführen von .NET-Funktionen verwendet wird.

Ich schlage die Microsoft AJAX-Bibliothek vor. Nach der Installation und Referenzierung fügen Sie einfach eine Zeile in Ihre Seite ein oder laden:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Dann können Sie Dinge tun wie:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

Dann können Sie es auf Ihrer Seite wie folgt aufrufen:

PageClassName.Get5(javascriptCallbackFunction);

Der letzte Parameter Ihres Funktionsaufrufs muss die Javascript-Rückruffunktion sein, die ausgeführt wird, wenn die AJAX-Anforderung zurückgegeben wird.

Sie können dies asynchron mit .NET Ajax PageMethods tun. Sehen Sie hier oder hier .

Ich denke, Blog-Beitrag Wie Sie SQL Server-Datenbankdaten auf einer ASP.NET-Seite mit Ajax (jQuery) abrufen und anzeigen, wird Ihnen helfen.

JavaScript-Code

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

Serverseitige ASP.NET-Funktion

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

Statische, stark typisierte Programmierung hat sich für mich immer sehr natürlich angefühlt. Deshalb habe ich mich zunächst geweigert, JavaScript (ganz zu schweigen von HTML und CSS) zu lernen, als ich webbasierte Frontends für meine Anwendungen erstellen musste. Ich würde alles tun, um dies zu umgehen, wie auf eine Seite umzuleiten, nur um das OnLoad-Ereignis auszuführen und zu bearbeiten, solange ich reines C # codieren kann.

Sie werden jedoch feststellen, dass Sie, wenn Sie mit Websites arbeiten möchten, offen sein und anfangen müssen, weborientierter zu denken (das heißt, versuchen Sie nicht, clientseitige Dinge auf dem Server zu tun und umgekehrt). . Ich liebe ASP.NET-Webformulare und verwende sie immer noch (ebenso wie MVC ), aber ich werde sagen, dass der Versuch, die Dinge einfacher zu machen und die Trennung von Client und Server zu verbergen, Neulinge verwirren und die Dinge manchmal sogar schwieriger machen kann .

Mein Rat ist, etwas grundlegendes JavaScript zu lernen (wie man Ereignisse registriert, DOM-Objekte abruft, CSS manipuliert usw.), und Sie werden feststellen, dass die Webprogrammierung viel angenehmer ist (ganz zu schweigen von der einfacheren). Viele Leute haben verschiedene Ajax-Bibliotheken erwähnt, aber ich habe keine tatsächlichen Ajax-Beispiele gesehen. (Wenn Sie mit Ajax nicht vertraut sind, müssen Sie lediglich eine asynchrone HTTP-Anforderung zum Aktualisieren von Inhalten stellen (oder in Ihrem Szenario möglicherweise eine serverseitige Aktion ausführen), ohne die gesamte Seite neu zu laden oder ein vollständiges Postback durchzuführen.

Client-Seite:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

Das ist es. Obwohl der Name irreführend sein kann, kann das Ergebnis auch im Klartext oder in JSON vorliegen. Sie sind jedoch nicht auf XML beschränkt. jQuery bietet eine noch einfachere Oberfläche für Ajax-Aufrufe (neben der Vereinfachung anderer JavaScript-Aufgaben).

Die Anforderung kann ein HTTP-POST oder HTTP-GET sein und muss sich nicht auf einer Webseite befinden. Sie können sie jedoch an jeden Dienst senden, der auf HTTP-Anforderungen wartet, z. B. eine RESTful- API. Mit der ASP.NET MVC 4-Web-API ist das Einrichten des serverseitigen Webdiensts zur Bearbeitung der Anforderung ebenfalls ein Kinderspiel. Viele Menschen wissen jedoch nicht, dass Sie dem Webformularprojekt auch API-Controller hinzufügen und diese verwenden können, um solche Ajax-Aufrufe zu verarbeiten.

Serverseitig:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

Registrieren Sie dann einfach die HTTP-Route in Ihrer Global.asax-Datei, damit ASP.NET weiß, wie die Anforderung geleitet wird.

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

Mit AJAX und Controllern können Sie jederzeit asynchron auf den Server zurücksenden, um einen serverseitigen Vorgang auszuführen. Dieser Doppelschlag bietet sowohl die Flexibilität von JavaScript als auch die Leistung von C # / ASP.NET und bietet den Besuchern Ihrer Website ein besseres Gesamterlebnis. Ohne etwas zu opfern, bekommen Sie das Beste aus beiden Welten.

Verweise

• Ajax ,
• jQuery Ajax ,
• Controller in Webforms

Die Microsoft AJAX-Bibliothek wird dies erreichen. Sie können auch eine eigene Lösung erstellen, bei der AJAX zum Aufrufen Ihrer eigenen Aspx-Skriptdateien (im Grunde genommen) zum Ausführen von .NET-Funktionen verwendet wird.

Dies ist die Bibliothek namens AjaxPro, für die ein MVP namens Michael Schwarz geschrieben wurde . Diese Bibliothek wurde nicht von Microsoft geschrieben.

Ich habe AjaxPro ausgiebig verwendet und es ist eine sehr schöne Bibliothek, die ich für einfache Rückrufe an den Server empfehlen würde. Es funktioniert gut mit der Microsoft-Version von Ajax ohne Probleme. Ich möchte jedoch darauf hinweisen, dass Microsoft Ajax so einfach gemacht hat, dass ich es nur verwenden würde, wenn es wirklich notwendig ist. Es erfordert viel JavaScript, um einige wirklich komplizierte Funktionen auszuführen, die Sie von Microsoft erhalten, indem Sie sie einfach in ein Update-Panel einfügen.

Für beide Szenarien (dh synchron / asynchron) ist es so einfach, wenn Sie einen serverseitigen Ereignishandler auslösen möchten, z. B. das Klickereignis von Button.

So lösen Sie einen Ereignishandler eines Steuerelements aus: Wenn Sie Ihrer Seite bereits einen ScriptManager hinzugefügt haben, überspringen Sie Schritt 1.

1. Fügen Sie Folgendes in den Abschnitt Ihres Seitenclient-Skripts ein

   //<![CDATA[
   var theForm = document.forms['form1'];
   if (!theForm) {
       theForm = document.form1;
   }
   function __doPostBack(eventTarget, eventArgument) {
       if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
           theForm.__EVENTTARGET.value = eventTarget;
           theForm.__EVENTARGUMENT.value = eventArgument;
           theForm.submit();
       }
   }
   //]]>

   2. Schreiben Sie Ihren serverseitigen Ereignishandler für Ihre Steuerung

      protected void btnSayHello_Click (Objektabsender, EventArgs e) {Label1.Text = "Hallo Welt ..."; }}

   3. Fügen Sie eine Clientfunktion hinzu, um den serverseitigen Ereignishandler aufzurufen

      Funktion SayHello () {__doPostBack ("btnSayHello", ""); }}

Ersetzen Sie das "btnSayHello" im obigen Code durch die Client-ID Ihres Steuerelements.

Wenn sich Ihr Steuerelement in einem Update-Bereich befindet, wird die Seite auf diese Weise nicht aktualisiert. Das ist so einfach.

Eine andere Sache zu sagen ist: Seien Sie vorsichtig mit der Client-ID, da dies von Ihrer ID-Generierungsrichtlinie abhängt, die mit der ClientIDMode-Eigenschaft definiert wurde.

Ich versuche dies umzusetzen, aber es funktioniert nicht richtig. Die Seite wird zurückgesendet, aber mein Code wird nicht ausgeführt. Wenn ich die Seite debugge, wird das RaisePostBackEvent nie ausgelöst. Eine Sache, die ich anders gemacht habe, ist, dass ich dies in einem Benutzersteuerelement anstelle einer Aspx-Seite mache.

Wenn jemand wie Merk ist und Probleme damit hat, habe ich eine Lösung:

Wenn Sie ein Benutzersteuerelement haben, müssen Sie anscheinend auch den PostBackEventHandler auf der übergeordneten Seite erstellen. Anschließend können Sie den PostBackEventHandler des Benutzersteuerelements aufrufen, indem Sie ihn direkt aufrufen. Siehe unten:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

Wobei UserControlID die ID ist, die Sie dem Benutzer auf der übergeordneten Seite gegeben haben, als Sie sie im Markup verschachtelt haben.

Hinweis: Sie können auch einfach Methoden, die zu diesem Benutzersteuerelement gehören, direkt aufrufen (in diesem Fall benötigen Sie nur den RaisePostBackEvent-Handler auf der übergeordneten Seite):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

Möglicherweise möchten Sie einen Webdienst für Ihre gängigen Methoden erstellen.
Fügen Sie einfach ein WebMethodAttribute über den Funktionen hinzu, die Sie aufrufen möchten, und fertig.
Ein Webdienst mit all Ihren allgemeinen Dingen erleichtert auch die Wartung des Systems.

Wenn die Funktion __doPostBack auf der Seite nicht generiert wird, müssen Sie ein Steuerelement einfügen, um dies wie folgt zu erzwingen:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

Hinsichtlich:

var button = document.getElementById(/* Button client id */);

button.click();

Es sollte so sein:

var button = document.getElementById('<%=formID.ClientID%>');

Dabei ist formID die ASP.NET-Steuerelement-ID in der ASPX-Datei.

Fügen Sie diese Zeile zum Laden der Seite hinzu, wenn der erwartete Objektfehler angezeigt wird.

ClientScript.GetPostBackEventReference(this, "");

Sie können verwenden, PageMethods.Your C# method Nameum auf C # -Methoden oder VB.NET-Methoden in JavaScript zuzugreifen.

Versuche dies:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

Oder dieses

Response.Write("<script>alert('Hello World');</script>");

Verwenden Sie die OnClientClick-Eigenschaft der Schaltfläche, um JavaScript-Funktionen aufzurufen ...

Sie können es auch erhalten, indem Sie diese Zeile in Ihren JavaScript-Code einfügen:

document.getElementById('<%=btnName.ClientID%>').click()

Ich denke, das ist sehr einfach!

Bitte versuchen Sie dies:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherType ist ein Steuerelement, das von der ausgewählten Indexänderung aufgerufen wird ... Und Sie können der ausgewählten Indexänderung dieses Steuerelements eine beliebige Funktion zuweisen.

Der einfachste und beste Weg, dies zu erreichen, ist die Verwendung des onmouseup()JavaScript-Ereignisses anstelle vononclick()

Auf diese Weise wird JavaScript nach dem Klicken ausgelöst und das ASP- OnClick()Ereignis wird nicht beeinträchtigt .

Ich versuche dies und könnte so eine Asp.Net-Methode ausführen, während ich jQuery verwende.

1. Führen Sie eine Seitenumleitung in Ihrem jQuery-Code durch

   window.location = "Page.aspx?key=1";

2. Verwenden Sie dann beim Laden der Seite eine Abfragezeichenfolge

   protected void Page_Load(object sender, EventArgs e)
   {
       if (Request.QueryString["key"] != null)
       {
           string key= Request.QueryString["key"];
           if (key=="1")
           {
               // Some code
           }
       }
   }

Sie müssen also keinen zusätzlichen Code ausführen

Diese Antwort funktioniert für mich wie ein Kinderspiel, dank Cross-Browser:

Die __doPostBack () -Methode funktioniert gut.

Eine andere Lösung (sehr hackisch) besteht darin, einfach eine unsichtbare ASP-Schaltfläche in Ihr Markup einzufügen und mit einer JavaScript-Methode darauf zu klicken.

<div style="display: none;"> 
    <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" /> 
</div> 

Rufen Sie in Ihrem JavaScript den Verweis auf die Schaltfläche mit seiner ClientID ab und rufen Sie die Methode .Click () auf:

var button = document.getElementByID(/* button client id */); 

button.Click(); 

Blockquote