先看效果图

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

针对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>

样式二:

样式表:

/* ----- 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:

参考:

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

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

MVC Html.ValidationSummary()样式优化的更多相关文章

  1. ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. ...

  2. [ASP.NET MVC] 使用Bootsnipp样式

    [ASP.NET MVC] 使用Bootsnipp样式 前言 在「[ASP.NET MVC] 使用Bootstrap套件」这篇文章中,介绍了如何在Web项目里使用Bootstrap套件,让用户界面更加 ...

  3. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  4. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  5. ASP.NET MVC URL重写与优化(进阶篇)-继承RouteBase

    原文地址:http://www.51csharp.com/MVC/882.html   ASP.NET MVC URL重写与优化(进阶篇)-继承RouteBase玩转URL 引言-- 在初级篇中,我们 ...

  6. 【前端】input radio多选事件获取所有选中的id,radio样式优化可修改

    $("#all_button").on('click', function() { obj = document.getElementsByClassName("inpu ...

  7. CSS效果:CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  8. ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流 ...

  9. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

随机推荐

  1. Mono 异步加载数据更新主线程

    主要是用 async和 await 调用 RunOnUiThread来更新. 调用函数: //异步加载数据开始 doInBackground (); //异步加载数据开始end protected a ...

  2. source tree 推送错误解决

    fatal: The remote end hung up unexpectedly 出现这个问题是因为文件过大 解决办法: 打开git bash 输入git config --global http ...

  3. 慕课网-Java入门第一季-7-5 Java 中带参无返回值方法的使用

    public class HelloWorld { public static void main(String[] args) { // 创建对象,对象名为hello HelloWorld hell ...

  4. 施耐德Sepam 40系列备自投逻辑

    1# 主供: VL1= NOT PVTS_1_3 V1 = VL1 AND P59_1_7 AND P59_1_8 AND P59_1_9VL2 = VL1 AND I12 AND I21 AND I ...

  5. C#有关数组内存的释放及动态数组问题

    一.数组内存释放问题 数组内存的释放可以按照如下语句实现: string [] aa=new string[2]; aa[0]="A"; aa[1]="B"; ...

  6. Sublime插件安装

    来在Sublime text3上安装Package Control 使用Ctrl+`(ESC下边的那个~)快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: imp ...

  7. linux查看负载

    LINUX下查看负载 1,查看磁盘 df -h 2,查看内存大小 free free [-m|g]按MB,GB显示内存 vmstat 3,查看cpu cat /proc/cpuinfo 只看cpu数量 ...

  8. 更换win7锁屏壁纸

    1.打开注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Authentication\LogonUI\Backgroun ...

  9. SQL Server复制情况下的高可用方案(一)镜像+复制

    数据库镜像可以与事务复制一起使用实现数据库整体的高可用性和高性能,其中镜像可以提供故障检测和故障转移,复制则用于实现读写分离. 数据库镜像涉及一个数据库的两个副本,这两个副本通常驻留在不同的计算机上. ...

  10. <读书笔记>软件调试之道 :从大局看调试-发现代码存在问题

    声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记.欢迎转载! ---------------------------------------- ...