Html.TextBox с указанным классом css конфликтует с валидацией формы css (input-validation-error)

Question

Интересная ситуация. У меня есть Html.Textbox (), который я отображаю из представления следующим образом:

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

В моем контроллере у меня есть следующая, несколько упрощенная проверка заголовка. Для аргументов предположим, что он находит ошибку и повторно отображает представление с информацией об ошибке состояния модели.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
    Model = new Book(ControllerContext.RequestContext);
    if (String.IsNullOrEmpty(title))
    {
        title = String.Empty;
        ModelState.AddModelError("title", "* Title is a required");
        modelState.SetModelValue("title", ValueProvider["title"]);
    }
    else { // show confirmation }

    if (!ModelState.IsValid)
    {
        return View("EditBook", Model);
    }
}

Когда страница перерисовывается, к моему текстовому полю html правильно добавлен класс input-validation-error ... Но это бесполезно, так как присоединен первый класс! Мне нужно переопределить все существующие стили в моем текстовом поле. Вывод html выглядит следующим образом:

<input type="text" name="title" id="title" class="input-validation-error txt"/>

Предположим, были определены следующие стили CSS:

input.txt { border: 1px; color: #000 }
.input-validation-error { border: 2px solid #fff }

Проблема в том, что мой оригинальный класс css "txt" имеет преимущество и не позволяет мне правильно оформить текстовое поле ошибки.

Есть мысли?

Answer 1

Это скорее вопрос CSS, чем специфический для ASP.NET MVC. Вы должны взглянуть на раздел каскадного заказа CSS spec .

Имея это в виду, вы можете изменить приоритет ваших стилей, настроив его следующим образом:

input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }

С добавлением элемента input к классу input-validation-error, специфичность двух стилей будет одинаковой. Это приведет к тому, что порядок определения стилей будет использоваться для определения приоритета (в этом случае спецификация говорит, что последний объявленный выигрывает).

Обратите внимание, что приведенный выше пример является лишь одним из способов управления приоритетом ... может быть, есть и лучший способ, но я не эксперт по CSS. Вы можете получить лучший / более проницательный ответ, если переспросите как вопрос CSS с тегами CSS.

PS. Порядок, в котором имена классов объявляются в элементе, не имеет значения при определении приоритета.

Answer 2

Вместо того чтобы вообще полагаться на каркас для визуализации стилей, я выбрал подход, в котором я мог бы применять свои собственные классы CSS, при этом все еще используя большую часть инфраструктуры Html.ValidationMessage ().

выглядит примерно так:

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email"));  %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
    <label class="text_right">Email address</label>
    <div class="input">
        <input type="text" id="Email" name="Email" class="input" tabindex="1" />
        <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
    </div>
</div>

Answer 3

Если вы добавите модификатор! Important, он должен помочь с этой проблемой.

.input-validation-error { border: 2px solid #fff !important; }

Также, немного изменив то, что сказал @DSO, я уверен, что вы также можете попробовать это:

input.txt { border: 1px; color: #000 }
input.txt.input-validation-error { border: 2px solid #fff }

Как я уже сказал, я уверен, что вы можете сделать это, если у вас есть что-то с двумя классами CSS.