ASP.Net: Cómo obtener datos del servidor sin hacer postback con C#

En las aplicaciones web modernas requerimos hacer pedidos al servidor sin tener que hacer un postback completo. Esto es posible utilizando AJAX (Asynchronous JavaScript and XML) que nos permite comunicarnos con el servidor sin hacer un postback completo. AJAX puede ser usado para refrescar áreas de la aplicación web, para grabar información en una base de datos, en fin, puedes hacer cualquier tipo de pedido al servidor sin el postback. En este artículo voy a estar mostrando cómo se utiliza AJAX con ASP.Net, C# y JQuery.

Supongamos que tenemos un formulario para una tienda y necesitamos el nombre, apellido y número telefónico del cliente. En esta forma, cuando hagamos clic en el botón de guardar, debemos almacenar la información en la base de datos y notificar al usuario que guardó la información o si hubo algún tipo de error.

Muy bien, empecemos con el código de ASP.Net para crear el formulario.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Nombre:</td>
                <td><asp:TextBox ID="txtNombre" runat="server" /></td>
            </tr>
            <tr>
                <td>Apellido:</td>
                <td><asp:TextBox ID="txtApellido" runat="server" /></td>
            </tr>
            <tr>
                <td>Número telefónico:</td>
                <td><asp:TextBox ID="txtNumTel" runat="server" /></td>
            </tr>
            <tr>
                <td><input type="button" id="btnGuardar" value="Guardar" /></td>
                <td><label id="lblMensaje" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Ya tenemos el formulario creado. Lo próximo que necesitamos es crear el evento para cuando el usuario presione el botón de Guardar, el sistema guarde la información en la base de datos sin hacer un postback. Para este paso usamos JQuery, una librería de javascript que nos simplifica manipular eventos, animaciones, AJAX, etc.

$('#btnGuardar').click(function (e) {
    e.preventDefault(); // Usamos esta línea para cancelar el postback que el botón crea

    var parametros = {
        nombre: $('#txtNombre').val(),
        apellido: $('#txtApellido').val(),
        numtel: $('#txtNumTel').val()
    };

    // Ahora hacemos la llamada tipo AJAX utilizando jQuery
    $.ajax({
        type: 'POST',                               // tipo de llamada (POST, GET)
        url: 'default.aspx/guardar',                // el URL del método que vamos a llamar
        data: JSON.stringify(parametros),           // los parámetros en formato JSON
        contentType: "application/json; charset=utf-8",
        dataType: "json",                           // tipo de datos enviados al servidor
        success: function () {                      // función que se va a ejecutar si el pedido resulta exitoso
            $('#lblMensaje').text('La información ha sido guardada exitosamente.');
        },
        error: function (req, stat, err) {          // función que se va a ejecutar si el pedido falla
            var error = eval("(" + req.responseText + ")");
            $('#lblMensaje').text(error.Message);
        }
    });
});

Perfecto. Lo que nos falta es crear el código de servidor en C# para procesar el pedido. Tenemos que crear un WebMethod el cual ejecute cualquier acción que deseemos. En este caso es guardar la información en la base de datos.

[System.Web.Services.WebMethod]
public static void Guardar(string nombre, string apellido, string numtel)
{
    // Logica para validar los parámetros y guardar los datos
}

Resumen

En este artículo hicimos 3 cosas. Creamos el código ASP.Net para crear el formulario, creamos el código de javascript utilizando jQuery para hacer el pedido AJAX y creamos el código de servidor en C# para procesar el pedido. Este es un ejemplo sumamente sencillo el propósito es solo demostrar lo fácil que resulta usar AJAX en nuestras aplicaciones web.

Descarga el código de la demostración.

Deja tu comentario