ASP.NET-Funktion aus JavaScript aufrufen?

StackOverflow https://stackoverflow.com/questions/3713

Frage

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

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

War es hilfreich?

Lösung

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

Allerdings ist es 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 hinzufügen (using Tab-Tab) diese Funktion in Ihre Codedatei einfügen:

public void RaisePostBackEvent(string eventArgument) { }

iii.Schreiben Sie in Ihr 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, das Sie vom JavaScript übergeben haben.Jetzt können Sie jede beliebige andere Veranstaltung anrufen.

P.S.:Das ist 'underscore-underscore-doPostBack' ...Und in dieser Reihenfolge sollte kein Leerzeichen sein ...Irgendwie erlaubt mir die WMD nicht, Unterstriche gefolgt von einem Zeichen zu schreiben!

Andere Tipps

Der __doPostBack() Methode funktioniert gut.

Eine andere (sehr hackige) Lösung 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 aus Ihrem JavaScript den Verweis auf die Schaltfläche ab, indem Sie dessen verwenden Kunden ID und dann anrufen .klicken() Methode darauf.

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

button.click();

Der Microsoft AJAX-Bibliothek wird dies erreichen.Sie könnten auch Ihre eigene Lösung erstellen, die die Verwendung von AJAX zum Aufrufen Ihrer eigenen ASPX-Skriptdateien (im Grunde genommen) zum Ausführen von .NET-Funktionen beinhaltet.

Ich empfehle die Microsoft AJAX-Bibliothek.Sobald es installiert und referenziert ist, fügen Sie einfach eine Zeile in Ihren Seitenlade- oder Init-Vorgang ein:

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-Anfrage zurückgegeben wird.

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

Statisches, stark typisiertes Programmieren hat sich für mich immer sehr natürlich angefühlt, daher habe ich mich zunächst dagegen gewehrt, 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 zum Beispiel eine Umleitung auf eine Seite, nur um das OnLoad-Ereignis auszuführen und zu bearbeiten, solange ich reines C# programmieren kann.

Sie werden jedoch feststellen, dass Sie, wenn Sie mit Websites arbeiten möchten, aufgeschlossen sein und anfangen müssen, weborientierter zu denken (das heißt, versuchen Sie nicht, clientseitige Dinge auf dem Server zu erledigen und umgekehrt). .Ich liebe ASP.NET-Webformulare und verwende sie immer noch (und auch MVC), aber ich muss 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 erlernen (wie man Ereignisse registriert, DOM-Objekte abruft, CSS manipuliert usw.), dann wird Ihnen die Webprogrammierung viel mehr Spaß machen (ganz zu schweigen davon, dass sie einfacher ist).Viele Leute haben verschiedene Ajax-Bibliotheken erwähnt, aber ich habe keine tatsächlichen Ajax-Beispiele gesehen, also hier ist es.(Wenn Sie mit Ajax nicht vertraut sind, reicht es aus, eine asynchrone HTTP-Anfrage zu stellen, um den Inhalt zu aktualisieren (oder vielleicht eine serverseitige Aktion in Ihrem Szenario auszuführen), ohne die gesamte Seite neu zu laden oder ein vollständiges Postback durchzuführen.

Client-seitig:

<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 JSON vorliegen, Sie sind jedoch nicht auf XML beschränkt. jQuery Bietet eine noch einfachere Schnittstelle für Ajax-Aufrufe (neben der Vereinfachung anderer JavaScript-Aufgaben).

Die Anfrage kann ein HTTP-POST oder HTTP-GET sein und muss nicht an eine Webseite gerichtet sein, Sie können sie aber an jeden Dienst posten, der auf HTTP-Anfragen lauscht, wie z RUHIG API.Mit der ASP.NET MVC 4-Web-API ist auch die Einrichtung des serverseitigen Webdienstes zur Bearbeitung der Anfrage ein Kinderspiel.Aber viele Leute wissen nicht, dass man einem Web Forms-Projekt auch API-Controller hinzufügen und diese für die Verarbeitung solcher Ajax-Aufrufe verwenden kann.

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 Anfrage weitergeleitet werden soll.

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

Mit AJAX und Controllern können Sie jederzeit asynchron an den Server zurücksenden, um beliebige serverseitige Vorgänge auszuführen.Dieser Doppelsieg bietet sowohl die Flexibilität von JavaScript als auch die Leistungsfähigkeit von C#/ASP.NET und sorgt so für ein insgesamt besseres Erlebnis für die Besucher Ihrer Website.Ohne auf etwas zu verzichten, erhalten Sie das Beste aus beiden Welten.

Verweise

Ich denke, Blogbeitrag So rufen Sie SQL Server-Datenbankdaten auf einer ASP.NET-Seite mit Ajax (jQuery) ab und zeigen sie an wird dir 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;
}

