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

У меня есть форма регистрации, в которой я использую проверку на стороне клиента (обязательно, 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

Источник

6 ответов

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

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);
        });
    }
}
Источник

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

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

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

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

    @Html.ValidationSummary(false)

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

Источник

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

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

1-положенный <add key="ClientValidationEnabled" value="false" /> в <appSettings> раздел вашего web.config

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

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

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

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

Источник

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

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

Источник

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

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

Я надеюсь, что это тоже поможет вам.

Источник
Другие вопросы по тегам