cómo llamar a un método ASP.NET C# usando javascript

¿Alguien sabe cómo llamar a un método C# del lado del servidor usando javascript? Lo que tengo que hacer es detener las importaciones si se elige Cancelar o continuar importando si se elige aceptar. Estoy utilizando Visual Studio 2010 y C# como mi programación lanaguagecómo llamar a un método ASP.NET C# usando javascript

Este es mi código:

private void AlertWithConfirmation()    
{     
    Response.Write(
     "<script type=\"text/javascript\">" +  
      "if (window.confirm('Import is currently in progress. Do you want to continue with importation? If yes choose OK, If no choose CANCEL')) {" +  
       "window.alert('Imports have been cancelled!');" +  
      "} else {" + 
       "window.alert('Imports are still in progress');" +  
      "}" +  
     "</script>"); 
}

Fuente

2011-08-17 mikespiteri

La manera más fácil es, probablemente, enviar una solicitud AJAX al servidor con jQuery o un marco relacionado: http://api.jquery.com/jQuery.ajax/ por lo que en su bloque cancelar, cree la solicitud y envíela al servidor. Si necesitas más información, solo pregunta. – timothyclifford

PageMethod un enfoque más fácil y más rápido para Asp.Net AJAX Podemos mejorar fácilmente la experiencia del usuario y el rendimiento de las aplicaciones web al liberar el poder de AJAX. Una de las mejores cosas que me gustan de AJAX es PageMethod.

PageMethod es una forma de exponer el método de la página del lado del servidor en el script java. Esto brinda tantas oportunidades que podemos realizar muchas operaciones sin usar backs lentos y molestos.

En este post estoy mostrando el uso básico de ScriptManager y PageMethod. En este ejemplo, estoy creando un formulario de registro de usuario, en el cual el usuario puede registrarse contra su dirección de correo electrónico y contraseña. Aquí está el marcado de la página que voy a desarrollar:

<body> 
    <form id="form1" runat="server"> 
    <div> 
     <fieldset style="width: 200px;"> 
      <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label> 
      <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> 
      <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label> 
      <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> 
     </fieldset> 
     <div> 
     </div> 
     <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" /> 
    </div> 
    </form> 
</body> 
</html>

Para método de página de configuración, primero hay que arrastrar un gestor de script en su página.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> 
</asp:ScriptManager>

También tenga en cuenta que he cambiado EnablePageMethods="true".
Esto le dirá a ScriptManager que voy a llamar a PageMethods desde el lado del cliente.

Ahora el siguiente paso es crear una función de servidor.
Aquí es la función que he creado, esta función valida la entrada del usuario:

[WebMethod] 
public static string RegisterUser(string email, string password) 
{ 
    string result = "Congratulations!!! your account has been created."; 
    if (email.Length == 0)//Zero length check 
    { 
     result = "Email Address cannot be blank"; 
    } 
    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks 
    { 
     result = "Not a valid email address"; 
    } 
    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks 
    { 
     result = "Not a valid email address"; 
    } 

    else if (password.Length == 0) 
    { 
     result = "Password cannot be blank"; 
    } 
    else if (password.Length < 5) 
    { 
     result = "Password cannot be less than 5 chars"; 
    } 

    return result; 
}

A decir gestor de script que este método se puede acceder a través de JavaScript tenemos que garantizar dos cosas:
Primero: Este método debe ser 'public static '.
Segundo: debe haber un método anterior de la etiqueta [WebMethod] como está escrito en el código anterior.

Ahora he creado la función del lado del servidor que crea la cuenta. Ahora tenemos que llamarlo desde el lado del cliente. Aquí es cómo podemos llamar a esa función del lado del cliente:

<script type="text/javascript"> 
    function Signup() { 
     var email = document.getElementById('<%=txtEmail.ClientID %>').value; 
     var password = document.getElementById('<%=txtPassword.ClientID %>').value; 

     PageMethods.RegisterUser(email, password, onSucess, onError); 

     function onSucess(result) { 
      alert(result); 
     } 

     function onError(result) { 
      alert('Cannot process your request at the moment, please try later.'); 
     } 
    } 
</script>

para llamar a mi servidor de métodos de lado Registro de usuario, ScriptManager genera una función de proxy que está disponible en PageMethods.
Mi función del lado del servidor tiene dos parámetros, es decir, correo electrónico y contraseña. Después de esos parámetros debemos dar dos nombres de funciones adicionales que se ejecutarán si el método se ejecuta satisfactoriamente (primer parámetro, es decir, enSuceso) o el método falla (segundo parámetro, es decir, resultado).

Ahora todo parece estar listo, y ahora he agregado OnClientClick="Signup();return false;" en mi botón de Inscripción. Así que aquí el código completo de mi página aspx:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> 
     </asp:ScriptManager> 
     <fieldset style="width: 200px;"> 
      <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label> 
      <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> 
      <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label> 
      <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> 
     </fieldset> 
     <div> 
     </div> 
     <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="Signup();return false;" /> 
    </div> 
    </form> 
</body> 
</html> 

<script type="text/javascript"> 
    function Signup() { 
     var email = document.getElementById('<%=txtEmail.ClientID %>').value; 
     var password = document.getElementById('<%=txtPassword.ClientID %>').value; 

     PageMethods.RegisterUser(email, password, onSucess, onError); 

     function onSucess(result) { 
      alert(result); 
     } 

     function onError(result) { 
      alert('Cannot process your request at the moment, please try later.'); 
     } 
    } 
</script>

Fuente

2011-08-17 08:39:59

+1 impresionante, este debería ser un tutorial: D –

+1 increíble, eres mi héroe = D – ch2o

