Llame ASP.NET la función de JavaScript?

Question

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

Es posible llamar a un método creado en ASP con JavaScript haga clic en evento?

Answer 1

Bueno, si usted no desea hacer uso de Ajax o de cualquier otra manera y solo quiere una normal ASP.NET devolución a suceder, aquí está cómo hacerlo (sin utilizar ninguna de las otras bibliotecas):

Es un poco complicado, aunque...:)

yo.En su archivo de código (asumiendo que usted está utilizando C# y .NET 2.0 o posterior) agregar la siguiente Interfaz para su clase de la Página para que se vea como

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

ii.Esto debe agregar (utilizando Ficha-Ficha) esta función a su archivo de código:

public void RaisePostBackEvent(string eventArgument) { }

iii.En su evento onclick en JavaScript, escribir el siguiente código:

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

Esto le llamamos la "RaisePostBackEvent' método en el archivo de código con el 'eventArgument' como el 'argumentString' que pasa desde el JavaScript.Ahora, usted puede llamar a cualquier otro evento que te gusta.

P. S:Que es 'subrayado-subrayan-doPostBack' ...Y, no debe haber ningún espacio en el que la secuencia de...De alguna manera el ADM no me permite escribir guiones bajos seguidos por un carácter!

Answer 2

El __doPostBack() método funciona bien.

Otra solución (muy hackish) es simplemente agregar un invisible ASP botón en el marcado y haga clic en él con un método JavaScript.

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

Desde su JavaScript, recuperar la referencia al botón mediante su ClientID y, a continuación, llamar a la .haga clic en() método.

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

button.click();

Answer 3

El Microsoft AJAX library para lograr este.También puede crear su propia solución que implica el uso de AJAX para llamar a su propio aspx (como básicamente) archivos de secuencia de comandos a ejecutar .NET funciones.

Sugiero que los de Microsoft AJAX library.Una vez instalado y hace referencia, solo hay que añadir una línea en la carga de la página o init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

A continuación, puede hacer cosas como:

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

Entonces, usted puede llamar en su página como:

PageClassName.Get5(javascriptCallbackFunction);

El último parámetro de la llamada a la función debe ser el javascript función de devolución de llamada que se ejecuta cuando la petición AJAX se devuelve.

Answer 4

Usted puede hacerlo de forma asíncrona mediante .NET Ajax PageMethods.Ver aquí o aquí.

Answer 5

Estática, con establecimiento inflexible de tipos de programación siempre se ha sentido muy natural para mí, así que al principio me resistía a aprender JavaScript (por no hablar de HTML y CSS) cuando tuve que construir basada en la web front-ends para mis aplicaciones.Yo haría cualquier cosa para evitar este como redirigir a una página sólo para realizar y a la acción en el evento OnLoad, tanto tiempo como pude código puro de C#.

Usted encontrará que si usted va a estar trabajando con sitios web, usted debe tener una mente abierta y empezar a pensar más orientada a web (es decir, no trate de hacer de lado del cliente de las cosas en el servidor y viceversa).Me encanta ASP.NET webforms y todavía lo utilizan (así como MVC), pero he de decir que por tratar de hacer las cosas más simples y el ocultamiento de la separación de cliente y servidor, puede confundir a los recién llegados y en realidad terminan haciendo las cosas más difíciles a veces.

Mi consejo es aprender algunos conceptos básicos de JavaScript (cómo registrar eventos, recuperar objetos DOM, manipular el CSS, etc.) y usted encontrará la programación web mucho más agradable (por no mencionar más fácil).Un montón de gente ha mencionado las diferentes bibliotecas de Ajax, pero no veo real Ajax ejemplos, así que aquí va.(Si usted no está familiarizado con Ajax, todo lo que es, está haciendo una solicitud asincrónica de HTTP para actualizar el contenido (o tal vez realizar un server-side acción en el escenario) sin necesidad de recargar la página entera o hacer una devolución completa.

Del 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 todo.Aunque el nombre puede ser engañoso el resultado puede ser en formato texto o JSON así, usted no está limitado a XML. jQuery ofrece un interfaz más simple para hacer llamadas Ajax (entre la simplificación de otras JavaScript tareas).

La solicitud puede ser un HTTP-POST o HTTP-GET y no tiene que ser una página web, pero usted puede enviar a cualquier servicio que escucha las peticiones HTTP como un Tranquilo La API.El ASP.NET MVC 4 Web API facilita la configuración de la web del lado del servidor de servicio de la gestión de la solicitud de una brisa así.Pero mucha gente no sabe que también se puede añadir a la API de los controladores a los formularios web del proyecto y el uso de ellos para manejar las llamadas Ajax como este.

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

A continuación, sólo tiene que registrar el HTTP ruta en el Mundial.archivo asax, por lo que ASP.NET se sabe cómo dirigir la solicitud.

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

Con AJAX y Controladores, usted puede enviar de vuelta al servidor en cualquier momento de forma asincrónica para realizar cualquier lado del servidor de la operación.Este golpe uno-dos proporciona la flexibilidad de JavaScript y el poder que el de C# / ASP.NET, dando a la gente a visitar su sitio una mejor experiencia en general.Sin sacrificar nada, usted obtiene lo mejor de ambos mundos.

Referencias

• Ajax,
• Ajax de jQuery,
• Controlador en Webforms

Answer 6

Creo que la entrada de blog Cómo capturar y mostrar SQL Server base de datos en ASP.NET página con Ajax (jQuery) le ayudará.

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

ASP.NET el Lado del Servidor de la Función

[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

Microsoft AJAX library va a lograr esto.También puede crear su propia solución que implica el uso de AJAX para llamar a su propio aspx (como básicamente) archivos de secuencia de comandos a ejecutar .NET funciones.

Esta es la biblioteca que se llama AjaxPro que fue escrito un MVP nombre Michael Schwarz.Esta fue la biblioteca no fue escrito por Microsoft.

He utilizado AjaxPro ampliamente, y es una muy buena biblioteca, que recomendaría a simple devoluciones de llamada al servidor.Funciona bien con la versión de Microsoft Ajax sin problemas.Sin embargo, quiero señalar, con lo fácil que Microsoft ha hecho en Ajax, me gustaría utilizarlo sólo cuando sea realmente necesario.Se necesita mucho de JavaScript para hacer algo realmente complicado funcionalidad que se obtiene de Microsoft acaba de caer dentro de un panel de actualización.

Answer 8

Es tan fácil para ambos escenarios (es decir, sincrónico/asincrónico) si desea activar un controlador de eventos del servidor, por ejemplo, el evento click del Botón.

Para la activación de un controlador de eventos de un control:Si se añade un ScriptManager en su página de ya, a continuación, omita el paso 1.

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

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

      protected void btnSayHello_Click(object sender, EventArgs e) { Label1.Texto = "Hola Mundo...";}

   3. Agregar una función de cliente para llamar el lado del servidor controlador de eventos

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

Reemplazar el "btnSayHello" en el código anterior con el control del id de cliente.

Al hacerlo, si el control está dentro de un panel de actualización, la página no se actualizará.Que es tan fácil.

Otra cosa a decir es que:Tenga cuidado con el id de cliente, ya que depende de la IDENTIFICACIÓN de la generación política definida con el ClientIDMode de la propiedad.

Answer 9

Estoy tratando de implementar esto, pero no está funcionando correctamente.La página es publicar de nuevo, pero mi código no está siendo ejecutado.Cuando me depurar el la página, la RaisePostBackEvent nunca se disparó.Una cosa que me hizo diferente es la que estoy haciendo esto en un control de usuario en lugar de una aspx página.

Si alguien más es como Merk, y tener problemas en los próximos esto, tengo una solución:

Cuando usted tiene un control de usuario, parece que también se debe crear el PostBackEventHandler en la página principal.Y, a continuación, puede invocar el control de usuario de la PostBackEventHandler llamando directamente.Ver a continuación:

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

Donde UserControlID es el ID que le dio el control de usuario en la página principal cuando anidada en la marca.

Nota:También puede simplemente llamar a métodos que pertenecen a ese usuario controlar directamente (en cuyo caso, sólo se necesita la RaisePostBackEvent controlador en la página de los padres):

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

Answer 10

Es posible que desee crear un servicio web para el común de los métodos.
Sólo añadir un WebMethodAttribute a través de las funciones que desea llamar, y de eso se trata.
Tener un servicio web con todas sus cosas comunes también hace que el sistema sea más fácil de mantener.

Answer 11

Si el __doPostBack función no se genera en la página que usted necesita para insertar un control a la fuerza como este:

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

Answer 12

Con respecto a:

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

button.click();

Debe ser como:

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

Donde formID es el ASP.NET ID del control .archivo aspx.

Answer 13

Añadir esta línea a la carga de la página si usted está recibiendo el objeto de error esperado.

ClientScript.GetPostBackEventReference(this, "");

Answer 14

Puede utilizar PageMethods.Your C# method Name para acceder a los métodos C# o VB.NET métodos en JavaScript.

Answer 15

Intente esto:

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

O este

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

El uso de la propiedad OnClientClick en el botón para llamar a funciones JavaScript...

Answer 16

También se puede obtener con sólo añadir esta línea en el código JavaScript:

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

Creo que este es muy fácil!

Answer 17

Por favor, intente esto:

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

ddlVoucherType es un control que el índice seleccionado cambio de guardia...Y usted puede poner cualquier función en el cambio del índice de este control.

Answer 18

La más simple y la mejor manera de lograr esto es utilizar el onmouseup() Eventos de JavaScript en lugar de onclick()

De que manera se va a fuego JavaScript después de hacer clic en y no interferir con el ASP OnClick() evento.

Answer 19

Yo intente esto y así me podría ejecutar un Asp.Net método mientras que el uso de jQuery.

1. Hacer una página de redirección en tu código jQuery

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

2. A continuación, utilice una Cadena de Consulta en la Página de Carga

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

Así que no hay necesidad de ejecutar un código adicional

Answer 20

Esta respuesta funciona como una brisa para mí gracias cross browser:

El __doPostBack() método funciona bien.

Otra solución (muy hackish) es simplemente agregar un invisible ASP botón en el marcado y haga clic en él con un método JavaScript.

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

Desde su JavaScript, recuperar la referencia al botón mediante su ClientID y, a continuación, llamar a la .Haga clic en() método:

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

button.Click(); 

Blockquote