¿Llamar a la función ASP.NET desde JavaScript?

Estoy escribiendo una página web en ASP.NET. Tengo un código JavaScript y tengo un botón de enviar con un evento de clic.

¿Es posible llamar a un método que creé en ASP con el evento de clic de JavaScript?

Bueno, si no desea hacerlo usando Ajax o de otra manera y solo quiere que ocurra una devolución de datos ASP.NET normal, así es como lo hace (sin usar ninguna otra biblioteca):

Aunque es un poco complicado ... :)

yo. En su archivo de código (suponiendo que esté usando C # y .NET 2.0 o posterior) agregue la siguiente interfaz a su clase de página para que se vea como

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

ii) Esto debería agregar (usando Tab- Tab) esta función a su archivo de código:

public void RaisePostBackEvent(string eventArgument) { }

iii) En su evento onclick en JavaScript, escriba el siguiente código:

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

Esto llamará al método 'RaisePostBackEvent' en su archivo de código con el 'eventArgument' como el 'argumentoString' que pasó del JavaScript. Ahora, puede llamar a cualquier otro evento que desee.

PD: Eso es 'subrayado-subrayado-doPostBack' ... Y, no debería haber espacio en esa secuencia ... ¡De alguna manera, el WMD no me permite escribir en guiones bajos seguidos de un carácter!

El __doPostBack()método funciona bien.

Otra solución (muy pirata) es simplemente agregar un botón ASP invisible en su marcado y hacer clic con un método de JavaScript.

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

Desde su JavaScript, recupere la referencia al botón usando su ClientID y luego llame al método .click () en él.

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

button.click();

La biblioteca Microsoft AJAX logrará esto. También puede crear su propia solución que implique el uso de AJAX para llamar a sus propios archivos de script aspx (como básicamente) para ejecutar funciones .NET.

Sugiero la biblioteca Microsoft AJAX. Una vez instalado y referenciado, solo agrega una línea en la carga de su página o init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Entonces puedes hacer cosas como:

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

Luego, puede llamarlo en su página como:

PageClassName.Get5(javascriptCallbackFunction);

El último parámetro de su llamada a la función debe ser la función de devolución de llamada de JavaScript que se ejecutará cuando se devuelva la solicitud AJAX.

Puede hacerlo de forma asincrónica utilizando .NET Ajax PageMethods. Mira aquí o aquí .

Creo que la publicación de blog Cómo buscar y mostrar datos de la base de datos de SQL Server en la página ASP.NET usando Ajax (jQuery) te ayudará.

Código 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>

Función del lado del servidor 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 programación estática, fuertemente tipada, siempre me ha parecido muy natural, por lo que al principio me resistí a aprender JavaScript (sin mencionar HTML y CSS) cuando tuve que construir front-end basados ​​en la web para mis aplicaciones. Haría cualquier cosa para evitar esto, como redirigir a una página solo para realizar una acción en el evento OnLoad, siempre que pudiera codificar C # puro.

Sin embargo, encontrará que si va a trabajar con sitios web, debe tener una mente abierta y comenzar a pensar más orientado a la web (es decir, no intente hacer cosas del lado del cliente en el servidor y viceversa) . Me encantan las formas web ASP.NET y todavía lo uso (así como MVC ), pero diré que al tratar de simplificar las cosas y ocultar la separación del cliente y el servidor, puede confundir a los recién llegados y, en ocasiones, terminar haciendo las cosas más difíciles. .

