Eventos del lado del servidor

Continuando con la serie sobre Ext.Net, hoy revisaremos como se implementa un evento del lado del servidor, si te has perdido las dos primeras entregas puedes revisarlas:

1. Primeros pasos con Ext.Net y Visual Web Developer Express
2. Layout Básico y Validaciones con ExtNet

Manejadores de Eventos

Un manejador de un evento de Ext.Net tiene la siguiente estructura:

protected void guardar_Click(object sender, DirectEventArgs e)
{
...
}

Los valores enviados desde el formulario están almacenadas en una colección llamada ExtraParams que básicamente es un conjunto de pares (clave, valor), donde clave es un nombre que se especifica para el parámetro y valor es la información contenida en el mismo, es desde esta colección donde podemos acceder a los valores del lado del servidor para poder realizar alguna operación.

Declarando un evento del lado del servidor

Utilizaremos el código de la entrada anterior cuando se revisó el layout básico y validaciones, tenemos un formulario en donde se ingresan los siguientes datos:

• Numero de carné
• Nombres
• Email y
• Edad

Cuando se presiona el botón Aceptar y, habiendo el usuario ingresado los datos obligatorios según las validaciones en el cliente de cada control. se procede al envío de la entrada del usuario hacia el servidor, para ello se declara un evento para el botón Guardar:

<DirectEvents>
    <Click OnEvent="guardar_Click" Before="return #{datosEstudiante}.getForm().isValid();" Success="envioExitoso(result);" Failure="envioFallido">
            <EventMask ShowMask="true" />
            <ExtraParams>
                 <ext:Parameter Name="numeroCarne" Value="#{numeroCarne}.getValue()" Mode="Raw"></ext:Parameter>
                     <ext:Parameter Name="nombre" Value="#{nombre}.getValue()" Mode="Raw"></ext:Parameter>
                     <ext:Parameter Name="correoElectronico" Value="#{correoElectronico}.getValue()" Mode="Raw"></ext:Parameter>
                     <ext:Parameter Name="edad" Value="#{edad}.getValue()" Mode="Raw"></ext:Parameter>
            </ExtraParams>
   </Click>
</DirectEvents>

OnEvent, establece el nombre del método que se ejecuta en el servidor.
Before, contiene código en JS que se ejecutar antes del envió de los datos del formulario.
Success, define la función JS que se ejecutara luego que termine el procesamiento del lado del servidor y se devuelva la respuesta al cliente.

Failure, si existió algún error en el procesamiento de los datos la función definida en esta propiedad lo manejará

Y en nuestro código para el evento Click, se puede acceder al valor del numero de carné mediante su clave:

string numeroCarne = (string)e.ExtraParams["numeroCarne"];

StringBuilder sb = new StringBuilder();
sb.AppendLine("Se ha recibido la siguiente informacion:");
sb.AppendFormat("Número de Carné : {0} ", numeroCarne);
sb.AppendFormat("Nombre : {0} ", e.ExtraParams["nombre"]);
sb.AppendFormat("Email : {0} ", e.ExtraParams["correoElectronico"]);
sb.AppendFormat("Edad : {0} ", e.ExtraParams["edad"]);
sb.AppendFormat("a las {0} ", DateTime.Now);

e.ExtraParamsResponse["mensajeConfirmacion"] = sb.ToString();

Luego se estructura una cadena con los valores de cada uno de los parámetros el cual será enviada al cliente dentro de otra colección llamada ExtraParamsResponse que tiene la misma estructura que ExtraParams, con la diferencia de que estos valores se los puede obtener desde el cliente.

var envioExitoso = function (response) {
    Ext.Msg.alert('Información', response.extraParamsResponse.mensajeConfirmacion);
};

Hemos cubierto en esta entrada la forma en que Ext.net envía y recibe datos desde el servidor, en la siguiente entrada veremos el tema de DirectEvents DirectMethods que es otra forma de manejar eventos enviar datos al servidor.

Hasta la próxima.

Links útiles:

How the web works: HTTP and CGI explained

Código completo del ejemplo.

Advertisement