将ValidationSummary MVC3显示为"alert-error"Bootstrap

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