Jak ręcznie włączyć sprawdzanie poprawności jQuery z ASP.NET MVC

Question

jestem stara się zrozumieć niektóre z podstaw walidacji jQuery jako przewodowy z ASP.NET MVC.

Krótka wersja tego pytania brzmi: Jakiej magii brakuje mi, która pozwala na kod produkowany przez @Html.EditorFor(), aby wykonać walidację jQuery, ale nie działa Próbuję podłączyć moją własną walidację jQuery używając dokładnie tego samego HTML?

Jako wykonywania uczenia się (i ponieważ naśladuje to, co naprawdę chcesz robić w mojej stronie) I stworzył nowy MVC 4 aplikację w Visual Studio 2012. I dodanej model wyświetlania:

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

i ja zmodyfikowane Views \ home \ Index.cshtml utworzyć formularz na podstawie mojego modelu widoku jak ten:

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

Wreszcie zmodyfikowany kontroler Home na dostawę widoku modelu do formy i do obsługi związanej POST, jak to:

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

Kiedy uruchomić projekt, strona internetowa wyświetla pole tekstowe i magicznie sprawdza, czy użytkownik musi wprowadzić wartość. Do tej pory tak dobrze ...

Teraz moja rzeczywista aplikacja jest ankieta online. Wyświetla pytania i pozyskuje odpowiedzi w oparciu o skrypt. Mój rzeczywisty model widoku zawiera właściwości, które odwzorowują na tekst pytania, wartość dostarczoną przez użytkownika itp. Model widoku również zawiera właściwość typu Boolean, która określa, czy użytkownik musi podać wartość (tj. Czy włączyć, czy nie, "wymagane" sprawdzanie poprawności w widoku) - oznacza to, że muszę usunąć atrybut [Required] we właściwości MyStringValue w moim widoku i podać własną magię sprawdzania poprawności w oparciu o wymaganą właściwość w module viewmodel.

To gdzie ja zgubić. W IE, widzę, że @ html.xxx wzywa w aplikacji próbki (opisanego powyżej) produkuje ten kod HTML do postaci:

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

Ale nie widzę żadnego HTML w innym miejscu na stronie, która oczywiście referencje biblioteka sprawdzania poprawności jQuery, ani nie widzę kodu JavaScript, który umożliwia sprawdzanie poprawności, więc nie rozumiem, dlaczego to działa.

Co więcej, jeśli usuniemy atrybut [Required] i zakodowuję widok w celu wyświetlenia powyższego kodu HTML (bez wywołań magic @ html.xxx(), to w ogóle nie nastąpi weryfikacja.

Czego mi brakuje?

Answer 1

Tak, brakowało mi czegoś naprawdę podstawowego.

strona szablon (_Layout.cshtml) stworzony dla nowego projektu MVC 4 zawiera ten kod na końcu strony:

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

Ten kod ciągnie w bibliotece jQuery (po wszystkich HTML na strona została zauważona przez przeglądarkę), a następnie renderuje opcjonalną "sekcję", którą można wyświetlić w widoku. Ten kod robi , a nie pobiera bibliotekę do sprawdzania jQuery.

Sprawdzanie poprawności ASP.NET MVC działa bez sprawdzania jQuery, ale wszystkie walidacje są wykonywane na serwerze. Uważny obserwator zauważy, że po ostrzeżeniu, że brakująca wartość ciągu musi zostać dostarczona, po sprawdzeniu po stronie klienta ostrzeżenie zniknie, po prostu wpisując pojedynczy znak w obrażonym polu tekstowym. Ale bez sprawdzania poprawności jQuery wpisanie w polu tekstowym nie powoduje dynamicznego usunięcia ostrzeżenia.

Aby "włączyć" sprawdzanie poprawności jQuery dla pojedynczego widoku, ten kod musi znajdować się gdzieś w pliku cshtml widoku (stylistycznie, chce być na końcu pliku, ponieważ pojawi się na końcu z HTML):

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

Więc krótka odpowiedź na moje pytanie jest dodanie powyższy kod na końcu pliku moich poglądów \ Home \ Index.cshtml. Umożliwia to walidację jQuery, pojawia się magia, a atrybuty data-xxx nie są już ignorowane. Życie jest dobre.

Answer 2

Nie ma magicznej że brakuje. Skrypt "dyskretnej walidacji" firmy Microsoft może być używany w każdej witrynie, która używa sprawdzania poprawności jquery i jquery. Nie jest związany z ASP.NET - o ile HTML jest formatem, jakiego spodziewa się dyskretny skrypt, skrypt zadziała. This fiddle shows the unobtrusive script applied to a form not produced by ASP.NET.

Dyskretne skrypt ma dwa główne zadania:

1. zainicjować jquery.validate.js plugin
2. odczytać dane-Val * atrybutów w znacznikach i przełożyć to na jquery zasad walidacji

As you may have read, znaczniki atrybuty że dyskretny skrypt odczytuje się następująco

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

więc pole wejściowe może wyglądać tak, jakby to była moja osobista opinia o dyskretnym scripcie. Jest to, że należy do kategorii tego, co Steve Sanderson nazywa "demowere" w his MVC book. Robi kilka fajnych rzeczy po wyjęciu z pudełka, ale it hobbles jquery validate, który jest znacznie łatwiejszy w użyciu. Usuwam go, gdy rozpoczynam nowy projekt.