Проверка на стороне клиента MVC3 - чего мне не хватает?

Question

Я погуглил, посмотрел блоги, проверил несколько ответов здесь на SO ... когда я включаю «Проверка на стороне клиента» в моем приложении MVC3, проверка происходит только на сервере, а не на клиенте - мои формыотправлять с необходимыми текстовыми вводами, которые не имеют значений, только для отправки на сервер.

Полное раскрытие: я никогда не заставлял это работать последовательно и полностью ни в одном из 3 проектов MVC, которые я делал до сих пор.Я убежден, что упускаю что-то фундаментальное здесь, так как подавляющее большинство примеров и практических рекомендаций я считаю несущими »Эта статья относится к бета-версии« Отказ от ответственности ...

Это обычно точка, гдеЯ расстраиваюсь и вырываю все «все, что на стороне клиента должно быть косвенным и волшебным, потому что мы боимся, чтобы разработчики писали мусор javascript», и просто использую jquery.validation напрямую, но я решил попробовать опубликовать здесь, чтобы увидеть,я упускаю что-то фундаментальное ... как я обычно, кажется;)

Эта модель:

public class RegisterModel
{
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    public string Email { get; set; }
    [Required]
    public string Password { get; set; }
    [Required]
    public string ConfirmPassword { get; set; }
}

Это представление (классы "текстовое поле" необходимы для стилизации):

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.FirstName, "First Name is required.")
            @Html.TextBoxFor(model => model.FirstName, new { @class = "textfield" })
            @Html.LabelFor(model => model.FirstName, "First Name")


        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.LastName)
            @Html.TextBoxFor(model => model.LastName, new { @class = "textfield" })
            @Html.LabelFor(model => model.LastName, "Last Name")
        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.Email)
            @Html.TextBoxFor(model => model.Email, new { @class = "textfield" })
            @Html.LabelFor(model => model.Email, "Email Address")

        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.Password)
            @Html.PasswordFor(model => model.Password, new { @class = "textfield" })
            @Html.LabelFor(model => model.Password, "Password")

        </div>

        <div class="form-item-right">
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
            @Html.PasswordFor(model => model.ConfirmPassword, new { @class = "textfield" })
            @Html.LabelFor(model => model.ConfirmPassword, "Confirm")

        </div>

        <div class="form-item-right">
            <input type="submit" value="Sign Up!" class="buttonSignUp"/>
        </div>



}

Это приводит к разметке, например:

            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="false">First Name is required.</span>
            <input class="textfield" data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" value="" type="text">
            <label for="FirstName">First Name</label>

Эти сценарии включены в представление Layout:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js") "type="text/javascript"></script>

И это в web.config:

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Код контроллера для полноты:

    public ActionResult Candidate()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Candidate(RegisterModel model)
    {
        if (ModelState.IsValid)
        {
            //complete the registration

            return View("Confirm", new ConfirmationModel { Email = model.Email, FirstName = model.FirstName });   
        }
        else
        {
            return View(model);
        }
    }

Все результаты в представлении, которое не проверяет на стороне клиента.Форма сообщений без полей, введенных вообще.Проверка выполняется только на сервере (который работает правильно FWIW).

Что не так?

Изменить, чтобы включить результирующую разметку из представления.

Answer 1

Я не знаю, что вы делаете неправильно, но вот простые шаги, которые вы могли бы выполнить:

1. Создание нового проекта ASP.NET MVC 3 с использованием шаблона по умолчанию

2. Определите следующую модель:

   public class MyViewModel
   {
       [Required]
       public string Foo { get; set; }
   }
   

3. HomeController:

   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View(new MyViewModel());
       }
   
       [HttpPost]
       public ActionResult Index(MyViewModel model)
       {
           return View(model);
       }
   }
   

4. Индекс:

   @model MyViewModel
   
   <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
   
   @using (Html.BeginForm())
   {
       @Html.LabelFor(x => x.Foo)
       @Html.EditorFor(x => x.Foo)
       @Html.ValidationMessageFor(x => x.Foo)
       <button type="submit">OK</button>
   }
   

5. Запустите проект => работа на стороне клиента и на стороне сервера, как ожидалось