Показать ValidationSummary MVC3 как "alert-error" Bootstrap

Я хочу показать ValidationSummary mcv3 с стилем Bootstrap "alert-error".

Я использую представление Razor, и я показываю ошибки модели с этим кодом:

 @Html.ValidationSummary(true, "Errors: ")

Он генерирует HTML-код следующим образом:

<div class="validation-summary-errors">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

Я тоже пробовал:

@Html.ValidationSummary(true, "Errors:", new { @class = "alert alert-error" })

и он работает нормально, но без кнопки закрытия (X)

Он генерирует HTML-код следующим образом:

<div class="validation-summary-errors alert alert-error">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

но предупреждение Bootstrap должно содержать эту кнопку в div:

<button type="button" class="close" data-dismiss="alert">×</button>

Может ли кто-нибудь помочь?

Это работает! - Спасибо Рик B

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) 
{ 
   <div class="alert alert-error"> 
      <a class="close" data-dismiss="alert">×</a> 
      <h5 class="alert-heading">Ingreso Incorrecto</h5> 
      @Html.ValidationSummary(true)
   </div>
}

Мне также пришлось удалить класс ".validation-summary-errors" из "site.css", потому что этот стиль определяет другой цвет и вес шрифта.

Ответы

Ответ 1

отредактирован снова

Сначала я неправильно понял ваш вопрос. Я думаю, что вам нужно следующее:

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
{ 
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(true, "Errors: ")
    </div>
}

Ответ 2

Этот ответ основан на RickB one

  • Обновлено для последней начальной загрузки == → alert-error не существует в пользу alert-danger.

  • Работает для всех ошибок проверки не только Key String.Empty("")

Для тех, кто использует Bootstrap 3 и пытается получить приятные поисковые сигналы:

if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) { 
    <div class="alert alert-danger">
        <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>
}

Решение, предоставляемое RickB, работает только с добавленными вручную ошибками (ключ String.Empty), но не на те, которые сгенерированы ModelState (обычно это запускается сначала с помощью javascript, но всегда хорошая практика иметь откат, если (например ) отсутствует Html.ValidationMessageFor или много других ситуаций.

Ответ 3

Альтернативное решение. =)

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) 
{ 
   // Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger"
   <div class="alert alert-danger alert-error"> 
      <a class="close" data-dismiss="alert">&times;</a> 
      @Html.ValidationSummary(true, "Errors: ")
   </div>
}

Ответ 4

@Html.ValidationSummary("", new { @class = "alert alert-danger" })

Ответ 5

Мне не понравилось, как рендеринг ValidationSummary с использованием списка маркеров (неупорядоченный список). В списке ошибок было много ненужного пространства.

Решение этой проблемы - это просто пропустить ошибки и сделать ошибки, как вы хотите. Я использовал абзацы. Например:

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
    <div class="alert alert-danger" role="alert">
        <a class="close" data-dismiss="alert">×</a>
        @foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
        {
            <p>@modelError.ErrorMessage</p>
        }
    </div>
}

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

Ответ 6

Рассмотрите возможность написания метода расширения в HtmlHelper, например:

public static class HtmlHelperExtensions
{
    public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper)
    {
        if (htmlHelper == null)
        {
            throw new ArgumentNullException("htmlHelper");
        }

        if (htmlHelper.ViewData.ModelState.IsValid)
        {
            return new HtmlString(string.Empty);
        }

        return new HtmlString(
            "<div class=\"alert alert-warning\">"
            + htmlHelper.ValidationSummary()
            + "</div>");
    }
}

Тогда вам просто нужно поместить стиль ul-li в таблицу стилей.

Ответ 7

В MVC 5, ViewData.ModelState[""] всегда возвращает нулевое значение. Мне пришлось прибегнуть к команде IsValid.

if (!ViewData.ModelState.IsValid)
{
   <div class="alert alert-danger">
      <a class="close" data-dismiss="alert">×</a>
      <strong>Validation Errors</strong>
      @Html.ValidationSummary()
   </div>
}

