Как вручную включить проверку JQuery с помощью ASP.NET MVC

Я пытаюсь понять некоторые основы проверки jQuery, связанные с ASP.NET MVC.

Краткая версия этого вопроса: Какую магию я пропускаю, чтобы код, созданный @Html.EditorFor(), выполнял проверку jQuery, но не работает. Я пытаюсь подключить мою собственную проверку jQuery с использованием того же самого HTML?

Как учебное упражнение (и потому, что оно имитирует то, что я действительно хочу делать на моем сайте), я создал новое приложение MVC 4 в Visual Studio 2012. Я добавил модель представления:

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

и я изменил Views\Home\Index.cshtml, чтобы создать форму, основанную на моей модели представления, например:

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

Наконец, я модифицировал контроллер Home, чтобы предоставить модель представления форме и обработать связанные POST, например:

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

Когда я запускаю проект, веб-страница отображает текстовое поле и волшебным образом подтверждает, что пользователь должен ввести значение. Пока что так хорошо...

Теперь мое фактическое приложение - онлайн-опрос. Он отображает вопросы и запрашивает ответы на основе script. Моя реальная модель просмотра содержит свойства, которые сопоставляются с текстом вопроса, значением, предоставленным пользователем, и т.д. Модель viewmodel также содержит свойство Boolean Required, которое указывает, должен ли пользователь указывать значение (то есть, включать или нет "требуемая" проверка в представлении), поэтому это означает, что мне нужно удалить атрибут [Required] в свойстве MyStringValue в моей модели просмотра и предоставить свою собственную мануальную проверку, основанную на обязательном свойстве в модели просмотра.

Вот где я заблудился. В IE я вижу, что вызовы @html.xxx в примерном приложении (описанные выше) вызывают этот HTML-код для формы:

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

Но я не вижу ни одного HTML-кода на странице, который явно ссылается на библиотеку jQuery-validation, и я не вижу код JavaScript, который позволяет проверять, поэтому я не понимаю, почему это работает вообще.

Кроме того, если я удаляю атрибут [Required] и жестко кодирую представление, чтобы испускать вышеуказанный HTML (без вызовов magic @html.xxx()), то проверка не происходит вообще.

Что мне не хватает?

Ответы

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

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

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

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