Este artículo proviene de un motor de traducción automática.

Cutting Edge

Ir más allá de los formularios HTML con AJAX

Dino Esposito

Descarga de código de la Galería de código de MSDN
Examinar el código en línea

Contenido

Formularios emergentes
Validación de Just-in-hora
Límite de envío
Guardar automáticamente formularios
AJAX Y cuando

Más allá de la exageración de experiencia de usuario mejorada, más interactividad, parpadeo de página reducido, transferencia de datos más rápida y todos los las otras mejoras promesas de AJAX, el cambio de clave que AJAX poner a la tabla es que permite control total sobre el envío de datos al servidor.

En una aplicación de AJAX pura, cualquier envío de datos de explorador para servidor pasa mediante código el desarrollador. Como el desarrollador decidir cómo publicar datos y cuándo. Además, incluso puede decidir si se debe utilizar un formulario.

Para obtener este nivel de control sobre el proceso de envío de datos en una aplicación basada en el explorador, se te pide que escribir mucho código JavaScript. De hecho, en partes anteriores de esta columna, describen las características principales de una biblioteca de JavaScript muy popular, la biblioteca jQuery, que puede ofrecerle una gran ayuda al escribir el código JavaScript grave.

Este mes, examinaré algunos escenarios relacionadas con formularios en el contexto de las aplicaciones de AJAX. Examinaré varios enfoques para implementar características como validación de almacenamiento automático, just-in-time y límite de envío. Comencemos con formularios emergentes.

Formularios emergentes

El mes pasado presenta un subconjunto de la biblioteca jQuery, la jQuery UI Library, que se diseñó específicamente para simplificar la creación de interfaces de usuario enriquecida a través de ventanas no modales y modales y dispositivos avanzados y eficaces such as accordions y las fichas.

En un contexto de la Web, sin embargo, un formulario emergente puede no ser la mejor solución para mostrar los datos que resulta de operaciones con más detalle. La ventana emergente normalmente se crea con el explorador de API, por lo general, el método window.open y está sujeta a la directiva de Bloqueador de elementos emergentes que el usuario tiene para ese sitio. El fragmento de código siguiente muestra cómo forzar el explorador para mostrar una ventana emergente:

window.open(url, 'Sample', 'width=400,height=300,scrollbars=yes'); 

El control emergente mostrará la página especificada en la dirección URL y puede exponer datos a cualquier otra página en la aplicación. Puede pasar datos el control emergente de utilizando la cadena de consulta; como alternativa, puede recuperar campos de entrada del formulario principal a través de la propiedad opener del objeto de ventana. Se llama al objeto de ventana desde la página mostrada en el control emergente, así:

var text = window.opener.document.Form1["TextBox1"].value;

Desde la propiedad opener tener acceso al modelo de objetos del formulario opener y leer el contenido de un formulario particular mediante el DOM de HTML

La infracción de elemento emergente y pop-en formularios en Web publicidad a los desarrolladores explorador led presentan las características para controlar la proliferación de tales ventanas. Como resultado, incluso el uso legítimo de elementos emergentes para transmitir información para el usuario es perder atractivo y convertirse en casi imposible.

Hoy en día, los formularios de emergentes en las aplicaciones Web son principalmente superior DIV contenido que aparece de forma modal, después haga clic en los elementos por debajo de la capacidad de deshabilitar. La interfaz de usuario del control emergente de necesariamente no pertenece a una página independiente; más a menudo de no, es sólo parte de la página que lo muestra. Puede ser una etiqueta DIV inicialmente oculta que estará visible cuando se ejecute el código de secuencia de comandos adecuado.

Desde dicha una pseudo emergente ventana, puede obtener acceso fácilmente a cualquier elemento de la página como el contenido de la ventana emergente pseudo ya forma parte de la página. Inicializar los elementos de entrada, por lo tanto, ya no es un problema.

Bibliotecas eficaces como la jQuery interfaz de usuario también ofrecen instalaciones para controlar el aspecto de estos elementos emergentes para que parezcan como los cuadros de diálogo de Windows clásicos. (Consulte la figura 1 ).

El marcado que se coloca en el menú emergente puede o no puede incluir una etiqueta de formulario. Por supuesto, no puede incluir los elementos de formulario en el servidor adicional mientras la página host sea una página ASP.NET. Un elemento de formulario HTML (devoid del runat = servidor atributo) se pueden insertar si la página es clásico ASP.NET o MVC de ASP.NET. Si el control emergente contiene una etiqueta de formulario, a continuación, se pueden aprovechar de las funciones del explorador envío para publicar datos en la dirección URL de acción de opciones. De lo contrario, contabilización es siendo posible, pero debe escribir el código.