Mi consejo es aprender algunos JavaScript básicos (cómo registrar eventos, recuperar objetos DOM, manipular CSS, etc.) y encontrará que la programación web es mucho más agradable (sin mencionar que es más fácil). Mucha gente mencionó diferentes bibliotecas de Ajax, pero no vi ningún ejemplo real de Ajax, así que aquí va. (Si no está familiarizado con Ajax, lo único que hace es hacer una solicitud HTTP asincrónica para actualizar el contenido (o tal vez realizar una acción del lado del servidor en su escenario) sin volver a cargar la página completa o realizar una devolución completa.

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

Eso es. Aunque el nombre puede ser engañoso, el resultado puede estar en texto plano o también en JSON, no está limitado a XML. jQuery proporciona una interfaz aún más simple para realizar llamadas Ajax (entre otras cosas, simplificar otras tareas de JavaScript).

La solicitud puede ser HTTP-POST o HTTP-GET y no tiene que estar en una página web, pero puede publicar en cualquier servicio que escuche solicitudes HTTP, como una API RESTful . La API web ASP.NET MVC 4 hace que la configuración del servicio web del lado del servidor para manejar la solicitud también sea muy sencilla. Pero mucha gente no sabe que también puede agregar controladores API al proyecto de formularios web y usarlos para manejar llamadas Ajax como esta.

Lado del servidor:

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

Luego, simplemente registre la ruta HTTP en su archivo Global.asax, para que ASP.NET sepa cómo dirigir la solicitud.

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

Con AJAX y Controllers, puede volver a publicar en el servidor en cualquier momento de forma asíncrona para realizar cualquier operación del lado del servidor. Este doble golpe proporciona tanto la flexibilidad de JavaScript como la potencia de C # / ASP.NET, brindando a las personas que visitan su sitio una mejor experiencia general. Sin sacrificar nada, obtienes lo mejor de ambos mundos.

Referencias

• Ajax ,
• jQuery Ajax ,
• Controlador en formularios web

La biblioteca Microsoft AJAX logrará esto. También podría crear su propia solución que implique el uso de AJAX para llamar a sus propios archivos de script aspx (como básicamente) para ejecutar funciones .NET.

Esta es la biblioteca llamada AjaxPro que se escribió un MVP llamado Michael Schwarz . Esta biblioteca no fue escrita por Microsoft.

He usado AjaxPro ampliamente, y es una biblioteca muy buena, que recomendaría para simples devoluciones de llamada al servidor. Funciona bien con la versión de Microsoft de Ajax sin problemas. Sin embargo, quisiera señalar que, con lo fácil que Microsoft ha hecho Ajax, solo lo usaría si fuera realmente necesario. Se necesita mucho JavaScript para hacer una funcionalidad realmente complicada que obtienes de Microsoft simplemente dejándola en un panel de actualización.

Es muy fácil para ambos escenarios (es decir, síncrono / asíncrono) si desea activar un controlador de eventos del lado del servidor, por ejemplo, el evento de clic de Button.

Para activar un controlador de eventos de un control: si ya agregó un ScriptManager en su página, omita el paso 1.

1. Agregue lo siguiente en la sección de script de cliente de su página

   //<![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. Escriba su controlador de eventos del lado del servidor para su control

      vacío protegido btnSayHello_Click (remitente de objeto, EventArgs e) {Label1.Text = "Hola Mundo ..."; }

   3. Agregue una función de cliente para llamar al controlador de eventos del lado del servidor

      función SayHello () {__doPostBack ("btnSayHello", ""); }

Reemplace el "btnSayHello" en el código anterior con la identificación del cliente de su control.

Al hacerlo, si su control está dentro de un panel de actualización, la página no se actualizará. Eso es muy facil.

Otra cosa que decir es que: tenga cuidado con la identificación del cliente, porque depende de su política de generación de ID definida con la propiedad ClientIDMode.

Estoy tratando de implementar esto, pero no funciona bien. La página se está publicando de nuevo, pero mi código no se está ejecutando. Cuando depuro la página, RaisePostBackEvent nunca se activa. Una cosa que hice de manera diferente es que estoy haciendo esto en un control de usuario en lugar de una página aspx.

Si alguien más es como Merk, y tiene problemas para venir esto, tengo una solución:

Cuando tiene un control de usuario, parece que también debe crear PostBackEventHandler en la página principal. Y luego puede invocar el PostBackEventHandler del control de usuario llamándolo directamente. Vea abajo:

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

Donde UserControlID es el ID que le dio al usuario en la página principal cuando lo anidó en el marcado.

Nota: También puede simplemente llamar a los métodos que pertenecen a ese control de usuario directamente (en cuyo caso, solo necesitaría el controlador RaisePostBackEvent en la página principal):

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

Es posible que desee crear un servicio web para sus métodos comunes.
Simplemente agregue un atributo WebMethodAttribute sobre las funciones que desea llamar, y eso es todo.
Tener un servicio web con todas sus cosas comunes también hace que el sistema sea más fácil de mantener.

Si la función __doPostBack no se genera en la página, debe insertar un control para forzarla así:

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

Respecto a:

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

button.click();

Debería ser como:

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

Donde formID es la ID de control de ASP.NET en el archivo .aspx.

Agregue esta línea a la carga de la página si obtiene el error esperado del objeto.

ClientScript.GetPostBackEventReference(this, "");

Puede usar PageMethods.Your C# method Namepara acceder a métodos C # o métodos VB.NET en JavaScript.

Prueba esto:

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

O esto

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

Use la propiedad OnClientClick del botón para llamar a las funciones de JavaScript ...

También puede obtenerlo simplemente agregando esta línea en su código JavaScript:

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

¡Creo que este es muy fácil!

Por favor intente esto:

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

ddlVoucherType es un control al que llamará el cambio de índice seleccionado ... Y puede poner cualquier función en el cambio de índice seleccionado de este control.

La manera más simple y mejor de lograr esto es usar el onmouseup() evento JavaScript en lugar deonclick()

De esa manera, activará JavaScript después de hacer clic y no interferirá con el OnClick()evento ASP .

Intento esto y así podría ejecutar un método Asp.Net mientras uso jQuery.

1. Haga una redirección de página en su código jQuery

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

2. Luego use una cadena de consulta en la carga de la página

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

Entonces no es necesario ejecutar un código adicional

Esta respuesta funciona como una brisa para mí gracias al navegador cruzado:

El método __doPostBack () funciona bien.

Otra solución (muy pirata) es simplemente agregar un botón ASP invisible en su marcado y hacer clic con un método de JavaScript.

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

Desde su JavaScript, recupere la referencia al botón usando su ClientID y luego llame al método .Click ():

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

button.Click(); 

Blockquote