Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Cómo: Implementar la validación remota en ASP.NET MVC

ASP.NET MVC 3 proporciona un mecanismo que puede realizar una llamada al servidor remoto para validar un campo de formulario sin enviar todo el formulario al servidor. Esto resulta útil si se tiene un campo que no se puede validar en el cliente y, por consiguiente, es probable que se produzca un error en la validación cuando se envía el formulario. Por ejemplo, muchos sitios web exigen que se registre utilizando un Id. de usuario único. Para los sitios muy populares, puede que sean necesarios varios intentos para encontrar un Id. de usuario que aún no se use, y la entrada del usuario no se considera válida hasta que todos los campos sean válidos, incluido el Id. de usuario. Si se puede validar remotamente, el usuario no tiene que enviar el formulario varias veces antes de encontrar un identificador disponible.

La siguiente ilustración muestra un formulario de nuevo usuario que muestra un mensaje de error que indica que el identificador solicitado no está disponible. El identificador que escriben los usuarios se valida en cuanto dejan el cuadro de texto Nombre de usuario (es decir, cuando el cuadro de texto pierde el foco). La validación no requiere una devolución (postback) completa.

Validación remota de Id. de usuario

Como ejemplo de validación remota, este tema muestra cómo implementar un formulario similar al de la ilustración anterior. El ejemplo puede servir como punto de partida para crear su validación remota específica de la aplicación.

Un proyecto inicial de Visual Studio y un proyecto de solución completado están disponibles para acompañar este tema: Descargue.

Crear el proyecto inicial

  1. Cree un nuevo proyecto de ASP.NET MVC 3 mediante la sintaxis Razor siguiendo las instrucciones de Creating a MVC 3 Application with Razor and Unobtrusive JavaScript. También puede abrir el proyecto inicial de aplicación web de ASP.NET MVC que se incluye en la descarga mencionada anteriormente.

  2. Ejecute la aplicación y haga clic en el vínculo Crear nuevo.

  3. En el cuadro de texto nombreDeUsuario, escriba un nombre de usuario existente como "BenM".

  4. Especifique los valores de los campos restantes y haga clic en Crear.

    La siguiente imagen muestra el mensaje de error que se produce al enviar un nombre de usuario que no es único.

    Crear errores completos

    Según está configurada actualmente, la página realiza una devolución (postback)completa al servidor. En el servidor, el nombre de usuario no es único, de modo que se genera una excepción y se vuelve a Entity Framework. El proceso de enviar la página al servidor, intentar realizar una actualización de la base de datos, detectar una excepción y devolver un mensaje de error puede tardar bastante tiempo.

    SugerenciaSugerencia:

    Puede utilizar Fiddler o Firebug para mostrar que los errores de validación del cliente los administra el cliente y no se envían al servidor.

