MVC Html.ValidationSummary()样式优化

先看效果图

在MVC中常用ValidationSummary显示校验信息，默认样式为

针对Html.ValidationSummary()如何做优化

样式一：

MVC Html.ValidationSummary()样式优化

在MVC中,如果你使用验证总结方法任何验证错误的模型给出了一个无序列表。如果你想要给这个消息相同的外观和感觉一致的接口。这个错误总结可以很容易地转化为引导警报显示给用户。简单的扩展:

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))

{

    <div class="alert alert-danger">

        <a href="#" class="close" data-dismiss="alert">×</a>

        <h4>Validation Errors</h4>

        @Html.ValidationSummary()

    </div>

}

默认情况下,@Html.ValidationSummary()返回什么如果没有错误。但是由于我们添加了额外的标记引导提醒我们必须检查错误。结果将是一个可闭,危险警报标题和无序,错误列表里面。
接下来,您可能想要清理的类添加验证总结。这可以确保你不会有任何CSS呈现问题以及扩大的引导。所以我在视图添加了可以关闭此消息的JS脚本

<script>

$(".validation-summary-errors").removeClass("validation-summary-errors");

$(".input-validation-error").removeClass("input-validation-error").parent().addClass("has-error");

</script>

如何调用：

 <div class="form-group">

      @Html.LabelFor(i => i.Username, new { @for = "txtUsername"})

      @Html.TextBoxFor(i => i.Username, new { @id = "txtUsername", @class = "form-control"})

</div>

样式二：

MVC Html.ValidationSummary()样式优化

样式表：

/* ----- Validation and error messages class starts -----*/

.validationsummary {

    border: 1px solid #b08b34;

    background: transparent url(Images/WarningHeader.gif) no-repeat 12px 30px;

    padding: 0px 0px 13px 0px;

    font-size:12px;

    width:99%;

}

.validationheader {

    left: 0px;

    position: relative;

    font-size: 11px;

    background-color: #e5d9bd;

    color: #56300a;

    height: 14px;

    font-weight: bold;

    border-bottom: 1px solid #b08b34;

    padding-top: 3px;

}

.validationsummary ul {

    padding-top: 5px;

    padding-left: 45px;

    list-style:none;

    font-size: 11px;

    color:#982b12;

    font-style:italic;

}

.validationsummary ul li {

    padding: 2px 0px 0px 15px;

    background-image:url(Images/Warning.gif);

    background-position:0px 3px;

    background-repeat:no-repeat;

}

/* -- --Validation and error messages class ends -- --*/

HTML：

MVC Html.ValidationSummary()样式优化

参考：

http://www.codeproject.com/Articles/113493/Customize-Validation-Summary

http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

秒客网

MVC Html.ValidationSummary()样式优化

相关文章