在ValidationSummary上动态显示bootstrap的周围错误div？

Question

我有一个使用Razor View Engine的ASP .NET MVC 4.5.我还添加了Bootstrap.

我的疑问是:如何根据@ Html.ValidationSummary()动态显示或隐藏div？ - 最好没有JQuery.

在我的具体情况中,有一个包含几个输入的表单.每当验证错误发生时(例如,空字段),我打算在单个div中显示相关的错误消息.

<div class="alert alert-danger">
@Html.ValidationSummary();
</div>

提前致谢.

Answer 1

这些都是MVC内置的,没有任何理由可以进行任何黑客攻击.

只需使用:

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

在没有错误的情况下,有些CSS可以隐藏它:

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

更简单,更清洁.

Answer 2

我会使用一个 html 助手，你可以这样调用：

         @Html.BootStrapValidationSummary();

这是代码：

public static MvcHtmlString BootStrapValidationSummary(this HtmlHelper htmlHelper)
{
     var sb = new StringBuilder();

     var anyErrors = ViewData.ModelState.Values.Where( v => v.Errors.Count != 0 ).Any();
     var divBeginTag = @"<div class=""alert alert-danger"">";
     var divEndTag = @"</div>";

     if (anyErrors) {
         sb.AppendLine(divBeginTag);
         sb.AppendLine(htmlHelper.ValidationSummary());         
         sb.AppendLine(divEndTag);
         return new MvcHtmlString(sb.ToString());
     } 
     else
     {
       return new MvcHtmlString(sb.ToString());
     }


}

这是一种更快的方法，但感觉像是一种 hack（我个人讨厌在视图中使用 if 语句）：

 @{
    var anyErrors = ViewData.ModelState.Values.Where( v => v.Errors.Count != 0 ).Any();
 }

@if (anyErrors) {
 <div class="alert alert-danger">
  @Html.ValidationSummary();
</div>
}