web-dev-qa-db-fra.com

Comment activer manuellement la validation jQuery avec ASP.NET MVC

J'ai du mal à comprendre certaines des bases de la validation de jQuery en tant que connexion avec ASP.NET MVC.

La version courte de cette question est: Quelle magie me manque qui permet au code produit par @Html.EditorFor() d'effectuer la validation jQuery, mais ne fonctionne pas J'essaie de câbler ma propre validation jQuery en utilisant exactement le même HTML ?

En tant qu'exercice d'apprentissage (et parce qu'il imite ce que je veux vraiment faire dans mon site Web), j'ai créé une nouvelle application MVC 4 dans Visual Studio 2012. J'ai ajouté un modèle de vue:

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

et j'ai modifié Views\Home\Index.cshtml pour créer un formulaire basé sur mon modèle de vue comme ceci:

@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" />
}

Enfin, j'ai modifié le contrôleur Home pour fournir le modèle de vue au formulaire et pour gérer le POST associé, comme ceci:

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();
        }
    }
}

Lorsque j'exécute le projet, la page Web affiche une zone de texte et valide comme par magie que l'utilisateur doit entrer une valeur. Jusqu'ici tout va bien...

Maintenant, mon application réelle est une enquête en ligne. Il affiche des questions et sollicite des réponses sur la base d'un script. Mon viewmodel réel contient des propriétés qui correspondent au texte de la question, à la valeur fournie par l'utilisateur, etc. Le viewmodel contient également une propriété booléenne obligatoire qui spécifie si l'utilisateur doit fournir une valeur (c'est-à-dire s'il faut ou non activer validation "requise" dans la vue) - cela signifie donc que je dois supprimer le [Required] attribut sur la propriété MyStringValue dans mon viewmodel et fournir ma propre magie de validation basée sur la propriété Required dans le viewmodel.

C'est là que je me perds. Dans IE, je peux voir que les appels @ html.xxx dans l'exemple d'application (décrit ci-dessus) produisent ce code HTML pour le formulaire:

<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>

Mais je ne vois aucun code HTML ailleurs sur la page qui fait évidemment référence à la bibliothèque de validation jQuery, ni le code JavaScript qui permet la validation, donc je ne comprends pas pourquoi cela fonctionne du tout.

De plus, si je supprime le [Required], et codez en dur la vue pour émettre le code HTML ci-dessus (sans les appels magic @ html.xxx ()), puis aucune validation ne se produit.

Qu'est-ce que je rate?

jqueryasp.net-mvcasp.net-mvc-4jquery-validateunobtrusive-validation
17
Bob.at.Indigo.Health

Oui, il me manquait quelque chose de vraiment fondamental.

Le modèle de page (_Layout.cshtml) créé pour un nouveau projet MVC 4 contient ce code à la fin de la page:

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

Ce code extrait la bibliothèque jQuery (après que tout le code HTML de la page a été vu par le navigateur), puis affiche une "section" facultative qui peut être fournie par la vue. Ce code ne pas extrait la bibliothèque de validation jQuery.

La validation ASP.NET MVC fonctionne sans validation jQuery, mais toute la validation est effectuée sur le serveur. L'observateur attentif notera qu'une fois averti qu'une valeur de chaîne manquante doit être fournie, la validation côté client fait disparaître l'avertissement en entrant simplement un seul caractère dans la zone de texte offensée. Mais sans validation jQuery activée, la saisie dans la zone de texte ne supprime pas dynamiquement l'avertissement.

Pour "activer" la validation jQuery pour une seule vue, ce code doit résider quelque part dans le fichier cshtml de la vue (stylistiquement, il veut être à la fin du fichier car il apparaîtra à la fin du HTML) :

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

Donc, la réponse courte à ma question est d'ajouter le code ci-dessus à la fin de mon fichier Views\Home\Index.cshtml. Cela active la validation jQuery, la magie opère et les attributs data-xxx ne sont plus ignorés. La vie est belle.

12
Bob.at.Indigo.Health

Il n'y a pas de magie qui vous manque. Le script de "validation discrète" de Microsoft peut être utilisé dans n'importe quel site Web qui utilise jquery et jquery validate. Il n'est pas lié à ASP.NET - tant que le HTML est le format attendu par le script discret, alors le script fonctionnera. Ce violon montre le script discret appliqué à un formulaire non produit par ASP.NET .

Le script discret a deux tâches principales:

  1. Initialisez le plugin jquery.validate.js
  2. Lisez les attributs data-val * dans le balisage et traduisez-les en règles de validation jquery

Comme vous l'avez peut-être l , les attributs de balisage que le script discret lit sont les suivants

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

donc un champ de saisie pourrait ressembler à ceci

  <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="" />

Mon opinion personnelle sur le script discret est qu'il tombe dans la catégorie de ce que Steve Sanderson appelle "demoware" dans son livre MVC . Il fait quelques trucs sympas hors de la boîte mais il entrave la validation jquery qui est beaucoup plus facile à utiliser seul. J'ai tendance à le supprimer lorsque je démarre un nouveau projet.

10
Dr Blowhard