Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
por Scott Hanselman
En este tutorial para principiantes se presentan los conceptos básicos de ASP.NET MVC. Creará una aplicación web sencilla que lea y escriba en una base de datos. Visite el centro de aprendizaje de ASP.NET MVC para encontrar otros tutoriales y ejemplos de ASP.NET MVC.
En esta sección vamos a implementar el soporte necesario para habilitar la validación de entradas dentro de nuestra aplicación. Nos aseguraremos de que el contenido de nuestra base de datos sea siempre correcto y proporcionaremos mensajes de error útiles a los usuarios finales cuando intenten escribir datos de películas que no sean válidos. Comenzaremos añadiendo un poco de lógica de validación a la clase Movie.
Haga clic con el botón derecho del ratón en la carpeta Model y seleccione Agregar clase. Asigne a su clase el nombre de Movie.
Cuando creamos el modelo de entidad Movie anteriormente, el IDE creó una clase Movie. De hecho, parte de la clase Movie puede estar en un archivo y parte en otro. Esto se denomina clase parcial. Vamos a extender la clase Movie de otro archivo.
Crearemos una clase parcial de película que apunte a una "clase complementaria" con algunos atributos que proporcionarán sugerencias de validación al sistema. Marcaremos el Título y el Precio como Obligatorios, y también insistiremos en que el Precio esté dentro de un rango determinado. Haga clic con el botón derecho en la carpeta Models y seleccione Agregar clase. Asigne a su clase el nombre Movie y haga clic en el botón Aceptar. Este es el aspecto de nuestra clase parcial Movie.
using System.ComponentModel.DataAnnotations;
namespace Movies.Models
{
[MetadataType(typeof(MovieMetadata))]
public partial class Movie
{
class MovieMetadata
{
[Required(ErrorMessage="Titles are required")]
public string Title { get; set; }
[Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
public decimal Price { get; set; }
}
}
}
Vuelva a ejecutar la aplicación e intente escribir una película con un precio superior a 100. Obtendrá un error después de haber enviado el formulario. El error se detecta en el servidor y se produce después de la publicación del formulario. Observe cómo los asistentes HTML incorporados de ASP.NET MVC fueron lo suficientemente inteligentes como para mostrar el mensaje de error y mantener los valores por nosotros dentro de los elementos del cuadro de texto:
Esto funciona muy bien, pero estaría bien si pudiéramos decírselo al usuario en el lado del cliente, inmediatamente, antes de que el servidor se involucre.
Habilitemos algo de validación del lado del cliente con JavaScript.
Añadir validación en el lado del cliente
Dado que nuestra clase Movie ya tiene algunos atributos de validación, solo tendremos que agregar unos cuantos archivos JavaScript a nuestra plantilla Vista Create.aspx y añadir una línea de código para habilitar la validación del lado del cliente.
Desde dentro de VWD vaya a nuestra carpeta Views/Movie y abra Create.aspx.
Abra la carpeta Scripts en el Explorador de soluciones y arrastre los tres scripts siguientes dentro de la etiqueta <head>.
- MicrosoftAjax.js
- MicrosoftMvcValidation.js
Quiere que estos scripts aparezcan en este orden.
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
Además, agregue esta sola línea encima de Html.BeginForm:
<% Html.EnableClientValidation(); %>
Aquí está el código mostrado dentro del IDE.
Ejecute su aplicación y vuelva a visitar /Movies/Create, y haga clic en Crear sin escribir ningún dato. Los mensajes de error aparecen inmediatamente sin el flash de página que asociamos con el envío de datos hasta el servidor. Esto se debe a que ASP.NET MVC valida ahora la entrada tanto en el cliente (usando JavaScript) como en el servidor.
¡Esto tiene buena pinta! Agreguemos ahora una columna adicional a la base de datos.