Dynamically show bootstrap surrounding div error on ValidationSummary?

Question

I have an ASP.NET MVC 4.5 that uses the Razor View Engine. I also added Bootstrap to it.

I doubt it . How to dynamically show or hide a div according to @ Html.ValidationSummary ()? - preferably without jQuery.

In my particular case, there is a form containing several inputs. Whenever a validation error occurs (for example, an empty field), I am going to show the related error message in one div.

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

Thanks in advance.

Answer 1

All this is built into MVC without any hacking reasons.

Just use:

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

Typically, some CSS hides it when there are no errors:

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

Much easier, much cleaner.

Answer 2

I would use the html helper, which you could call the following:

  @Html.BootStrapValidationSummary(); 

Here is the code:

 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()); } } 

This is a faster way, but it looks like a hack (I personally hate using if statements in views):

  @{ var anyErrors = ViewData.ModelState.Values.Where( v => v.Errors.Count != 0 ).Any(); } @if (anyErrors) { <div class="alert alert-danger"> @Html.ValidationSummary(); </div> }