Show ValidationSummary MVC3 as “alert-error” Bootstrap

Question

I want to show a ValidationSummary mcv3 with \"alert-error\" Bootstrap styling.

I\'m using a Razor view, and I show model errors with this code:

 @Html.V         


        

Answer 1

This solution uses Sass to make it work but you could achieve the same thing with basic css. To make this work with client side validation we cant rely on checking the ModelState since that assumes a postback has occurred. The out-of-the-box mvc client side validation already makes things visible at the right time so let it do its thing and simply style the list items in the validation summary to render like bootstrap alerts.

Razor markup:

@Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" })

Sass

.validation-summary-errors-alerts{
ul{
    margin: 0;
    list-style: none;
    li{
        @extend .alert;
        @extend .alert-danger;
    }
}}

The css that produced for my project looked like this - yours will be different:

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