Question

我想展示一个带有“alert-error”Bootstrap样式的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>

但是Bootstrap警报应该将此按钮放入div：

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

有人可以帮忙吗？

这个作品！ - 谢谢Rick 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”类，因为该样式定义了其他字体颜色和重量。

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

Answer 2

这个答案是基于RickB的一个

更新了最新的bootstrap ==＆gt;＆gt; ~~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缺失或许多其他情况。

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

Answer 4

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

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

在我的例子中，结果看起来像这样：

Answer 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样式。

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

Answer 8

我采用了稍微不同的路线：使用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模块中设置了这个集合，以便它挂钩到我创建的任何验证摘要。

HTH

查

Answer 9

您可以使用jquery：

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

它正在寻找包含来自bootstrap的给定错误类并在div开头编写html的每个div。我正在添加.alert-block类，因为引导页面显示：

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

Answer 10

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

@Html.Bootstrap().ValidationSummary()

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

您可以使用您认为合适的扩展方法自定义验证帮助程序。

免责声明：我是TwitterBootstrapMVC的作者。在Bootstrap 3中使用它需要许可证。

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

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

Answer 12

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

Razor标记：

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

Answer 13

扩展DanielBjö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/

Answer 14

要在引导程序4中实现相同功能，请使用以下命令：

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

Answer 15

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

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

您仍然可以分配引导程序类

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

但是它只会在您遇到实际错误时显示。

Answer 16

基于此处的答案：

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

将ValidationSummary MVC3显示为“alert-error”Bootstrap

16 个答案:

这个答案是基于RickB的一个