8

默认情况下 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 函数。我投票结束我自己的问题。

4

4 回答 4

8

这是一些可以工作的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 更改为将边距和填充归零并删除了宽度。它现在应该可以跨浏览器工作。

于 2009-06-02T16:13:13.927 回答
0

如果您有一个像您提供的第二个代码示例一样的包装 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>
于 2009-06-02T16:22:29.993 回答
0

如果我没看错，并且您只想要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... */
于 2009-06-02T17:39:14.183 回答
0

另一个需要的解决方案。

@Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })
于 2017-11-01T20:07:14.767 回答