WebMethods desde una pagina ASPX y llamarlo desde JQuery.

Abrimos nuestro Visual Studio y creamos un nuevo proyecto Vacio, en cual seleccionamos un nombre y presintamos en el boton Aceptar para crear el proyecto.

image 

Clic derecho sobre el nombre del proyecto luego en –>Agregar -> Nuevo elemento –> y se abrirá un cuadro.

image

ahora mostrando el cuadro seleccionamos “Formulario Web Forms” le ponemos un nombre en este caso le pongo “Defaul.aspx” y presionar el botón de “Agregar”

image

 

En el codigo ASP agregamos 2 cajas te texto y boton con la finalidad de que en una caja de texto se escriba nuestro nombre y la otra el saludo y boton que accione la llamada al WebMethod que enseguida se describira.

    <form id="form1" runat="server">
    <div>
        <input id="txtNombre" />
        <input id="btnAceptar" type="button" value="Saludar" />
        <input id="txtResultado" />
    </div>
    </form>

ahora en la parte de código de C# agregamos la siguiente referencia

<code>using System.Web.Services;

y sobre el mismo código C# de nuestra pagina crear un método estático y usamos “[WebMethod]” para poder accesarlo. en nuestro método lo que va hacer es recibir un parámetro llamado nombre y enseguida lo concatena para saludarlo.

[WebMethod]
        public static string Saludo(string nombre)
        {
            return "Hola " + nombre;
        }

Agregamos un archivo vacio de JavaScript donde tendrá nuestra llamada

image

escribimos el siguiente Código:

$(document).ready(function () {
    //evento click en el boton
    $("#btnAceptar").click(function () {
            //obtenemos el texto escrito de la primera caja de texto
            var nombre = $("#txtNombre").val();
            //creamos una llamada a AJAX
            $.ajax({
                //Definimos la URL donde se encuentra la llamada al metodo
                url: "/Default.aspx/Saludo",
                //los datos a enviar, en formato JSON
                data: '{nombre: "' + nombre + '" }',
                //el tipo de dato
                dataType: "json",
                //lo enviaremos a traves del medodo POST
                type: "POST",
                //el tipo de contenido usamos JSON
                contentType: 'application/json; charset=utf-8',
                //en caso de exito y hay valor de retorno
                success: function (response) {
                    $("#txtResultado").val(response.d);
                    
                },
                //en el caso de error mostramos el error ocurrido.
                error:
                function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                },
            });
    });

});

Ahora en la cabecera de nuestra pagina ASPX agregamos lo siguiente líneas de código, entonces quedaría de la siguiente manera.

<head runat="server">
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
 <script src="Saludo.js"></script>

Ahora ejecutamos nuestra pagina.

image

y escribimos nuestro nombre en la primera caja de texto y luego presionar el boton “Saludar ” y ver el resultado.

image

En caso de algún error cuando estemos trabajando en un proyecto mas robusto agregar lo siguiente a nuestro archivo de configuración “Web.config”:

<webservices>
        <protocols>
           <add name="HttpGet" /> 
          <add name="HttpPost" />
        </protocols>
      </webservices>

Entonces nuestro WebConfig quedaría así:

<configuration>
   <system.web>
    <compilation targetframework="4.5" debug="true" />
    <httpruntime targetframework="4.5" />
     <!--Agregar para los servicios.-->
      <webservices>
        <protocols>
           <add name="HttpGet" /> 
          <add name="HttpPost" />
        </protocols>
      </webservices>
  </system.web>
</configuration>

Espero que les haya gustado, hasta la próxima.

 

Download

Deja un comentario