默认情况下,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功能,以满足我的需求.我投票支持我自己的问题.
解决方法
这是一些可行的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以使边距和填充为零,并删除了宽度.它应该现在可以跨浏览器工作.
