css - 将 ValidationSummary MVC3 显示为“警报错误”引导程序

Question

我想展示一个带有“alert-error”引导样式的 ValidationSummary mcv3。

我正在使用 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>

但引导警报应该在 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>
}

我还必须从“site.css”中删除类“.validation-summary-errors”，因为该样式定义了其他字体颜色和粗细。

score 54 · Accepted Answer

再次编辑

一开始我误解了你的问题。我认为以下是您想要的：

@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>
}

score 39 · Accepted Answer

这个答案是基于 RickB 的

更新了最新的引导程序 ==>>~~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 key) 上手动添加的错误，但不适用于由 ModelState 生成的错误（通常这会首先通过 javascript 触发，但如果（例如）Html.ValidationMessageFor是失踪或许多其他情况。

score 33 · Accepted Answer

替代解决方案。=)

@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>
}

score 18 · Accepted Answer

我不喜欢 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>
}

就我而言，结果如下所示：

score 13 · Accepted Answer

13

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

于 2014-10-01T13:49:31.057 回答

score 6 · Accepted Answer

考虑为 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 样式。

score 6 · Accepted Answer

在 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>
}

score 3 · Accepted Answer

我采取了稍微不同的路线：使用 JQuery 挂钩到表单提交：

$('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 模块中设置了这个，这样它就可以连接到我创建的任何验证摘要上。

高温高压

查克

score 2 · Accepted Answer

您可以使用 jquery：

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

它正在从引导程序中查找包含给定错误类的每个 div，并在 div 的开头编写 html。我正在添加.alert-block类，因为引导页面说：

对于更长的消息，通过添加 .alert-block 来增加警报包装器顶部和底部的填充。

score 2 · Accepted Answer

根据这里的答案：

@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>
}

（我正在使用 Bootstrap 4）

score 2 · Accepted Answer

该解决方案使用Sass使其工作，但您可以使用基本的 css 实现相同的目标。为了使这项工作与客户端验证一起工作，我们不能依赖检查 ModelState，因为它假设已经发生了回发。开箱即用的 mvc 客户端验证已经使事情在正确的时间可见，所以让它做它的事情并简单地设置验证摘要中的列表项的样式，以像引导警报一样呈现。

剃刀标记：

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

萨斯

.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;}

score 1 · Accepted Answer

TwitterBootstrapMVC只用一行代码来处理这个问题：

@Html.Bootstrap().ValidationSummary()

重要的是，为了确保它在服务器端和客户端（不显眼）验证期间的行为相同，您需要包含一个处理该问题的javaScript 文件。

您可以使用扩展方法自定义验证助手，但您认为合适。

免责声明：我是 TwitterBootstrapMVC 的作者。将它与 Bootstrap 3 一起使用需要许可证。

score 1 · Accepted Answer

纯 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>')
    });

如果您不想编写服务器端逻辑，那么这是一个不错的替代解决方案。

score 0 · Accepted Answer

扩展 Daniel Björk 的解决方案，您可以包含一个小脚本来调整ValidationSummary()输出中包含的 CSS。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/

score 0 · Accepted Answer

要在 bootstrap 4 中实现相同的功能，请使用以下命令：

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

score 0 · Accepted Answer

如果它需要使用客户端javascript，我建议这样做：

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

您仍然可以分配引导类

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

但它只会在您有实际错误时显示。

css - 将 ValidationSummary MVC3 显示为“警报错误”引导程序

16 回答 16

这个答案是基于 RickB 的

Related

Reference