Question

有趣的情况。我有一个Html.Textbox（），我从视图中呈现如下：

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

在我的控制器中，我对标题进行了以下有些简化的验证。为了论证，假设它找到错误，并使用modelstate错误信息重新呈现视图。

[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文本框正确地附加了输入验证错误类......但它没用，因为它是附加的第一个类！我需要它覆盖我的文本框上的所有现有样式。 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

这是一个比ASP.NET MVC特定的CSS问题。您应该查看CSS spec的层叠顺序部分。

考虑到这一点，您可以通过如下调整样式来更改样式的优先级：

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

通过在input-validation-error类中添加input元素，两种样式的特异性将是相同的。这将导致样式的声明顺序用于确定优先级（在这种情况下，规范说最后一个声明获胜）。

注意上面的例子只是控制优先级的一种方式......可能有更好的方法，但我不是CSS专家。如果您使用CSS标记重新提出CSS问题，则可能会获得更好/更有洞察力的响应。

PS。在确定优先级时，在元素上声明类名的顺序无关紧要。

Answer 2

如果你添加！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类的话，我很确定你能做到这一点。

Answer 3

我没有依赖框架来渲染样式，而是采用了一种方法，我可以应用自己的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>

带有css类的Html.TextBox与表单验证css冲突（输入验证错误）

3 个答案: