周围的ValidationSummary通过CSS盒子 [英] Surrounding a ValidationSummary with a box via CSS

问题描述

在默认情况下Html.ValidationSummary（）产生HTML这样的：

By default Html.ValidationSummary() produces HTML like this:

<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类是这样的：

I'd like to select the entire validation summary and add a bounding box around it via CSS, so I am adding a CSS class like this:

.validation-summary-errors{
background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}

现在的问题是，这周围绘制验证摘要信息，每个错误消息单独的盒子。当然不是我的初衷。

Now the problem is that this draws separate boxes around the validation summary message and each error message. Certainly not what I had in mind.

我可以添加一个div周围像这样的总结，而这将导致一个空的红盒子，如果有任何验证错误，所以这不是方式：

I can add a div around the summary like this, but this will result in an empty red box if there are no validation errors, so this is not the way:

  <div class="my-validation-summary">
        <h2>
            <%=Model.Message%>
        </h2>
        <%= Html.ValidationSummary("There were some errors...")%>
    </div>

我能想到的几种方法来解决这个问题：

I can think of several ways to solve this:

• 添加有条件的边界DIV与服务器端代码


• 通过jQuery添加边界的div


• 写我自己的HtmlHelper包装，打印CSS友好的ValidationSummary

然而，这一切看起来解决这样一个简单的任务相当尴尬。必须有一个更好的方式来做到这一点。也许写的CSS类的一些其他的方式，所以我不的时候没有验证摘要得到一个空框？

However, all of this looks quite awkward for solving such a simple task. There must be a better way to do this. Perhaps some other way of writing the CSS class so I don't get an empty box when there is no validation summary?

编辑：只是为了澄清，我打电话的HTML帮助是这样的：

Just to clarify, I am calling the html helper like this:

<%=Html.ValidationSummary("There were some errors...") %>

编辑2：这个问题的范围是看看我是否忽略了一些死容易和明显。看来我没有，所以我会简单地添加适合我的需要我自己的HtmlHelper功能。我投票结束我自己的问题。

Edit 2: The scope of this question was to see whether I have overlooked something dead-easy and obvious. It seems I haven't, so I'll simply add my own HtmlHelper function that fits my needs. I am voting to close my own question.

推荐答案

下面是一些CSS，将工作：

Here is some CSS that will work:

.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的宽度。

You may have to play around with the widths depending on your other css.

的注释后编辑的

我改变ul.validation-汇总误差零出margin和padding并删除了宽度。它应该工作的跨浏览器了。

I changed ul.validation-summary-errors to zero out the margin and padding and removed the width. It should work cross-browser now.

这篇关于周围的ValidationSummary通过CSS盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！