Ответ 8

Я взял несколько иной путь: с помощью JQuery, чтобы подключиться к форме submit:

$('form').each(function() {
    var theForm = $(this);
    theForm.submit(function() {
        if ($(this).valid()) {
            if ($(this).find('.validation-summary-valid').length) {
                $('.validation-summary-errors').hide();
            }
        } else {
            if ($(this).find('.validation-summary-errors').length) {
                $('.validation-summary-errors')
                    .addClass('alert alert-error')
                    .prepend('<p><strong>Validation Exceptions:</strong></p>');
            }
        }
    });
});

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

НТН

Chuck

Ответ 9

Вы можете использовать jquery:

$(function(){
 $('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
     $(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
 });
});

Он ищет каждый div, содержащий заданные классы ошибок, из начальной загрузки и записи html в начале div. Я добавляю класс .alert-block, поскольку страница начальной загрузки говорит:

Для более длинных сообщений увеличьте заполнение сверху и снизу оповещения об ошибке путем добавления .alert-блока.

Ответ 10

TwitterBootstrapMVC позаботится об этом только с одной строкой:

@Html.Bootstrap().ValidationSummary()

Важно, чтобы убедиться, что он ведет себя одинаково во время проверки на стороне сервера и на стороне клиента (ненавязчивая), вам нужно добавить файл javaScript это позаботится об этом.

Вы можете настроить помощника Validation с помощью методов расширения, но вы сочтете нужным.

Отказ от ответственности: я являюсь автором TwitterBootstrapMVC. Использование его с Bootstrap 3 требует лицензии.

Ответ 11

Альтернативное решение с чистым javascript (jQuery). Я работаю с MVC4 + Bootstrap3, но он отлично подходит для вас.

$(function () {
        $(".validation-summary-errors").addClass('alert alert-danger');
        $(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>')
    });

Если вы не хотите писать логику на стороне сервера, это хорошее альтернативное решение.

Ответ 12

В этом решении используется Sass, чтобы он работал, но вы могли бы достичь того же элемента с базовым css. Чтобы сделать эту работу с проверкой на стороне клиента, мы не можем полагаться на проверку ModelState, поскольку это предполагает, что произошла обратная передача. Исправленная проверка на стороне клиента mvc уже делает вещи видимыми в нужное время, поэтому пусть это делает свое дело и просто стилирует элементы списка в сводке проверки, чтобы отображать как оповещения о загрузке.

Разметка бритвы:

@Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" })

Sass

.validation-summary-errors-alerts{
ul{
    margin: 0;
    list-style: none;
    li{
        @extend .alert;
        @extend .alert-danger;
    }
}}

Css, созданный для моего проекта, выглядел так: ваш будет другим:

.validation-summary-errors-alerts ul li {
min-height: 10px;
padding: 15px 20px 15px 62px;
position: relative;
border: 1px solid #ca972b;
color: #bb7629;
background-color: #fedc50;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: none;}

Ответ 13

Развернув решение Daniel Björk, вы можете включить немного script, чтобы настроить CSS, включенный в вывод ValidationSummary(). Появившееся сообщение bootstrap показывало проблему рендеринга, пока я не удалил класс validation-summary-errors.

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
   <div class="alert alert-danger">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
      <h4>Validation Errors</h4>
      @Html.ValidationSummary()
   </div>
}

<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
</script>

Вы также можете легко выделить ботстрап для полей с ошибками. См. http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

Ответ 14

Чтобы добиться того же в начальной загрузке 4, используйте следующее:

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
        {
            <div class="col-auto alert alert-danger" role="alert">
                @Html.ValidationSummary(true)
            </div>
        }

Ответ 15

Если это должно работать с клиентским JavaScript, я предлагаю сделать это:

  .validation-summary-valid {
    display: none;
  }

Вы все еще можете назначить класс начальной загрузки

@Html.ValidationSummary(null, new {@class= "alert alert-danger" })

но он покажет только когда у вас есть реальные ошибки.