form - Cómo habilitar manualmente la validación de jQuery con ASP.NET MVC

unobtrusive jquery validation mvc 5

Question

Estoy luchando para entender algunos de los conceptos básicos de la validación de jQuery como está conectado con ASP.NET MVC.

La versión corta de esta pregunta es: ¿Qué magia me falta para permitir que el código producido por @Html.EditorFor() realice la validación de jQuery, pero no funciona, intento conectar mi propia validación de jQuery con el mismo HTML?

Como ejercicio de aprendizaje (y porque imita lo que realmente quiero hacer en mi sitio web), creé una nueva aplicación MVC 4 en Visual Studio 2012. Agregué un modelo de vista:

using System.ComponentModel.DataAnnotations;
namespace ValidationTest.Models
{
    public class MyViewModel
    {
        [Required]
        public string MyStringValue { get; set; }
    }
}

y modifiqué Views / Home / Index.cshtml para crear un formulario basado en mi modelo de vista como este:

@model ValidationTest.Models.MyViewModel
@using (Html.BeginForm(new { id = "MyForm" })) {
    @Html.LabelFor(m => m.MyStringValue)
    @Html.EditorFor(m => m.MyStringValue)
    @Html.ValidationMessageFor(m => m.MyStringValue)

    <br />
    <input type="submit" value="Submit" />
}

Finalmente, modifiqué el controlador de Inicio para suministrar el modelo de vista al formulario y para manejar la POST asociada, como esto:

using System.Web;
using System.Web.Mvc;
using ValidationTest.Models;

namespace ValidationTest.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var viewModel = new MyViewModel();
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(MyViewModel viewModel)
        {
            if (!ModelState.IsValid) return View(viewModel);

            return RedirectToAction("About");
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
    }
}

Cuando ejecuto el proyecto, la página web muestra un cuadro de texto y valida mágicamente que el usuario debe ingresar un valor. Hasta ahora tan bueno...

Ahora, mi aplicación actual es una encuesta en línea. Muestra preguntas y solicita respuestas basadas en un guión. Mi modelo de visualización real contiene propiedades que se asignan al texto de la pregunta, el valor suministrado por el usuario, etc. El modelo de visualización también contiene una propiedad Boolean Required que especifica si el usuario debe proporcionar un valor (es decir, si habilitar o no validación "requerida" en la Vista) - por lo que esto significa que necesito quitar el atributo [Required] en la propiedad MyStringValue en mi modelo de vista y suministrar mi propia magia de validación basada en la propiedad Requerida en el modelo de vista.

Aquí es donde me pierdo. En IE, puedo ver que las llamadas @ html.xxx en la aplicación de ejemplo (descritas anteriormente) producen este HTML para el formulario:

<label for="MyStringValue">MyStringValue</label>
<input  class="text-box single-line" 
        data-val="true" 
        data-val-required="The MyStringValue field is required." 
        id="MyStringValue" 
        name="MyStringValue" 
        type="text" 
        value="" />
<span data-valmsg-for="MyStringValue" data-valmsg-replace="true"></span>

Pero no veo ningún HTML en ninguna otra parte de la página que obviamente hace referencia a la biblioteca de validación de jQuery, ni veo el código JavaScript que habilita la validación, por lo que no entiendo por qué funciona esto.

Además, si elimino el atributo [Required] y codifico la Vista para emitir el HTML anterior (sin las llamadas a magic @ html.xxx ()), no se realizará ninguna validación.

¿Qué me estoy perdiendo?

Answer 1

No hay magia que te estés perdiendo. El script de "validación discreta" de Microsoft se puede usar en cualquier sitio web que use jquery y jquery validate. No está vinculado a ASP.NET: siempre que el HTML sea el formato que espera el script discreto, el script funcionará. Este violín muestra la secuencia de comandos discreta aplicada a un formulario no producido por ASP.NET .

El script discreto tiene dos tareas principales:

1. Inicialice el complemento jquery.validate.js
2. Lea los atributos de data-val * en el marcado y conviértalo en reglas de validación jQuery

Como puede haber leído , los atributos de marcado que lee el script discreto son los siguientes

data-val="true"
data-val-rulename="message"
data-val-rulename-paramname1="paramvalue"
data-val-rulename-paramname2="paramvalue"

por lo que un campo de entrada podría tener este aspecto

  <input
     data-val="true" 
     data-val-required="This field is required..." 
     data-val-number="Please enter a number..."
     data-val-range="Must be between 50 and 100...",
     data-val-range-min="50"
     data-val-range-max="100"
     id="mynumber" 
     name="mynumber" 
     type="text" value="" />

Mi opinión personal del guión discreto es que cae en la categoría de lo que Steve Sanderson llama "demoware" en su libro de MVC . Hace algunas cosas buenas fuera de la caja pero dificulta la validación de jquery, que es mucho más fácil de usar por sí solo. Tiendo a borrarlo cuando comienzo un nuevo proyecto.

Answer 2

Sí, me faltaba algo realmente fundamental.

La plantilla de página (_Layout.cshtml) creada para un nuevo proyecto MVC 4 contiene este código al final de la página:

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Ese código extrae la biblioteca jQuery (después de que el navegador haya visto todo el HTML de la página) y luego presenta una "sección" opcional que puede ser proporcionada por la vista. Ese código no se extrae de la biblioteca de validación de jQuery.

La validación de ASP.NET MVC funciona sin la validación de jQuery, pero toda la validación se realiza en el servidor. El observador cuidadoso notará que, una vez que se advierte que debe proporcionarse un valor de cadena faltante, la validación del lado del cliente hace que la advertencia desaparezca simplemente ingresando un solo carácter en el cuadro de texto ofendido. Pero sin la validación de jQuery habilitada, escribir en el cuadro de texto no elimina dinámicamente la advertencia.

Para "activar" la validación de jQuery para una sola vista, este código debe residir en algún lugar del archivo cshtml de la vista (estilísticamente, quiere estar al final del archivo, ya que se mostrará al final del HTML) :

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Por lo tanto, la respuesta corta a mi pregunta es agregar el código anterior al final de mi archivo Views / Home / Index.cshtml. Esto permite la validación de jQuery, la magia sucede y los atributos data-xxx ya no se ignoran. La vida es buena.