I have a ASP .NET MVC 4.5 that uses Razor View Engine. I also added Bootstrap to it.
My doubt is: How do I dynamically show or hide a div according to the @Html.ValidationSummary()? - preferably without JQuery.
In my specific case, there's a form which contains several inputs. Whenever a validation error occours (eg. empty field), I intend to show the associated error message in a single div.
<div class="alert alert-danger">
@Html.ValidationSummary();
</div>
Thanks in advance.
I would use an html helper which you could call like this:
@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 quicker way but feels 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>
}