Examinar el código de validación

  1. En el proyecto, abra el archivo Mvc3RemoteVal\Models\UserModel y examine el contenido.

    Los atributos StringLengthAttribute, RegularExpressionAttribute y RequiredAttribute proporcionan validación del lado cliente y del lado servidor para el modelo de usuario. Para obtener más información, vea Cómo: Validar los datos del modelo mediante los atributos de DataAnnotations.

  2. Examine el archivo Mvc3RemoteVal\Views\Shared\_Layout.

    La sección head del HTML incluye elementos de script que hacen referencia a scripts de jQuery necesarios para la validación del lado cliente mediante los atributos del espacio de nombres System.ComponentModel.DataAnnotations. Las referencias de script señalan a la red de entrega de contenido (CDN) de Microsoft Ajax. Aprovechando CDN de Microsoft Ajax, puede mejorar significativamente el rendimiento de las aplicaciones Ajax. El contenido de CDN de Microsoft Ajax se almacena en memoria caché en servidores que se encuentran en todo el mundo. Además, CDN de Microsoft Ajax permite que los exploradores reutilicen los archivos JavaScript almacenados en memoria caché para los sitios web que se encuentran en dominios diferentes. CDN de Microsoft Ajax admite SSL (https://) en caso de que necesite servir una página web mediante la Capa de sockets seguros.

  3. Abra el archivo Mvc3RemoteVal\Web.config.

    El elemento appSettings contiene las siguientes claves para habilitar la validación del cliente y de JavaScript discreto.

    <appSettings>
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
    

    También puede habilitar o deshabilitar esta configuración llamando a ClientValidationEnabled y EnableUnobtrusiveJavaScript(Boolean). Si esas líneas de código se encuentran en el archivo Global.asax, habilitan o deshabilitan la validación del cliente y de JavaScript discreto para toda la aplicación. Si el código aparece en un controlador o una vista, se habilitará la validación del cliente y de JavaScript discreto o solo para la acción actual.

    NotaNota:

    Dado que no se emite JavaScript al utilizar la validación del cliente discreta, si se le olvida incluir los scripts de validación, no verá ningún error cuando se cargue la página. El único resultado es que los valores del formulario no se validarán en el explorador.

  4. Opcionalmente, deshabilite el script de cliente en el explorador, ejecute la página de nuevo y escriba datos que infrinjan las restricciones de validación.

    Cuando deje el campo que contiene datos no válidos, no verá un error de validación porque está deshabilitado el scripting. Dado que ASP.NET MVC está utilizando JavaScript discreto, no verá los errores del script del lado cliente. Sin embargo, se realiza la validación de servidor al enviar el formulario. (Es recomendable probar la aplicación web con un explorador que tenga deshabilitado el scripting).

Esta sección describe cómo agregar validación remota para comprobar que el nombre de usuario que se escribió es único. Si el nombre de usuario no es único, el servidor sugiere un nombre de usuario único.

Configurar la validación remota en el servidor

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta Controllers, haga clic en Agregar y, a continuación, haga clic en Controlador.

  2. Asigne un nombre como ControladorDeValidación al controlador. Podría agregar este método de acción a cualquier controlador, por ejemplo al controlador Home. Sin embargo, un procedimiento recomendado es colocar la validación en su propio controlador para separar los problemas y facilitar las pruebas.

  3. Reemplace el contenido de la clase de controlador de validación con el siguiente código:

    using System;
    using System.Globalization;
    using System.Web.Mvc;
    using System.Web.UI;
    using Mvc3RemoteVal.Models;
    
    namespace Mvc3RemoteVal.Controllers {
        [OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
        public class ValidationController : Controller {
    
            IUserDB _repository;
    #if  InMemDB
              public ValidationController() : this(InMemoryDB.Instance) { }
    #else
            public ValidationController() : this(new EF_UserRepository()) { }
    #endif
    
    
            public ValidationController(IUserDB repository) {
                _repository = repository;
            }
    
            public JsonResult IsUID_Available(string Username) {
    
                if (!_repository.UserExists(Username))
                    return Json(true, JsonRequestBehavior.AllowGet);
    
                string suggestedUID = String.Format(CultureInfo.InvariantCulture,
                    "{0} is not available.", Username);
    
                for (int i = 1; i < 100; i++) {
                    string altCandidate = Username + i.ToString();
                    if (!_repository.UserExists(altCandidate)) {
                        suggestedUID = String.Format(CultureInfo.InvariantCulture,
                       "{0} is not available. Try {1}.", Username, altCandidate);
                        break;
                    }
                }
                return Json(suggestedUID, JsonRequestBehavior.AllowGet);
            }
    
        }
    }
    

    El código contiene un constructor que inicializa el controlador de validación que tiene un parámetro de interfaz de repositorio de datos. El constructor imita al constructor del controlador Home en el modo de inicializar el repositorio de datos. Si desea trabajar con un almacén de datos diferente, puede cambiar las propiedades de proyecto para que no se defina la constante de compilación InMemDB. En ese caso, Entity Framework y una base de datos de SQL Server se utilizan como repositorio de datos. Las pruebas unitarias incluidas en el proyecto descargable utilizan el almacén de datos en memoria.

    El atributo OutputCacheAttribute es necesario para evitar que ASP.NET MVC almacene en caché los resultados de los métodos de validación.

    El método IsUID_Available comprueba que el nombre de usuario propuesto es único. Si el nombre de usuario enviado es único, el método devuelve true como contenido con formato JSON. Si ya se usa el nombre de usuario enviado, el método intenta encontrar un nombre único anexando un entero al nombre enviado. Si se encuentra un nombre único, el método devuelve el nombre sugerido como contenido con formato JSON. Cualquier respuesta distinta de true se considera false, de modo que el cliente muestra el mensaje devuelto como un mensaje de error como "BenM no está disponible, pruebe con BenM1".

  4. Abra el archivo Models\UserModel y agregue el atributo RemoteAttribute a la propiedad de nombre de usuario en el modelo de creación de usuarios. El ejemplo siguiente muestra el código completo:

    public class CreateUserModel : EditUserModel {
        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Remote("IsUID_Available", "Validation")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed.")]
        [Editable(true)]
        public override string UserName { get; set; }
    }
    

    El atributo RemoteAttribute del ejemplo toma el nombre del método de acción IsUID_Available y el nombre del controlador en el que se realizan las validaciones.

    La clase RemoteAttribute crea una cadena que representa la dirección URL que se va a utilizar para invocar la validación basada en servidor. A continuación, el marco de ASP.NET MVC envía la solicitud GET codificada con JSON para la dirección URL. En este ejemplo, si el usuario escribe "BenM" en el cuadro de entrada de texto Nombre de usuario, el cliente solicitará la siguiente dirección URL:

    /Validation/IsUID_Available?UserName=BenM

En esta sección, probará la aplicación y examinará el HTML emitido por la vista Create.

Probar la validación remota

  1. Inicie la aplicación y haga clic en el vínculo Crear nuevo.

  2. En el campo de entrada del nombre de usuario, escriba "BenM" y presione el Tabulador.

    El siguiente error de validación se muestra en rojo: "BenM no está disponible. Pruebe con BenM1". El identificador que escriben los usuarios se valida en cuanto dejan el cuadro de texto Nombre de usuario (es decir, cuando el cuadro de texto pierde el foco). La validación no requiere una devolución (postback) completa.

  3. Opcionalmente, utilice una herramienta como Fiddler o Firebug para supervisar la llamada de validación IsUID_Available al servidor. La imagen siguiente muestra la solicitud y la respuesta del servidor web para la llamada de validación IsUID_Available en Fiddler.

    Herramienta Fiddler
    NotaNota:

    Con la versión 8 y anteriores de Internet Explorer, debe anexar un punto a localhost en la dirección URL de solicitud del proxy de Fiddler para capturar el tráfico HTTP. También puede utilizar http://ipv4.fiddler o http://NombreDeMáquina/ en lugar de localhost en la dirección URL.

  4. Examine el código fuente HTML mostrado por el explorador para la vista Create.

    El elemento input del campo de nombre de usuario contiene los atributos data-val-* de HTML5. (La parte -val representa la validación). Estos atributos compatibles con HTML5 describen los validadores que se deben adjuntar a los campos input y proporcionar la validación de jQuery discreta. Los atributos discretos tienen el formato data-val-rule="Error Message", donde rule es la regla de validación (por ejemplo la longitud de cadena mínima y la longitud de cadena máxima exigidas). Si se proporciona un mensaje de error en el atributo, se muestra como el valor del atributo data-val-rule. El atributo RegularExpressionAttribute aplicado al modelo de usuario en combinación con el método EditorForModel(HtmlHelper, Object) en la vista Create produce los siguientes atributos de cliente discretos y valores de atributo de HTML5 que se van a generar:

    
       data-val-regex="White space is not allowed." 
       data-val-regex-pattern="(\S)+" 
    

    El mensaje de error "No se permiten espacios en blanco" procede del mensaje de error del atributo RegularExpressionAttribute aplicado a la propiedad de nombre de usuario del modelo de usuario.

    El atributo RemoteAttribute utilizado en el modelo de usuario hace que se generen los siguientes atributos de validación de cliente discretos y valores de atributo:

    data-val-remote="&amp;#39;UserName&amp;#39; is invalid." data-val-remote-additionalfields="*.UserName" data-val-remote-url="/Validation/IsUID_Available"
    

    La secuencia &amp;#39;UserName&amp;#39; está codificada en HTML y representa "Nombre de usuario". El valor de atributo data-val-remote contiene el mensaje de error predeterminado ("'Nombre de usuario' no es válido"). UserName es un marcador de posición del nombre de usuario real enviado. El valor de atributo data-val-remote-additionalfields especifica el campo o propiedad que se va a validar. El valor de atributo data-val-remote-url especifica el método de acción que validará el campo.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft