Окружение ValidationSummary с помощью поля с помощью CSS

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 с тегами на стороне сервера
• Добавление ограничивающего div через jQuery
• Напишите мою собственную оболочку 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, чтобы обнулить поля и отступы и убрал ширину. Теперь он должен работать в разных браузерах.

Answer 2

Другое и нужное решение.

@Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })

Answer 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... */

Answer 4

Если у вас был упаковочный 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>