在 MVC 2 中将 css 类添加到 Html.EditorFor

Posted 2023-04-18

【中文标题】在 MVC 2 中将 css 类添加到 Html.EditorFor

【英文标题】：Add css class to Html.EditorFor in MVC 2

【发布时间】：2011-06-14 22:35:19

【问题描述】：

我正在尝试将 CSS 类添加到文本框。这是我的看法：

<%: html.EditorFor(m => m.StartDate) %>

我尝试按照link 的说明编写代码：

<%: Html.EditorFor(m => m.StartDate, new  @class: "datepicker" ) %>

但是我得到一个编译器错误提示：

语法错误，应为“,”

我在这里做错了什么？

【参考方案1】：

对于 MVC3，我一直在敲我的头，因为我无法让它工作。我不想为了添加一个类而创建一个完整的 EditorTemplate。

好吧，不要使用 EditorFor，而是使用 TextBoxFor，当然还有像这样的等号：

@Html.TextBoxFor(m=> m.ZipCode, new  @class = "zip" )

【讨论】：

当您需要将数据置于编辑模式时，这不起作用。也就是说，否则用 [DisplayFormat(DataFormatString = "0:dd-MMMM-yyyy", ApplyFormatInEditMode = true)] 之类的东西装饰你的模型是行不通的。

这个问题有什么解决办法吗？

【参考方案2】：

我强烈建议使用Editor Templates。这绝对是设置 EditorFor 样式的“正确”方式。

您可以通过两种不同的方式告诉模型属性使用编辑器模板。

第一个（最简单的）是为某种数据类型创建一个编辑器模板 - 例如DateTime。 第二种方法是使用 UIHint 在 DataAnnotations 中以声明方式设置它。

编辑 我还想补充一点，您应该在输入字段中使用“日期”类型，这样即使禁用了 javascript，您的用户仍然可以看到本机日期选择器（仅在现代 HTML5 浏览器上有效）<input id="meeting" type="date" value="2011-01-13"/>

【参考方案3】：

我想一个快速而肮脏的方法是在 jQuery 中，是吗？

$(document).ready(function () 
    $('#StartDate').addClass('datepicker');
);

【讨论】：

什么时候关闭javascript？

那么你的日期选择器可能无论如何都不会工作。人们是否真的期望在禁用 javascript 的情况下编写 Web 应用程序？

那如果用户没有现代浏览器怎么办？

说真的老兄？阅读Progressive Enhancement。您构建自己的网站，使其适用于所有人，然后逐步为拥有更好/更新浏览器的人增强它。

继续禁用javascript，刷新此页面，然后尝试输入回复。你不能。期望您的用户启用 javascript 是合理的，否则日期选择器之类的某些功能将无法正常工作。在那种情况下，他们仍然可以输入日期。

【参考方案4】：

理想情况下，您应该使用编辑器模板。我通过使用 MvcHtmlString.Create() 中的编辑器模板解决了这个问题，它可以让您重建实际的 HTML 代码。当然，您需要复制“类”部分中的所有内容，以使编辑器模板尽可能有用。

我尝试了上面的许多建议，但最终还是选择了这个，因为我认为它不那么复杂，它让我可以继续使用编辑器模板：

@MvcHtmlString.Create(Html.EditorFor(m => m.StartDate).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line datepicker\""))

【讨论】：

然后有一天，text-box single-line 有了更新，一切都停止了……抱歉，依靠Replace() 不是最好的主意

如果以后更新text-box single-line，问题就比较简单了。我将相应地更新代码。在可以选择使用编辑器模板并允许我轻松/简单地添加/替换类之前，我可以接受。

我愿意！这就是我在这里的原因。很高兴看到所有这些人为解决问题提供了很好的建议。嘿，我有个主意！您也可以通过给我惊人的建议/替代方案来帮助我！除非你更喜欢打人。因为这只会增加人们对程序员是愤世嫉俗和反社会的人的刻板印象，他们认为自己比其他人都好，同时窃笑你在没有人听的情况下自言自语的内部笑话。我的意思是，谁做对了？这不像你只评论，因为你想要关注。对吗？

@MvcHtmlString.Create(Html.EditorFor(m => m.StartDate).ToString().Replace("class=\"", "class=\"datepicker")) 怎么样。这样我们就不用担心类属性的进一步更新了。

【参考方案5】：

EditorFor 没有允许您设置 HtmlProperties 的重载。 (IDictionary htmlAttributes)

此链接说明了如何操作：

http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

【参考方案6】：

我知道这是一个老问题，但我认为我可以做出贡献，所以就这样吧。我有同样的问题，想避免制作编辑器模板。我只是想要一个通用的处理一切的解决方案，它允许我在视图中使用 Html.EditorFor 时指定 html 属性。

我真的很喜欢 CIA 的回答，但我对其进行了扩展，以便您可以传递所需的任何属性。我创建了一个额外的 Html.EditorFor 方法来接受 html 属性：-

public static class EditorForExtentions

    public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes, bool extendAttributes)
    
        string value = html.EditorFor(expression).ToString();

        PropertyInfo[] properties = htmlAttributes.GetType().GetProperties();
        foreach (PropertyInfo info in properties)
        
            int index = value.ToLower().IndexOf(info.Name.ToLower() + "=");
            if (index < 0)
                value = value.Insert(value.Length - (value.EndsWith("/>") ? 2 : 1), info.Name.ToLower() + "=\"" + info.GetValue(htmlAttributes, null) + "\"");
            else if (extendAttributes)
                value = value.Insert(index + info.Name.Length + 2, info.GetValue(htmlAttributes, null) + " ");            
        

        return MvcHtmlString.Create(value);
    

你可以在这样的视图中调用它

<%=Html.EditorFor(m => m.StartDate, new  @class = "datepicker" , true)%>

它使用普通的 Html.EditorFor 方法获取 html 字符串，然后注入所需的 html 属性。

【参考方案7】：

我正在寻找一种解决方案，将样式应用于由 @HTML.EditorFor 辅助方法生成的特定框。

问题是关于为 @HTML.EditorFor 设置 CSS 类，但 对于任何想要编辑 单个元素的样式的人......例如，您可以，试试这个：

在我的块中，我添加了一个基于助手生成的 ID 的样式： ..

<style> 
    #EnrollmentInfo_Format
    
        width:50px;
        font: normal 100% 'Lucida Grande',Tahoma,sans-serif;
        font-size: 11px;
        color: #2e6e9e;
    
</style>

然后在我的页面中（我在局部视图中这样做）：

@Html.EditorFor(e => e.EnrollmentInfo.Format)

【讨论】：

几个月来我一直在尝试寻找一种解决方案来设置这些 dang Helper 标签的样式，但没有成功，而您的解决方案正是我所需要的！谢谢！

【参考方案8】：

这是一个非常简单的解决方案：从"datepicker" 中删除双引号并将它们重新输入Visual Studio，它应该可以工作。

我遇到了同样的问题。我从网上复制/粘贴了示例代码，代码有一种特殊类型的引号，导致"," 语法问题。我知道这真的不明显。