Figura 1 A cuadro de diálogo de ejemplo creados con jQuery 1.7 de interfaz de usuario

Puede recorrer los campos de entrada, preparar el cuerpo de una solicitud HTTP y contabilizar hacer mediante el objeto XMLHttpRequest directamente o cualquier abstracción de ella como (la $ .AJAX función en jQuery.) o el objeto de Sys.Net.WebRequest en la biblioteca de cliente Microsoft AJAX

Por último, para conservar el contenido del menú emergente físicamente separado del resto de la página de ASP.NET, quizás desee definirlo en un control de usuario ASCX, así:

<div id="DialogBox1">
  <cc1:YourUserControl runat="server"     ID="DialogBox1_Content" />
</div>

Este método se puede obtener en ambos ASP.NET clásico y en las páginas de ASP.NET MVC.

Validación de Just-in-hora

Es bastante habitual que es necesario para notificar al usuario de los valores incorrectos antes de enviar un formulario Web. Notificar al usuario de la entrada incorrecta es un trabajo que los controles de validación de ASP.NET lo bastante bien. El ValidatorCalloutExtender en AJAX Control Toolkit, a continuación, también puede realizar las advertencias de entrada no válidas atractivo, como se ver en la figura 2 .

La Figura 2 Extender de control de validación en una interfaz de usuario

Controles de validación ASP.NET trabajar validar el contenido completo del formulario cuando lo envía. En la versión actual de ASP.NET, no hay ningún asincrónica validador personalizado que permite el código de cliente validar los campos con respecto a una regla de servidor (personalizado). Tal componente, sin embargo, puede liberarse en versiones futuras de ASP.NET.

En resumen, para detectar e informar de los valores incorrectos para el usuario tiene dos enfoques posibles. En primer lugar, se puede asociar un validador asincrónica cualquier campo de entrada y los mensajes de error de informe como el valor de los cambios del campo. En segundo lugar, se puede validar el contenido del formulario como un todo. Este segundo enfoque puede implementarse en un par de maneras diferentes: simplemente se puede enviar el formulario de la forma habitual mediante el explorador y esperar la respuesta del servidor, o puede asincrónicamente y mediante programación enviar el contenido del formulario, incluso contenido parcial, con comentarios anticipado. Vamos a revisar los distintos enfoques y ver cómo aprovechar las ventajas de capacidades de AJAX.

En ASP.NET, hay una serie de controles de validador predefinidos que aplican reglas fijas al contenido del campo y determinar si la entrada es válida o no. Controles de validación de ejemplo realizan comprobaciones como si un campo se deja vacío, una fecha está dentro de un intervalo determinado, o algún contenido es igual a un valor determinado o coincide con una expresión regular dada. Todas estas comprobaciones cubren las necesidades de validación comunes. Sin embargo, la comprobación más comunes debe realizarse en el servidor y requiere una conexión de base de datos, un flujo de trabajo o, quizás, un servicio Web. Para todos estos casos, ASP.NET proporciona el control CustomValidator.

CustomValidator es un control excelente que le permite especificar tanto una función de JavaScript de cliente y un método de servidor para comprobar los comentarios de valor y el informe en el nivel de interfaz de usuario. Ajusta correctamente hacia arriba en una actualización de AJAX de panel, el control CustomValidator también puede devolver su respuesta asincrónicamente, evitar una actualización de página completa. El único inconveniente de la CustomValidator es que, al igual que cualquier otro control de validación, no compruebe el valor hasta que se envía el formulario. Vamos a, considere el código en la figura 3 .

Figura 3 una implementación de panel de actualización

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
  <ContentTemplate>
    <asp:TextBox ID="TextBox1" runat="server" 
                 AutoPostBack="true" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" 
                 Display="Dynamic" 
                 ControlToValidate="TextBox1" 
                 SetFocusOnError="true" 
                 ErrorMessage="Invalid ID"
                 OnServerValidate=" CustomValidator1_Validate" >
   </asp:CustomValidator> 
 </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Submit" />

