2011-01-25 35 views
39

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

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

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

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

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

语法错误,','预计

我在做什么错在这里?

回答

25

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

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

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

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

78

随着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

+0

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

5

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

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

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

+23

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

-3

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

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

4

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

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

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

我知道这是一个老问题,但我认为我可以为此做出贡献。我有同样的问题,并希望避免编辑模板。我只是想要一个通用的处理一切的解决方案,这将允许我在视图中使用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属性。

1

我正在寻找一种解决方案,将样式应用于由@ 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)