Chiama la funzione ASP.NET da JavaScript?

Question

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

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

Answer 1

Bene, se non vuoi farlo usando Ajax o in qualsiasi altro modo e vuoi solo che avvenga un normale postback ASP.NET, ecco come farlo (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 classe Page per farla sembrare

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

ii.Questo dovrebbe aggiungere (usando Tab-Tab) questa funzione nel 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 "argumentString" che hai passato da JavaScript.Ora puoi chiamare qualsiasi altro evento che desideri.

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

Answer 2

IL __doPostBack() il 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 its Identificativo cliente e poi chiama il .clic() metodo su di esso.

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

button.click();

Answer 3

IL Libreria Microsoft AJAX realizzerà questo.Potresti anche creare la tua soluzione che prevede l'utilizzo di AJAX per chiamare i tuoi file di script aspx (come fondamentalmente) per eseguire funzioni .NET.

Suggerisco la libreria Microsoft AJAX.Una volta installato e referenziato, aggiungi semplicemente 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.

Answer 4

Puoi farlo in modo asincrono utilizzando .NET Ajax PageMethods.Vedere Qui O Qui.

Answer 5

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 dovevo creare front-end basati sul web per le mie applicazioni.Farei qualsiasi cosa per risolvere questo problema, ad esempio reindirizzando a una pagina solo per eseguire un'azione sull'evento OnLoad, purché potessi codificare in puro C#.

Scoprirai tuttavia che se lavorerai con i siti Web, devi avere una mente aperta e iniziare a pensare in modo più orientato al Web (ovvero, non provare a fare cose lato client sul server e viceversa). .Adoro i moduli web ASP.NET e lo uso ancora (così come MVC), ma dirò che cercare di rendere le cose più semplici e nascondere la separazione tra 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 dire più semplice).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 serve è effettuare una richiesta HTTP asincrona per aggiornare il contenuto (o magari eseguire un'azione lato server nel tuo scenario) senza ricaricare l'intera pagina o eseguire 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 anche in testo semplice o JSON, non sei limitato a XML. jQuery fornisce un'interfaccia ancora più semplice per effettuare chiamate Ajax (oltre a semplificare altre attività JavaScript).

La richiesta può essere HTTP-POST o HTTP-GET e non deve necessariamente essere indirizzata a una pagina Web, ma è possibile pubblicare su qualsiasi servizio in ascolto di richieste HTTP come un Riposante API.L'API Web ASP.NET MVC 4 semplifica anche la configurazione del servizio Web 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 chiamate Ajax come questa.

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 semplicemente il percorso HTTP nel 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, puoi eseguire il postback al server in qualsiasi momento in modo asincrono per eseguire qualsiasi operazione lato server.Questo uno-due offre sia la flessibilità di JavaScript che la potenza di C#/ASP.NET, offrendo alle persone che visitano il tuo sito un'esperienza complessiva migliore.Senza sacrificare nulla, ottieni il meglio da entrambi i mondi.

Riferimenti

• Ajax,
• jQuery Ajax,
• Titolare del trattamento nei moduli Web

Answer 6

Penso che il post del blog Come recuperare e mostrare i dati del database 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;
}

Answer 7

La libreria Microsoft AJAX riuscirà a raggiungere questo obiettivo.Potresti anche creare la tua soluzione che prevede l'utilizzo di AJAX per chiamare i tuoi file di script aspx (come fondamentalmente) per eseguire funzioni .NET.

Questa è la libreria chiamata AjaxPro a cui è stato scritto un MVP denominato Michael Schwarz.Questa libreria non è stata scritta da Microsoft.

Ho utilizzato ampiamente AjaxPro ed è una libreria molto interessante, che consiglierei per semplici callback al server.Funziona bene con la versione Microsoft di Ajax senza problemi.Tuttavia, vorrei notare che, vista la facilità con cui Microsoft ha reso Ajax, lo utilizzerei solo se veramente necessario.Ci vuole molto JavaScript per eseguire alcune funzionalità davvero complicate che ottieni da Microsoft semplicemente inserendole in un pannello di aggiornamento.

Answer 8

È molto semplice per entrambi gli scenari (ovvero sincrono/asincrono) se si desidera attivare un gestore eventi lato server, ad esempio l'evento clic di Button.

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 dello script client della tua 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 tuo gestore di eventi lato server per il tuo controllo

      Protected void btnsayhello_click (mittente oggetto, eventArgs e) {etichetta1.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.

Così facendo, se il tuo controllo è all'interno di un pannello di aggiornamento, la pagina non si aggiornerà.È così facile.

Un'altra cosa da dire è che:Fai attenzione all'ID client, perché dipende dalla policy di generazione dell'ID definita con la proprietà ClientIDMode.

Answer 9

Sto cercando di implementarlo ma non funziona correttamente.La pagina sta pubblicando, ma il mio codice non viene eseguito.Quando ho eseguito il debug della pagina, il Raisepostbackevent non viene mai licenziato.Una cosa che ho fatto diversamente è che lo sto facendo con un controllo dell'utente anziché una pagina ASPX.

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

Quando hai un controllo utente, sembra che tu debba creare anche PostBackEventHandler nella pagina principale.Quindi puoi richiamare il PostBackEventHandler del controllo utente chiamandolo direttamente.Vedi sotto:

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

Dove UserControlID è l'ID che hai assegnato al controllo utente sulla pagina principale quando lo hai nidificato nel markup.

Nota:Puoi anche semplicemente chiamare direttamente i metodi appartenenti a quel controllo utente (nel qual caso, avrai bisogno solo del gestore RaisePostBackEvent nella pagina principale):

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

Answer 10

Potresti voler creare un servizio Web per i tuoi metodi comuni.
Basta aggiungere un WebMethodAttribute sulle funzioni che desideri chiamare e questo è tutto.
Avere un servizio web con tutte le tue cose comuni rende anche più facile la manutenzione del sistema.

Answer 11

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

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

Answer 12

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 del controllo ASP.NET nel file .aspx.

Answer 13

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

ClientScript.GetPostBackEventReference(this, "");

Answer 14

Puoi usare PageMethods.Your C# method Name per accedere ai metodi C# o ai metodi VB.NET in JavaScript.

Answer 15

Prova questo:

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

O questo

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

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

Answer 16

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

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

Penso che questo sia molto facile!

Answer 17

Per favore prova questo:

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

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

Answer 18

Il modo più semplice e migliore per raggiungere questo obiettivo è utilizzare il file onmouseup() Evento JavaScript anziché onclick()

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

Answer 19

Lo provo e così potrei eseguire un metodo Asp.Net mentre utilizzo jQuery.

1. Esegui un reindirizzamento della pagina nel tuo codice jQuery

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

2. Quindi utilizzare una stringa di query in Caricamento 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

Answer 20

Questa risposta funziona come un gioco da ragazzi per me grazie a tutti i browser:

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 ClientID e quindi chiama il metodo .Click() su di esso:

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

button.Click(); 

Citazione in blocco