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

Question

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

@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

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

Answer 2

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

1. добавьте ниже, введите файл конфигурации

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

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

   @Html.ValidationSummary(false)

2. Удалить все строки @ Html.ValidationFor из представления.

Answer 3

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

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

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

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

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

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

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

Answer 4

Из того, что я вижу в вашем примере кода, у вас есть два 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" />
}

Answer 5

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

Answer 6

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

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

Надеюсь, это тоже поможет вам.