Compartir a través de

Realizar una validación simple (C#)

  • Artículo

por Stephen Walther

Aprenda a realizar la validación en una aplicación de ASP.NET MVC. En este tutorial, Stephen Walther presenta el estado del modelo y los asistentes HTML de validación.

El objetivo de este tutorial es explicar cómo puede realizar la validación en una aplicación ASP.NET MVC. Por ejemplo, sabrá cómo impedir que alguien envíe un formulario que no contenga un valor para un campo obligatorio. Aprenderá a usar el estado del modelo y los asistentes HTML de validación.

Descripción del estado del modelo

Puede usar el estado del modelo (o más concretamente el diccionario de estados de los modelos) para representar errores de validación. Por ejemplo, la acción Create() de la lista 1 valida las propiedades de una clase Product antes de agregarla a una base de datos.

No se recomienda agregar la lógica de validación o de base de datos a un controlador. Un controlador solo debe contener lógica relacionada con el control de flujo de la aplicación. Estamos tomando un atajo para simplificar las cosas.

Lista 1: Controllers\ProductController.cs

//
// POST: /Product/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude="Id")] Product productToCreate)
{
    // Validation logic
    if (productToCreate.Name.Trim().Length == 0)
        ModelState.AddModelError("Name", "Name is required.");
    if (productToCreate.Description.Trim().Length == 0)
        ModelState.AddModelError("Description", "Description is required.");
    if (productToCreate.UnitsInStock

En la lista 1, se validan las propiedades Name, Description y UnitsInStock de la clase Product. Si alguna de estas propiedades no pasa la prueba de validación, se agrega un error al diccionario de estados de los modelos (representado por la propiedad ModelState de la clase Controller).

Si hay errores en el estado del modelo, la propiedad ModelState.IsValid devuelve false. En ese caso, se vuelve a mostrar el formulario HTML para crear un nuevo producto. De lo contrario, si no hay errores de validación, el nuevo producto se agrega a la base de datos.

Uso de los asistentes de validación

El marco ASP.NET MVC incluye dos asistentes de validación: el asistente Html.ValidationMessage() y el asistente Html.ValidationSummary(). Estos dos asistentes se usan en una vista para mostrar los mensajes de error de validación.

Los asistentes Html.ValidationMessage() y Html.ValidationSummary() se usan en las vistas Create y Edit generadas automáticamente por el andamiaje de ASP.NET MVC. Siga estos pasos para generar la vista Create:

  1. Haga clic con el botón derecho en la acción Create() en el controlador Product y seleccione la opción de menú Agregar vista (vea la figura 1).
  2. En el cuadro de diálogo Agregar vista, active la casilla Crear una vista fuertemente tipada (vea la figura 2).
  3. En la lista desplegable Ver clase de datos, seleccione la clase Product.
  4. En la lista desplegable Ver contenido, seleccione Crear.
  5. Haga clic en el botón Agregar.

Asegúrese de compilar la aplicación antes de agregar una vista. De lo contrario, la lista de clases no aparecerá en la lista desplegable Ver clase de datos.

Screenshot of the Product Controller dot c s file in the code editor, which shows the right-click menu with the highlighted Add View menu item.

Figura 01: Añadir una vista (haga clic para ver la imagen a tamaño completo)

Screenshot of the Add View dialog box, which shows that the Create a strongly-typed view checkbox is filled.

Figura 02: Creación de una vista con escritura fuertemente tipada (haga clic para ver la imagen a tamaño completo)

Una vez finalizados estos pasos, obtendrá la vista Create de la lista 2.

Lista 2: Views\Product\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Product>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Create</h2>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Name") %>
                <%= Html.ValidationMessage("Name", "*") %>
            </p>
            <p>
                <label for="Description">Description:</label>
                <%= Html.TextBox("Description") %>
                <%= Html.ValidationMessage("Description", "*") %>
            </p>
            <p>
                <label for="Price">Price:</label>
                <%= Html.TextBox("Price") %>
                <%= Html.ValidationMessage("Price", "*") %>
            </p>
            <p>
                <label for="UnitsInStock">UnitsInStock:</label>
                <%= Html.TextBox("UnitsInStock") %>
                <%= Html.ValidationMessage("UnitsInStock", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

En la lista 2, el asistente Html.ValidationSummary() se llama inmediatamente encima del formulario HTML. Este asistente se usa para mostrar una lista de mensajes de error de validación. El asistente Html.ValidationSummary() representa los errores en una lista con viñetas.

Se llama al asistente Html.ValidationMessage() junto a cada uno de los campos de formulario HTML. Este asistente se usa para mostrar un mensaje de error justo al lado de un campo de formulario. En el caso de la lista 2, el asistente Html.ValidationMessage() muestra un asterisco cuando se produce un error.

La página de la figura 3 muestra los mensajes de error representados por los asistentes de validación cuando el formulario se envía con campos que faltan y valores no válidos.

Screenshot of the Internet Explorer window, which shows the Create view with error messages resulting from fields filled with invalid values.

Figura 03: La vista Create enviada con problemas (haga clic para ver la imagen a tamaño completo)

Observe que la apariencia de los campos de entrada HTML también se modifica cuando se produce un error de validación. El asistente Html.TextBox() representa un atributo class="input-validation-error" cuando hay un error de validación asociado a la propiedad representada por el asistente Html.TextBox().

Hay tres clases de hojas de estilo CSS que se usan para controlar la apariencia de los errores de validación:

  • input-validation-error: se aplica a la etiqueta <input> representada por el asistente Html.TextBox().
  • field-validation-error: se aplica a la etiqueta <span> representada por el asistente Html.ValidationMessage().
  • validation-summary-errors: se aplica a la etiqueta <ul> representada por el asistente Html.ValidationSummary().

Puede modificar estas clases de hojas de estilo CSS y, por tanto, modificar la apariencia de los errores de validación modificando el archivo Site.css ubicado en la carpeta Content.

Nota:

La clase HtmlHelper incluye propiedades estáticas de solo lectura para recuperar los nombres de las clases CSS relacionadas con la validación. Estas propiedades estáticas se denominan ValidationInputCssClassName, ValidationFieldCssClassName y ValidationSummaryCssClassName.

Validación previa y posterior al enlace

Si envía el formulario HTML para crear un producto y escribe un valor no válido para el campo Price y ningún valor para el campo UnitsInStock, recibirá los mensajes de validación que se muestran en la figura 4. ¿De dónde proceden estos mensajes de error de validación?

Screenshot of the Internet Explorer window, which shows the Price and Units in Stock fields are flagging validation errors.

Figura 04: Errores de validación previa al enlace (haga clic para ver la imagen a tamaño completo)

En realidad hay dos tipos de mensajes de error de validación: los generados antes de que los campos de formulario HTML estén enlazados a una clase y los generados después de que los campos de formulario estén enlazados a la clase. En otras palabras, hay errores de validación previos al enlace y errores de validación posteriores al enlace.

La acción Create() expuesta por el controlador Product de la lista 1 acepta una instancia de la clase Product. La firma del método Create tiene este aspecto:

public ActionResult Create([Bind(Exclude="Id")] Product productToCreate)

Los valores de los campos de formulario HTML del formulario Create están enlazados a la clase productToCreate por algo denominado enlazador de modelos. El enlazador de modelos predeterminado agrega un mensaje de error al estado del modelo automáticamente cuando no puede enlazar un campo de formulario a una propiedad de formulario.

El enlazador de modelos predeterminado no puede enlazar la cadena "apple" a la propiedad Price de la clase Product. No se puede asignar una cadena a una propiedad decimal. Por lo tanto, el enlazador de modelos agrega un error al estado del modelo.

El enlazador de modelos predeterminado tampoco puede asignar un valor NULL a una propiedad que no acepta valores NULL. En concreto, el enlazador de modelos no puede asignar un valor NULL a la propiedad UnitsInStock. Una vez más, el enlazador de modelos desiste y agrega un mensaje de error al estado del modelo.

Si desea personalizar la apariencia de estos mensajes de error previos al enlace, debe crear cadenas de recursos para estos mensajes.

Resumen

El objetivo de este tutorial era describir la mecánica básica de la validación en el marco ASP.NET MVC. Ha aprendido a usar el estado del modelo y los asistentes HTML de validación. También hemos analizado la diferencia entre validación previa y posterior al enlace. En otros tutoriales, analizaremos varias estrategias para mover el código de validación fuera de los controladores e introducirlo en las clases de modelo.

AnteriorSiguiente