Dies wird durch die Microsoft AJAX-Bibliothek erreicht.Sie könnten auch Ihre eigene Lösung erstellen, die die Verwendung von AJAX zum Aufrufen Ihrer eigenen ASPX-Skriptdateien (im Grunde genommen) zum Ausführen von .NET-Funktionen beinhaltet.

Dies ist die Bibliothek namens AjaxPro, die als MVP mit dem Namen geschrieben wurde Michael Schwarz.Diese Bibliothek wurde nicht von Microsoft geschrieben.

Ich habe AjaxPro ausgiebig genutzt und es ist eine sehr schöne Bibliothek, die ich für einfache Rückrufe an den Server empfehlen würde.Es funktioniert gut und ohne Probleme mit der Microsoft-Version von Ajax.Allerdings möchte ich anmerken, dass ich Ajax aufgrund der Einfachheit, die Microsoft entwickelt hat, nur verwenden würde, wenn es wirklich notwendig ist.Für einige wirklich komplizierte Funktionen, die Sie von Microsoft erhalten, indem Sie sie einfach in ein Update-Panel einfügen, ist viel JavaScript erforderlich.

Für beide Szenarien (also synchron/asynchron) ist es ganz einfach, wenn Sie einen serverseitigen Event-Handler auslösen möchten, zum Beispiel das Click-Event von Button.

Zum Auslösen eines Event-Handlers eines Steuerelements:Wenn Sie Ihrer Seite bereits einen ScriptManager hinzugefügt haben, überspringen Sie Schritt 1.

  1. Fügen Sie Folgendes in den Abschnitt mit dem Client-Skript Ihrer Seite 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();
    }
}
//]]>

    1. Schreiben Sie Ihren serverseitigen Event-Handler für Ihre Kontrolle

      geschützte void btnsayhello_click (Objektabsender, EventArgs e) {Label1.text = "Hallo Welt ...";}

    2. Fügen Sie eine Client-Funktion hinzu, um den serverseitigen Ereignishandler aufzurufen

      Funktion Sayhello () {__dopostback ("btnsayhello", "");}

Ersetzen Sie „btnSayHello“ im obigen Code durch die Client-ID Ihres Steuerelements.

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

Eine andere Sache, die ich sagen kann, ist Folgendes:Seien Sie vorsichtig mit der Client-ID, da diese von Ihrer ID-Generierungsrichtlinie abhängt, die mit der ClientIDMode-Eigenschaft definiert ist.

Ich versuche, dies umzusetzen, aber es funktioniert nicht richtig.Die Seite postet zurück, aber mein Code wird nicht ausgeführt.Wenn ich die Seite debugge, wird der RaisepostBackevent nie gefeuert.Eine Sache, die ich anders gemacht habe, ist, dass ich dies in einer Benutzersteuerung anstelle einer ASPX -Seite mache.

Wenn es noch jemandem wie Merk geht und er Probleme damit hat, habe ich eine Lösung:

Wenn Sie über ein Benutzersteuerelement verfügen, müssen Sie anscheinend auch den PostBackEventHandler auf der übergeordneten Seite erstellen.Und dann können Sie den PostBackEventHandler des Benutzersteuerelements aufrufen, indem Sie ihn direkt aufrufen.Siehe unten:

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

Dabei ist UserControlID die ID, die Sie der Benutzersteuerung auf der übergeordneten Seite gegeben haben, als Sie sie im Markup verschachtelt haben.

Notiz:Sie können die Methoden, die zu diesem Benutzersteuerelement gehören, auch einfach 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 üblichen Dingen erleichtert auch die Wartung des Systems.

Wenn die Funktion __doPostBack nicht auf der Seite 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 aussehen:

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

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

Fügen Sie diese Zeile zum Laden der Seite hinzu, wenn Sie einen vom Objekt erwarteten Fehler erhalten.

ClientScript.GetPostBackEventReference(this, "");

Sie können verwenden PageMethods.Your C# method Name um 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 einfach diese Zeile in Ihren JavaScript-Code einfügen:

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

Ich denke, das ist sehr einfach!

Bitte versuchen Sie Folgendes:

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

ddlVoucherType ist ein Steuerelement, das die ausgewählte Indexänderung aufruft ...Und Sie können jede Funktion auf die ausgewählte Indexänderung dieses Steuerelements anwenden.

Der einfachste und beste Weg, dies zu erreichen, ist die Verwendung von onmouseup() JavaScript-Ereignis statt onclick()

Auf diese Weise wird nach dem Klicken JavaScript ausgelöst, ohne dass der ASP beeinträchtigt wird OnClick() Ereignis.

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 Seitenladen 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
        }
    }
}

Es ist also nicht erforderlich, einen zusätzlichen Code auszuführen

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

Die Methode __doPostBack() funktioniert gut.

Eine andere (sehr hackige) Lösung 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 aus Ihrem JavaScript den Verweis auf die Schaltfläche mithilfe ihrer ClientID ab und rufen Sie dann die .Click()-Methode dafür auf:

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

button.Click();

Blockquote

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top