Chiamare la funzione ASP.NET da JavaScript?

Sto scrivendo una pagina Web in ASP.NET. Ho del codice JavaScript e ho un pulsante di invio con un evento click.

È possibile chiamare un metodo che ho creato in ASP con l'evento click di JavaScript?

Bene, se non vuoi farlo usando Ajax o in altro modo e vuoi solo che avvenga un normale postback ASP.NET, ecco come lo fai (senza usare altre librerie):

È un po 'complicato però ... :)

io. Nel tuo file di codice (supponendo che tu stia utilizzando C # e .NET 2.0 o versioni successive) aggiungi la seguente interfaccia alla tua classe Page per renderla simile

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

ii. Questo dovrebbe aggiungere (usando Tab- Tab) questa funzione al tuo file di codice:

public void RaisePostBackEvent(string eventArgument) { }

iii. Nel tuo evento onclick in JavaScript, scrivi il seguente codice:

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

Questo chiamerà il metodo 'RaisePostBackEvent' nel tuo file di codice con 'eventArgument' come 'argomentoString' che hai passato da JavaScript. Ora puoi chiamare qualsiasi altro evento che ti piace.

PS: Questo è 'underscore-underscore-doPostBack' ... E, non ci dovrebbe essere spazio in quella sequenza ... In qualche modo il WMD non mi permette di scrivere in caratteri di sottolineatura seguito da un carattere!

Il __doPostBack()metodo funziona bene.

Un'altra soluzione (molto hacker) è semplicemente aggiungere un pulsante ASP invisibile nel markup e fare clic su di esso con un metodo JavaScript.

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

Dal tuo JavaScript, recupera il riferimento al pulsante utilizzando il suo ID client e quindi chiama il metodo .click () su di esso.

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

button.click();

La libreria Microsoft AJAX lo farà. È inoltre possibile creare la propria soluzione che prevede l'utilizzo di AJAX per chiamare i propri file di script aspx (come sostanzialmente) per eseguire le funzioni .NET.

Suggerisco la libreria Microsoft AJAX. Una volta installato e referenziato, basta aggiungere una riga nel caricamento della pagina o init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Quindi puoi fare cose come:

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

Quindi, puoi chiamarlo sulla tua pagina come:

PageClassName.Get5(javascriptCallbackFunction);

L'ultimo parametro della chiamata di funzione deve essere la funzione di callback javascript che verrà eseguita quando viene restituita la richiesta AJAX.

Puoi farlo in modo asincrono usando .NET Ajax PageMethods. Vedi qui o qui .

Penso che il post sul blog Come recuperare e mostrare i dati del database di SQL Server nella pagina ASP.NET utilizzando Ajax (jQuery) ti aiuterà.

Codice JavaScript

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

Funzione lato server ASP.NET

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

La programmazione statica e fortemente tipizzata mi è sempre sembrata molto naturale, quindi all'inizio ho resistito all'apprendimento di JavaScript (per non parlare di HTML e CSS) quando ho dovuto costruire front-end basati sul web per le mie applicazioni. Farei qualsiasi cosa per aggirare questo come il reindirizzamento a una pagina solo per eseguire e agire sull'evento OnLoad, purché potessi codificare C # puro.

Scoprirai comunque che se stai per lavorare con i siti Web, devi avere una mente aperta e iniziare a pensare più orientato al web (cioè, non provare a fare cose sul lato client sul server e viceversa) . Adoro i moduli web ASP.NET e lo uso ancora (così come MVC ), ma dirò che provando a semplificare le cose e nascondendo la separazione di client e server può confondere i nuovi arrivati ​​e finire per rendere le cose più difficili a volte .

Il mio consiglio è di imparare alcuni JavaScript di base (come registrare eventi, recuperare oggetti DOM, manipolare CSS, ecc.) E troverai la programmazione web molto più divertente (per non parlare più facile). Molte persone hanno menzionato diverse librerie Ajax, ma non ho visto alcun esempio Ajax reale, quindi eccolo qui. (Se non hai familiarità con Ajax, tutto ciò che è, è fare una richiesta HTTP asincrona per aggiornare il contenuto (o forse eseguire un'azione sul lato server nel tuo scenario) senza ricaricare l'intera pagina o fare un postback completo.

Dalla parte del cliente:

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

Questo è tutto. Sebbene il nome possa essere fuorviante, il risultato può essere in testo normale o JSON, ma non si è limitati a XML. jQuery fornisce un'interfaccia ancora più semplice per effettuare chiamate Ajax (tra cui la semplificazione di altre attività JavaScript).

La richiesta può essere HTTP-POST o HTTP-GET e non deve essere indirizzata a una pagina Web, ma è possibile pubblicare su qualsiasi servizio in ascolto di richieste HTTP come un'API RESTful . L'API Web ASP.NET MVC 4 semplifica anche la configurazione del servizio Web sul lato server per gestire la richiesta. Ma molte persone non sanno che è anche possibile aggiungere controller API al progetto di moduli Web e utilizzarli per gestire le chiamate Ajax in questo modo.

Lato server:

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

Quindi registra la route HTTP nel tuo file Global.asax, in modo che ASP.NET sappia come indirizzare la richiesta.

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

Con AJAX e controller, è possibile inviare nuovamente al server in qualsiasi momento in modo asincrono per eseguire qualsiasi operazione sul lato server. Questo pugno uno-due offre sia la flessibilità di JavaScript sia la potenza di C # / ASP.NET, offrendo agli utenti che visitano il tuo sito una migliore esperienza complessiva. Senza sacrificare nulla, ottieni il meglio da entrambi i mondi.

Riferimenti

• Ajax ,
• jQuery Ajax ,
• Controller in moduli web

La libreria Microsoft AJAX lo farà. È inoltre possibile creare la propria soluzione che prevede l'utilizzo di AJAX per chiamare i propri file di script aspx (come sostanzialmente) per eseguire le funzioni .NET.

Questa è la libreria chiamata AjaxPro che è stata scritta un MVP di nome Michael Schwarz . Questa libreria non è stata scritta da Microsoft.

Ho usato ampiamente AjaxPro, ed è una libreria molto bella, che consiglierei per semplici callback sul server. Funziona bene con la versione Microsoft di Ajax senza problemi. Tuttavia, noterei, con la facilità con cui Microsoft ha creato Ajax, lo userei solo se veramente necessario. Ci vuole un sacco di JavaScript per eseguire alcune funzionalità davvero complicate ottenute da Microsoft semplicemente inserendole in un pannello di aggiornamento.

È così facile per entrambi gli scenari (vale a dire sincrono / asincrono) se si desidera attivare un gestore eventi sul lato server, ad esempio l'evento click del pulsante.

Per attivare un gestore eventi di un controllo: se hai già aggiunto uno ScriptManager alla tua pagina, salta il passaggio 1.

1. Aggiungi quanto segue nella sezione script client della pagina

   //<![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. Scrivi il gestore di eventi lato server per il tuo controllo

      protetto vuoto btnSayHello_Click (mittente oggetto, EventArgs e) {Label1.Text = "Hello World ..."; }

   3. Aggiungi una funzione client per chiamare il gestore eventi lato server

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

Sostituisci "btnSayHello" nel codice sopra con l'ID client del tuo controllo.

In questo modo, se il controllo si trova all'interno di un pannello di aggiornamento, la pagina non verrà aggiornata. È così facile

Un'altra cosa da dire è che: fai attenzione con l'ID client, perché dipende dalla tua politica di generazione ID definita con la proprietà ClientIDMode.

Sto cercando di implementarlo ma non funziona correttamente. La pagina sta tornando indietro, ma il mio codice non viene eseguito. Quando eseguo il debug della pagina, RaisePostBackEvent non viene mai attivato. Una cosa che ho fatto diversamente è che lo sto facendo in un controllo utente anziché in una pagina aspx.

Se qualcun altro è come Merk e ha problemi a venire, ho una soluzione:

Quando hai un controllo utente, sembra che tu debba anche creare PostBackEventHandler nella pagina padre. E quindi puoi invocare PostBackEventHandler del controllo utente chiamandolo direttamente. Vedi sotto:

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

Dove UserControlID è l'ID che hai dato all'utente il controllo sulla pagina principale quando l'hai annidato nel mark up.

Nota: è anche possibile semplicemente chiamare direttamente i metodi appartenenti a quel controllo utente (nel qual caso, sarà necessario solo il gestore RaisePostBackEvent nella pagina padre):

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

Potresti voler creare un servizio web per i tuoi metodi comuni.
Basta aggiungere un WebMethodAttribute alle funzioni che si desidera chiamare, e questo è tutto.
Avere un servizio web con tutte le tue cose comuni semplifica la manutenzione del sistema.

Se la funzione __doPostBack non viene generata nella pagina, è necessario inserire un controllo per forzarlo in questo modo:

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

Per quanto riguarda:

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

button.click();

Dovrebbe essere come:

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

Dove formID è l'ID di controllo ASP.NET nel file aspx.

Aggiungi questa riga al caricamento della pagina se ricevi un errore previsto per l'oggetto.

ClientScript.GetPostBackEventReference(this, "");

È possibile utilizzare PageMethods.Your C# method Nameper accedere ai metodi C # o ai metodi VB.NET in JavaScript.

Prova questo:

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

O questo

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

Utilizzare la proprietà OnClientClick del pulsante per chiamare le funzioni JavaScript ...

Puoi anche ottenerlo semplicemente aggiungendo questa riga nel tuo codice JavaScript:

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

Penso che questo sia molto facile!

Per favore prova questo:

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

ddlVoucherType è un controllo che chiamerà la modifica dell'indice selezionata ... E puoi inserire qualsiasi funzione sulla modifica dell'indice selezionata di questo controllo.

Il modo più semplice e migliore per raggiungere questo obiettivo è utilizzare l' onmouseup()evento JavaScript anzichéonclick()

In questo modo si attiverà JavaScript dopo aver fatto clic e non interferirà con l' OnClick()evento ASP .

Provo questo e quindi potrei eseguire un metodo Asp.Net mentre utilizzo jQuery.

1. Fai un reindirizzamento della pagina nel tuo codice jQuery

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

2. Quindi utilizzare una stringa di query nel caricamento della pagina

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

Quindi non è necessario eseguire un codice aggiuntivo

Questa risposta funziona per me grazie a un browser incrociato:

Il metodo __doPostBack () funziona bene.

Un'altra soluzione (molto hacker) è semplicemente aggiungere un pulsante ASP invisibile nel markup e fare clic su di esso con un metodo JavaScript.

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

Dal tuo JavaScript, recupera il riferimento al pulsante utilizzando il suo ID client e quindi chiama il metodo .Click () su di esso:

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

button.Click(); 

blockquote