La página envía espera cuando el usuario edita el contenido del cuadro de texto. Una instancia CustomValidator está asociada con el cuadro de texto y sabe cómo validar el contenido. La actualización de panel garantiza que una devolución de datos generará sólo una actualización parcial. Por desgracia, este código no produzca los resultados esperados. La página envía espera que se modifica el cuadro de texto, pero ninguna validación nunca aparece. Para desencadenar el validador personalizado, el usuario necesita insertar el botón de envío.

El problema es que ninguna ruta de acceso del código conduce a la invocación del método Validate en la clase de página fuera del proceso de envío de formulario clásico. Para solucionar esto, debe comprobar si una devolución de datos asincrónica está ocurriendo y invocar validar usted mismo, como se muestra a continuación:

protected void Page_Load(object sender,     EventArgs e)
{
    if (ScriptManager1.IsInAsyncPostBack)
    {
        this.Validate();
    }
}

El método Validate, a su vez, recorrerá los controles de validación en la página y un informe acerca de los valores incorrectos en la página.

Si su objetivo es informar de errores de entrada tan pronto como sea posible, sólo alternativa al enfoque anterior es agregar algún código JavaScript a campos de entrada críticos. A continuación puede ver un ejemplo:

 <asp:TextBox ID="TextBox1" runat="server" 
              onchange="__doValidation(this)" />

En un cuadro de texto, el evento onchange no se desencadena mientras el usuario está escribir, pero sólo cuando el usuario aplica tabulaciones fuera del cuadro de texto y implícitamente confirma los cambios. En el fragmento de código anterior, se ejecuta un controlador de JavaScript para realizar la una validación remota mediante XMLHttpRequest. Este es el código para el controlador de JavaScript:

<script type="text/javascript">
    function __doValidation(textBox) {
        var text = textBox.value;
        PageMethods.PerformValidation(text, onComplete);
    }

    function onComplete(results) {
        if (results == false)
            $get("Label1").innerHTML = "Invalid ID";
        else
            $get("Label1").innerHTML = "";
    } </script>

Como puede ver, en el ejemplo se utiliza un método de página ASP.NET para definir el extremo HTTP que se va a invocar. Cualquier extremo tal es bien, como un método de servicio WCF, un método de servicio Web o un servicio REST. La respuesta que recibe del extremo HTTP puede ser un valor de tipo Boolean o una parte del formato HTML. En el primer caso, la lógica que actualiza la interfaz de usuario reside en el cliente (y puede ser realmente sencillo); en este último caso, es necesaria más sofisticado lógica en el servidor.

Si no necesita que se va a validar los campos de entrada individualmente y puede Espere comentarios hasta que se envía el formulario completo, entonces la cosa más sencilla que puede hacer es utilizar validadores dentro de un control UpdatePanel de ASP.NET. En este caso, se tenga en cuenta que se deben colocar los controles de validación y controles de entrada en el mismo panel.

Como alternativa a parcial representación para contabilización y validar el contenido de un formulario, puede considerarse una biblioteca de AJAX such as jQuery en combinación con el complemento de formulario y la validación. Se trata un ejemplo en el artículo" Combinación de validación de formulario JQuery y envío de AJAX con ASP.NET."

En general, creo que cheques individuales son preferibles porque detectar valores incorrectos inmediatamente y se puede ajustar el formulario dinámicamente para reflejar la entrada actual. Por el momento, deberá usar JavaScript o quizás realice la representación parcial con controles de devolución de datos automáticamente.

Si desea validar todo el formulario de forma asincrónica, sigue creo que el uso clásicos controles de validación ASP.NET con la representación parcial es la opción más sencilla. Igualmente eficaz es cualquier solución de que se serializa el contenido del formulario en una cadena y envía a un extremo HTTP mediante la biblioteca de AJAX de elección. Como verá en un momento, serialización personalizada y contabilización de un formulario se proporciona para las características más avanzadas.

Límite de envío

Con AJAX, ya no tiene sólo una forma de publicar el contenido de un formulario en el servidor Web. Puede hacerlo sin duda explícitamente a través de un botón de envío, o mediante programación a través del método de envío del objeto Form DOM de HTML. Lo que es más importante, sin embargo, puede considerar enviar contenido al servidor en fragmentos y en múltiples pasos en lugar de todos a la vez. Pattern-Wise, si opta por para enviar todo el contenido de un formulario a la vez, a continuación, va a aplicar la trama de "envío explícito"; de lo contrario, limitación de su envío mediante el modelo de "envío límite" (a corto plazo).

