添加css类到Html.EditorFor MVC 2

问题描述：

我想添加一个css类到文本框。这是我在我的观点：添加css类到Html.EditorFor MVC 2

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

我试图让我的代码下面这个link说明：

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

但我得到一个编译错误说：

语法错误，'，'预计

我在做什么错在这里？

答

我会强烈建议使用Editor Templates。这绝对是编辑EditorFor的“正确”方式。

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

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

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

答

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

答

随着MVC3，我不停地敲我的头，因为我无法得到这个工作。我不想创建一个完整的EditorTemplate来添加一个类。

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

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

+28

当您需要在editmode中存储数据时，这不起作用。也就是说，否则用`[DisplayFormat（DataFormatString =“{0：dd-MMMM-yyyy}”，ApplyFormatInEditMode = true）]这样的东西装饰你的模型将不起作用。 – Abel 2012-04-16 13:27:43

这个问题的任何解决方案呢？ – akd 2014-06-24 11:12:22

答

我想一个快速和肮脏的方式做到这将是jQuery的，是吗？

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

当javascript被关闭？ – 2011-10-11 15:13:15

+23

然后你的日期选择器可能无法正常工作。人们是否真的在编写Web应用程序时期望他们能够在JavaScript中禁用？ – 2011-10-19 15:00:16

答

这里是一个非常简单的解决方案：从"datepicker"删除双引号和重新输入他们回来到Visual Studio，它应该工作。

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

答

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

我尝试了许多的上述建议，但最终，我看中了这一点，因为我觉得它是那么复杂，它让我继续使用编辑器模板：

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

答

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

我真的很喜欢CIA的答案，但是我扩展了一下，这样你就可以传递你需要的任何属性。我创建了一个接受HTML属性的额外Html.EditorFor方法： -

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属性。

答

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

的问题是关于设置一个CSS类@ HTML.EditorFor但谁想要编辑的样式单个元素 ..你可以，例如，试试这个：

在我挡，我加了一个风格基础上由助手生成的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)

添加css类到Html.EditorFor MVC 2

相关推荐