通过 CSS 用框包围 ValidationSummary
Posted
技术标签:
【中文标题】通过 CSS 用框包围 ValidationSummary【英文标题】：Surrounding a ValidationSummary with a box via CSS 【发布时间】：2010-10-30 17:35:16 【问题描述】：默认情况下，html.ValidationSummary() 会生成如下 HTML：
<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
我想选择整个验证摘要并通过 CSS 在其周围添加一个边界框，所以我添加了一个这样的 CSS 类：
.validation-summary-errors
background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
现在的问题是，这会在验证摘要消息和每个错误消息周围绘制单独的框。当然不是我想的那样。
我可以像这样在摘要周围添加一个div，但是如果没有验证错误，这将导致一个空的红色框，所以不是这样：
<div class="my-validation-summary">
<h2>
<%=Model.Message%>
</h2>
<%= Html.ValidationSummary("There were some errors...")%>
</div>
我可以想出几种方法来解决这个问题：
使用服务器端标签有条件地添加边界 div 通过 jQuery 添加边界 div 编写我自己的 HtmlHelper 包装器，打印 CSS 友好的 ValidationSummary但是，对于解决如此简单的任务，所有这些看起来都非常尴尬。必须有更好的方法来做到这一点。也许其他一些编写 CSS 类的方式，这样当没有验证摘要时我就不会得到一个空框？
编辑：为了澄清，我这样调用 html 助手：
<%=Html.ValidationSummary("There were some errors...") %>
编辑 2： 这个问题的范围是看看我是否忽略了一些非常容易和明显的东西。看来我没有，所以我将简单地添加适合我需要的自己的 HtmlHelper 函数。我投票结束我自己的问题。
【问题讨论】：
您是否自定义了验证摘要控件？默认情况下，它的呈现方式与您发布的方式不同。 不，我只是在使用重载 ValidationSummary 方法（参见上面的第一个编辑）– Adrian Grigore 13 秒前 我喜欢 MVC 源代码的可用性 - 打开它并编写自己的。祝你好运 【参考方案1】：下面是一些可以使用的 CSS：
.validation-summary-errors
background-color: #D9FFB2;
border:1px solid #5CBA30;
width: 400px;
span.validation-summary-errors
border-bottom-color: #D9FFB2;
display:block;
ul.validation-summary-errors
margin:0;
padding:0;
border-top:none;
您可能需要根据您的其他 css 来调整宽度。
评论后编辑
我将 ul.validation-summary-errors 更改为将边距和填充清零并删除宽度。它现在应该可以跨浏览器工作了。
【讨论】：
几乎:-)！这在 Firefox 3 中运行良好，但在 IE 7 中中断。请参阅 content.screencast.com/users/sandra123/folders/Jing/media/… 我的新版本代码有效吗？它应该修复在 IE7 中被推送的列表。【参考方案2】：如果您有一个像您提供的第二个代码示例一样的包装 div。然后很容易使用 jQuery 将错误类从 span & ul 中“移动”到那个外部 div。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
var className = "validation-summary-errors";
$("." + className).removeClass(className).closest("div").addClass(className);
);
</script>
<style type="text/css">
.validation-summary-errors border: solid 1px red; ,
</style>
</head>
<body>
<div>
<h2>My Modal Message</h2>
<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
</div>
</body>
</html>
此代码将处理 HTML 使其看起来像这样......
<div class="validation-summary-errors">
<h2>My Modal Message</h2>
<span class="">There were some errors...</span>
<ul class="">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
</div>
【讨论】：
正如我所说，我知道用 jQuery 解决这个问题很容易。但这似乎是一个非常尴尬的解决方案。【参考方案3】：如果我没看错，而您只想要 span.validation-summary-errors 上的边框（而不是内部内容），那么：
.validation-summary-errors border: 0 none transparent; /* set defaults for inner */
span.validation-summary-errors background-color:#D9FFB2; /* sets the span */
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
应该这样做。
或者，可靠性稍差：
.validation-summary-errors background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
.validation-summary-errors > .validation-summary-errors,
.validation-summary-errors .validation-summary-errors
border: 0 none transparent; /* should apply styles to */
/* the children/descendants */
/* with the same name - untested though... */
【讨论】：
不，我想要一个包围验证摘要和消息的边框。【参考方案4】：另一个需要的解决方案。
@Html.ValidationSummary(false, "", new @class = "***YOUR CSS CLASS***" )
【讨论】：
以上是关于通过 CSS 用框包围 ValidationSummary的主要内容，如果未能解决你的问题，请参考以下文章
CSS：为啥 chrome 中的字母在像素缩放中被不同的颜色包围？