El modelo a corto plazo demuestra útil para el impacto de las operaciones de cliente que colocar a la presión en el servidor, incluidas las operaciones que producen frecuentes viajes de ida y vuelta de suavizado. De este modo el ST diseño de la estrategia clave para implementar características interesantes, como formularios de guardar automáticamente.

En pocas palabras, la trama a corto plazo sugiere caché el contenido que enviar en un búfer del explorador y enviar por partes, en varios pasos. El ejemplo canónico es el motor de finalización automática. Cuando el usuario escribe en un cuadro de texto, se realiza una solicitud al servidor para que las sugerencias. Es fácil saber que el número de solicitudes que el servidor Web de aciertos en momentos de máxima es muy alto.

Para llegar a un compromiso razonable entre la capacidad de respuesta de la aplicación y la carga de trabajo del servidor Web, quizás desee tomar el control sobre el proceso de envío. Para comprender la limitación de peticiones, examinemos el código fuente de extensor de Autocompletar de Microsoft, que va encontrar en AJAX Control Toolkit.

El extensor de Autocompletar envía una solicitud de sugerencias cuando el usuario escribe en el cuadro de entrada. En función de esto, uno esperaría un controlador para el evento keypress que llama el servicio Web especificado. Sin embargo, detenimiento el código fuente revela que funciona de forma diferente, como se ilustra la figura 4 .

Figura 4 devoluciones de datos controladas por un temporizador

// Handler for the textbox keydown event
onKeyDown: function(ev) 
{
    // A key has been pressed, so let's reset the timer
    this._timer.set_enabled(false);

    // Is it a special key?
    if (k === Sys.UI.Key.esc) {
       ...
    }
    else if (k === Sys.UI.Key.up) {
       ...
    }
       ...
    else {
       // It's a text key, let's start the timer again 
       this._timer.set_enabled(true);
    }     
}

El extensor usa un temporizador interno configurado para un intervalo de un segundo de (de forma predeterminada). El temporizador se inicia cuando el cuadro de texto recibe el foco de entrada. Tan pronto como está presionada una tecla, se detiene el temporizador y comienza un análisis de la clave. Si la clave es uno con un significado especial, como ENTRAR, ESC, TAB o una tecla de dirección, el extensor continúa con su propio código. Si la tecla presionada indica contenido para introducirse en el búfer de cuadro de texto, a continuación, se inicia el temporizador.

El temporizador se detenga y reinicie cada vez que se escribe una clave real. Si deja de escritura para un segundo (o el intervalo se configura), a continuación, en el paso del temporizador, se envía el contenido real del campo de entrada al recibir sugerencias. No es un cambio importante para los usuarios, pero es una gran noticia para el servidor porque se produce ninguna devolución de datos hasta que el usuario escribe. Si el usuario tarda un salto de uno de segundo, que caduque el temporizador y, a continuación, se realiza la devolución de datos.

Los temporizadores son una herramienta eficaz en JavaScript porque su comportamiento asincrónico inherentes a se puede aprovechar para simular el subprocesamiento múltiple. Creando un temporizador en JavaScript, está indicando el intérprete para ejecutar el código asociado tan pronto como sea posible, pero no inmediatamente. Si el código es bastante sencilla y el intervalo de temporizador apropiado, a continuación, el intérprete podrán programar la ejecución correctamente, por tanto, avance múltiples tareas simultáneamente.

Guardar automáticamente formularios

No es inusual en aplicaciones de AJAX que el usuario emplea mucho tiempo trabajando en un único formulario, pero sin enviar los los datos del servidor Web durante un tiempo. El servidor Web no tiene ninguna forma de averiguar lo que sucede en el cliente. Posteriormente, si no recibe solicitudes durante un período de tiempo, sólo puede tener el tiempo de espera sesión de servidor. Por lo tanto, cuando el usuario, por último, envía el formulario completado al servidor, obtendrán una sorpresa desagradables (un mensaje de tiempo de espera).

Para evitar, la aplicación cliente envía un mensaje de "latidos" mediante XMLHttpRequest con una frecuencia adecuada. Un mensaje de latido puede tener cualquier formulario y el contenido que sea adecuado para el escenario en particular. Por ejemplo, puede ser una solicitud vacía que sólo muestra que el cliente sigue funcionando y que tiene el único objetivo de mantenerse la sesión del servidor y ejecutar. (En este caso, si el intervalo debe ser de cualquier longitud que es más corto que el tiempo de espera configurado para la aplicación de sesión.)