Gracias @Fahad, sin embargo me sale el error: 'Error de tiempo de ejecución de Microsoft JScript: 'PageMethods' no está definido' ... el problema para mí parece estar implementando esto en una página maestra. –

Usted tendrá que hacer una llamada Ajax sospecho. Aquí hay un ejemplo de un llamado Ajax hecho por jQuery para que comiences. El Código registra un usuario en mi sistema pero devuelve un bool en cuanto a si fue exitoso o no. Tenga en cuenta los atributos ScriptMethod y WebMethod en el método de código subyacente.

en el marcado:

var $Username = $("#txtUsername").val(); 
      var $Password = $("#txtPassword").val(); 

      //Call the approve method on the code behind 
      $.ajax({ 
       type: "POST", 
       url: "Pages/Mobile/Login.aspx/LoginUser", 
       data: "{'Username':'" + $Username + "', 'Password':'" + $Password + "' }", //Pass the parameter names and values 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       async: true, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert("Error- Status: " + textStatus + " jqXHR Status: " + jqXHR.status + " jqXHR Response Text:" + jqXHR.responseText) }, 
       success: function (msg) { 
        if (msg.d == true) { 
         window.location.href = "Pages/Mobile/Basic/Index.aspx"; 
        } 
        else { 
         //show error 
         alert('login failed'); 
        } 
       } 
      });

En código subyacente:

/// <summary> 
/// Logs in the user 
/// </summary> 
/// <param name="Username">The username</param> 
/// <param name="Password">The password</param> 
/// <returns>true if login successful</returns> 
[WebMethod, ScriptMethod] 
public static bool LoginUser(string Username, string Password) 
{ 
    try 
    { 
     StaticStore.CurrentUser = new User(Username, Password); 

     //check the login details were correct 
     if (StaticStore.CurrentUser.IsAuthentiacted) 
     { 
      //change the status to logged in 
      StaticStore.CurrentUser.LoginStatus = Objects.Enums.LoginStatus.LoggedIn; 

      //Store the user ID in the list of active users 
      (HttpContext.Current.Application[ SessionKeys.ActiveUsers ] as Dictionary<string, int>)[ HttpContext.Current.Session.SessionID ] = StaticStore.CurrentUser.UserID; 

      return true; 
     } 
     else 
     { 
      return false; 
     } 
    } 
    catch (Exception ex) 
    { 
     return false; 
    } 
}

Fuente

2011-08-17 08:32:06 WraithNath

Hay varias opciones. Puede usar el atributo WebMethod, para su propósito.

Fuente

2011-08-17 08:32:31 danyloid

Voy a ir a la derecha por delante y ofrecer una solución usando jQuery, lo que significa que tendrá que importar la biblioteca si no lo ha hecho ...

Importe la librería jQuery en su página de marca- arriba:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

a continuación, crear otro * .js archivo de script (que llamo mío ExecutePageMethod, ya que es el único método que se va a exponer a) y la importación:

<script type="text/javascript" src="/ExecutePageMethod.js" ></script>

Dentro del archivo que acaba de agregar, añadir el siguiente código (recuerdo tirando esto desde otro lugar, por lo que otra persona merece el crédito por lo que realmente):

function ExecutePageMethod(page, fn, paramArray, successFn, errorFn) { 
    var paramList = ''; 
    if (paramArray.length > 0) { 
     for (var i = 0; i < paramArray.length; i += 2) { 
      if (paramList.length > 0) paramList += ','; 
      paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"'; 
     } 
    } 
    paramList = '{' + paramList + '}'; 
    $.ajax({ 
     type: "POST", 
     url: page + "/" + fn, 
     contentType: "application/json; charset=utf-8", 
     data: paramList, 
     dataType: "json", 
     success: successFn, 
     error: errorFn 
    }); 
}

A continuación, tendrá que aumentar su método de página de .NET con los atributos apropiados , tales como:

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public static string MyMethod() 
{ 
    return "Yay!"; 
}

Ahora, dentro de su página de marcado, dentro de un bloque script o de otro archivo de secuencia de comandos, puede llamar al método, así:

ExecutePageMethod("PageName.aspx", "MyMethod", [], OnSuccess, OnFailure);

Obviamente, necesitará implementar los métodos OnSuccess y OnFailure.

Para consumir los resultados, por ejemplo en el método OnSuccess, puede usar el método parseJSON, que, si los resultados se vuelven más complejos (en el caso o devolver una matriz de tipos, por ejemplo) este método lo analizará objetos:

function OnSuccess(result) { 
    var parsedResult = jQuery.parseJSON(result.d); 
}

Este código ExecutePageMethod es particularmente útil ya que reutilizable, por lo que en lugar de tener que gestionar una llamada $.ajax para cada método de la página es posible que desee ejecutar, sólo tiene que pasar la página, nombre del método y argumentos a este método.

Fuente

2011-08-17 08:38:19

¿Necesita la herramienta ScriptManager en la página para usar este método? Parece que tengo problemas con la carga de todos mis scripts cuando uso la respuesta elegida arriba. –

El Jayrock RPC library es una gran herramienta para hacer esto de una manera familliar agradable para desarrolladores de C#. Le permite crear una clase .NET con los métodos que necesita, y agregar esta clase como una secuencia de comandos (de forma indirecta) a su página. A continuación, puede crear un objeto js de su tipo y llamar a los métodos como lo haría con cualquier otro objeto.

Esencialmente oculta la implementación de ajax y presenta RPC en un formato familiar. Ten en cuenta que la mejor opción es usar ASP.NET MVC y usar jQuery ajax llamadas a métodos de acción, ¡mucho más conciso y menos lío!

Fuente

2011-08-17 08:47:14 jcvandan

cómo llamar a un método ASP.NET C# usando javascript

Respuesta

Cuestiones relacionadas