通过CSS在ValidationSummary周围加一个框

Question

默认情况下,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功能,以满足我的需求.我投票支持我自己的问题.

Answer 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以使边距和填充为零,并删除了宽度.它应该现在可以跨浏览器工作.