El latido incluso puede incluir el contenido actual, posiblemente, parcial, del formulario. Este tipo de contenido se carga periódicamente y almacena en caché en el servidor espera el momento apropiado procesar se. La idea general no es muy diferente de la característica de guardado automático de Microsoft Office Word, donde guarda periódicamente el documento abierto a disco para evitar la pérdida de datos.

A través del Web, guardar automáticamente formularios tienen un comportamiento mucho menos definido y, su implementación interna es izquierda en gran medida a las necesidades del desarrollador y creatividad. Los formularios de guardar automáticamente son esencialmente formularios endowed la posibilidad de publicar periódicamente su contenido en una dirección URL. La dirección URL receptor se controle, a continuación, datos y normalmente, la caché para el usuario actual. la figura 5 muestra un ejemplo.

La figura 5 de implementación de una forma de guardar automáticamente

<script type="text/javascript">
    var _myTimerID = null;
    var _userID = null;
    function enableAutoSave(id) {
        _userID = id;
        _myTimerID = window.setInterval(__doAutoSave, 10000);
    }

    function __doAutoSave() {
        var body = "ID='" + _userID + "'&" +
                   "TextBox2='" + $get("TextBox2").value + "'&" +
                   "TextBox3='" + $get("TextBox3").value + "'&" +
                   "TextBox4='" + $get("TextBox4").value + "'";

        PageMethods.AutoSave(_userID, body, onComplete);
    }

    function onComplete(results) {
        $get("Msg").innerHTML = "<i>Form auto-saved for user '" + 
              _userID + "' at " + results + ".</i>";
    }
</script>

<body>
    ...
</body>

// In the code-behind class ...
protected void Button1_Click(object sender, EventArgs e)
{
    string user = TextBox1.Text;

    // Populate input fields if any previously entered 
    // data is available
    string body = AutoSaveAPI.Read(user);
    if (!String.IsNullOrEmpty(body))
    {
        Dictionary<string, object> data = body.ParseToDictionary();
        TextBox2.Text = data["TextBox2"] as string;
        TextBox3.Text = data["TextBox3"] as string;
        TextBox4.Text = data["TextBox4"] as string;
    }

    // Re-enable auto-save for this editing session
    string script = "enableAutoSave('" + user + "');";
    ScriptManager.RegisterStartupScript(this, this.GetType(), 
                  "myTimer", script, true);
}

[WebMethod]
public static string AutoSave(string id, string body)
{
    AutoSaveAPI.Save(id, body);
    return DateTime.Now.ToString();
}

Una vez que el usuario se desplaza hasta el formulario, la clase codebehind carga los datos especificados anteriormente para ese formulario.Normalmente, los datos se leen de la caché o de cualquier otro origen de elección.En la figura 5, el almacenamiento está oculto detrás de la interfaz de la clase AutoSaveAPI.Leer la información se utiliza para rellenar los campos de entrada en el formulario.

Para habilitar guardar automática en una nueva sesión de entrada de datos, emite una línea de secuencia de comandos que activa un temporizador.Al incluir marcas el temporizador, la devolución de llamada recopila los valores actuales de los campos distintos y crea una cadena.La cadena a continuación, se transfiere mediante XMLHttpRequest.Puedes cargar se a un servicio de Web, una dirección URL sin formato mediante un enfoque REST, o incluso a un método de página.Dado un formulario de almacenamiento automático es un componente específico de una página determinada, con un método de página es la solución ideal porque es limitado de página, eficaz y fácil a código.Figura 6 muestra un formulario de almacenamiento automático en acción.

Figura 6 un formulario de guardar automáticamente en acción

AJAX Y cuando

Con AJAX, la etiqueta de formulario HTML anterior tiene algunas revisiones.Con el estándar HTML 5.0 próximo, un nuevo conjunto de entradas como dirección URL, fecha y correo electrónico tratar forma nativa con los exploradores.Esto reducirá el número de los casos para que se requiere secuencias de comandos y controles de validación.Esta evolución de HTML le permitirá centrarse en la validación en el servidor, que debe ser asincrónica en aplicaciones de AJAX.

Envíe sus preguntas y comentarios para Dino adirección cutting@microsoft.com.

Dino Esposito es un arquitecto en IDesign y el coautor de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008).Basándonos en Italia, Dino es un orador frecuente en eventos del sector en todo el mundo.Puede combinar su blog enweblogs.asp.NET.