MVC3 TextBoxFor 添加类去掉 input-validation-error 验证 css 类答案

【问题标题】：MVC3 TextBoxFor adding a class removes the input-validation-error validation css classMVC3 TextBoxFor 添加类去掉 input-validation-error 验证 css 类
【发布时间】：2014-07-26 22:26:09
【问题描述】：

我有一个用于控制我的剃刀视图的文本框：

@Html.TextBoxFor(model => model.PrimaryAddressLine1)

如果用户将此字段留空，验证将向该字段添加 class="input-validation-error" 将其颜色更改为红色（如预期的那样）。但是，如果我尝试像这样向字段添加自定义 css 类：

@Html.TextBoxFor(model => model.PrimaryAddressLine1, new { @Class = "addressfield" })

我失去了红色，因为“输入验证错误”类不再添加到控件中。

如何保持红色并添加我的自定义 css 类？

【问题讨论】：

我不确定这是否重要，但通常@class 会小写。
在地址字段类中添加 color=red 怎么样？ :)
你是在那边实现条件验证吗？
如何添加验证消息？你在使用@Html.ValidationMessageFor(model => model.PrimaryAddressLine1)。发生这种情况是因为您使用自己的类，所以如果您想保留颜色，只需将 background-color:red 添加到您的地址字段类或删除您的地址字段类并添加 @Html.TextBoxFor(model => model.PrimaryAddressLine1, new { style = "any styles you want" }) 这不会覆盖 input-validation-error 类
Moises：我不想使用样式属性，因为我有几个字段都具有相同的样式，我希望用一个 css 类来设置它们的样式。我不想在每个字段旁边添加验证消息，因为它不适用于我的设计，我在页面顶部使用验证摘要。 gardarvalur：如果我只添加 color=red 字段将永远是红色的！当出现验证错误时，我只想要红色。埃里克：没有什么不同

标签： css asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

将@Class 更改为@class。这对我有用。

@Html.TextBoxFor(model => model.PrimaryAddressLine1, new { @class = "addressfield" })

【讨论】：

不错的发现。出于某种原因，我似乎总是使用大写的 Class 并且直到现在才意识到它有所作为。小写类对此非常有用，谢谢。
如果它解决了你的问题，记得把它标记为答案:)
我希望我能，不幸的是我不是最初的发帖人。对不起。

【解决方案2】：

在文本框行下方添加验证器，如下所示

 <div class="form-group">
            @Html.LabelFor(c => c.CompanyName, new { @class = "col-md-2 control-label" })
            <div class="col-sm-10 ">
                @Html.TextBoxFor(c=>c.CompanyName, new { @class = "form-control" })
                @Html.ValidationMessageFor(c => c.CompanyName, "", new { @style="color:blue;"})
            </div>
        </div>

输出会是这样的

【讨论】：

我不想在每个字段旁边添加验证消息，因为它不适用于我的应用程序设计。我希望该字段具有给定的样式，但如果出现验证错误，请将字段更改为红色。

【解决方案3】：

虽然 ValidationMessageFor 选项在大多数情况下都适用，但我实际上并不希望在字段旁边显示消息。我使用页面顶部的 ValidationSummary 来列出错误。添加样式属性也是可以接受的，但是我有几个字段，我想将所有字段的样式设置为匹配，而 css 将是我期望实现这一点的方式。

我创建了一个自定义文本框，它允许我指定字段是“锁定”还是“解锁”我做了一些更改，以使其在字段出现故障时添加验证类，同时保持任何自定义 CSS 类。

    public static MvcHtmlString LockableTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes, bool locked)
    {
        string fullName = ExpressionHelper.GetExpressionText(expression);

        // Convert htmlAttributes into a dictionary
        RouteValueDictionary dic = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

        // Get the validation attributes
        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);            
        IDictionary<string, object> validationAttributes = helper
            .GetUnobtrusiveValidationAttributes(ExpressionHelper.GetExpressionText(expression), metadata);

        // Merge attributes
        foreach (var item in validationAttributes)
        {
            if (dic.ContainsKey(Key))
                dic[Key] = string.Format("{0} {1}", dic[Key], Value);
            else
                dic.Add(Key, Value);
        }            

        // If there are any errors for a named field, we add the CSS attribute.
        ModelState modelState;
        if (helper.ViewData.ModelState.TryGetValue(fullName, out modelState) && modelState.Errors.Count > 0)
            dic.HikiAddUpdateItem("class", HtmlHelper.ValidationInputCssClassName);

        // Toggle readonly
        if (locked)
        {
            if (dic.ContainsKey("readonly"))
                dic["readonly"] = "readonly"
            else
                dic.Add("readonly", "readonly");                
        }

        // Return textbox
        return helper.TextBoxFor(expression, dic);
    }

【讨论】：

【解决方案4】：

试试这个：

@Html.TextBoxFor(model  => model.PrimaryAddressLine1, new { @id = "oid", @class= "addressfield" })
<span style="color: Red">@Html.ValidationMessageFor(model  => model.PrimaryAddressLine1)</span>

【讨论】：

这只是在字段旁边添加验证消息，不会更改实际字段的 css 类。我不想在每个字段旁边添加验证消息，因为它在我的设计中不起作用。