Как отобразить результаты проверки на стороне клиента MVC 3 в сводке проверки

У меня есть регистрационная форма, на которой я использую проверку на стороне клиента (обязательно, StringLength и т.д., указанные в моей модели представления). Форма в настоящее время в значительной степени похожа на то, как ее создает scaffolder:

@using (Html.BeginForm("Index", "Registration"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration details</legend>
        @Html.ValidationSummary(false, "Please correct these errors:")
        @Html.ValidationMessageFor(model => model.Username)
        <div class="editor-label">
            @Html.LabelFor(model => model.Username)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Username)
        </div>
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
}

Единственное отличие заключается в том, что я переместил ValidationMessageFor в верхний правый под ValidationSummary.

Что я хотел бы сделать, так это отобразить ошибки проверки на стороне клиента в сводке проверки. В настоящее время они просто отображаются поверх формы, но не используют резюме проверки. Как я могу отображать ошибки проверки на стороне клиента, используя сводку проверки? Возможно ли это?

Обновление

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

Проверка на стороне клиента http://i56.tinypic.com/i3f320.jpg

Я ожидал, что это будет показано в сводке проверки с применяемыми стилями сводки валидации. Я также представил форму, которая выглядит следующим образом:

После отправки http://i55.tinypic.com/2hqcowh.jpg

Спасибо,

b3n

Ответ 1

В этой статье объясняется, как добавить сводку проверки на стороне клиента в сводку проверки:

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

Однако я не тестировал его сам, и он, похоже, не имеет никакого отношения к вашему коду. Если это не сработает, хорошим примером может быть файл jquery.validate.unobtrusive.js для функции, которая фактически устанавливает ошибки проверки:

function onErrors(form, validator) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors")
          .removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

Ответ 2

Я решил проблему в своем проекте.

добавить в конфигурационный файл ключ

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

Добавьте ниже код на странице html, где вы хотите отобразить сводку проверки

@Html.ValidationSummary(false)
Удалите все @Html.ValidationДля строк из представления.

Ответ 3

Из того, что я вижу в вашем примере кода, у вас есть два Html.ValidationSummary внутри формы. Первый принимает true как аргумент, означающий, что он исключает все ошибки свойств. Второй принимает false и работает как с ошибками проверки на стороне клиента, так и на стороне сервера. Пример:

Модель:

public class MyViewModel
{
    [Required]
    [StringLength(5)]
    public string Username { get; set; }

    [Required]
    public string Name { get; set; }
}

Контроллер:

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

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

Вид:

@model AppName.Models.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.ValidationSummary(false, "Please correct these errors:")

    @Html.ValidationMessageFor(model => model.Username)
    @Html.ValidationMessageFor(model => model.Name)

    @Html.LabelFor(model => model.Username)
    @Html.EditorFor(model => model.Username)

    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)

    <input type="submit" value="Register" />
}

Ответ 4

Я решил эту проблему после 2-х дней интенсивных исследований, и, наконец, я нашел ответ сам и свои эксперименты!

Чтобы отобразить сообщение валидатора на стороне клиента в сводке валидатора, есть 3 простых шага:

1- поместите <add key="ClientValidationEnabled" value="false" /> в раздел <appSettings> вашего web.config

2- добавьте свою валидацию в атрибут "false": @Html.ValidationSummary(false)

3- Удалите все ValidationMessageFor(x => x.Property) в вашем представлении.

когда вы нажмете кнопку "Отправить", в вашем сводке проверки появится сообщение о подтверждении на стороне клиента.

Наслаждайтесь!

Ответ 5

Сообщения об ошибках проверки обычно отображаются как часть сводки валидации по умолчанию. Обычно проверка Validation должна идти вдоль элемента управления, который вызывает ошибку проверки, чтобы дать понять, какой контроль необходимо обновить.

Ответ 6

У меня была такая же проблема. Я исправил это, убедившись, что следующие скрипты были включены в мою страницу:

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")

Я надеюсь, что это тоже трюк для вас.