ASP.NET MVC 3 Razor – 将类添加到EditorFor
我想添加一个类到input。
这不工作：
@Html.EditorFor(x => x.Created, new { @class = "date" }) 添加一个类到Html.EditorFor没有意义，因为在它的模板里你可以有许多不同的标签。 所以你需要在编辑器模板里面指定这个类：
@Html.EditorFor(x => x.Created)
并在自定义模板中：
<div> @Html.TextBoxForModel(x => x.Created, new { @class = "date" }) </div>
从ASP.NET MVC 5.1开始，向EditorFor添加一个类是可能的（原始问题指定为ASP.NET MVC 3，并且接受的答案仍然是最好的）。
@Html.EditorFor(x=> x.MyProperty, new { htmlAttributes = new { @class = "MyCssClass" } })
请参阅： ASP.NET MVC 5.1中的新function，编辑器模板的引导支持
您不能为通用的EditorFor设置类。 如果你知道你想要的编辑器，你可以马上使用它，在那里你可以设置类。 您不需要构build任何自定义模板。
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
我有同样令人沮丧的问题，我不想创build一个适用于所有DateTime值的EditorTemplate（有时在我的UI显示时间，而不是一个jQuery UI下拉日历）。 在我的研究中，我遇到的根本问题是：
- 标准的TextBoxFor帮助程序允许我应用自定义的“date-picker”类来呈现不引人注目的jQuery UI日历，但TextBoxFor不会在没有时间的情况下格式化DateTime，因此导致日历渲染失败。
- 标准的EditorFor会将DateTime显示为一个格式化的string（当使用
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]等适当的属性进行修饰时，它不会允许我应用自定义的“dateselect器”类。
因此，我创build了具有以下好处的自定义HtmlHelper类：
- 该方法自动将DateTime转换为jQuery日历所需的ShortDateString（如果时间存在，jQuery将失败）。
- 默认情况下，该帮助程序将应用所需的htmlAttributes来显示一个jQuery日历，但是如果需要的话，它们可以被覆盖。
-
如果date为空，则ASP.NET MVC将把1/1/0001的date作为值。 这个方法用一个空stringreplace。
public static MvcHtmlString CalenderTextBoxFor（this HtmlHelper htmlHelper，Expression> expression，object htmlAttributes = null）{var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor（htmlHelper，expression，htmlAttributes ?? new {@class =“text-box单行dateselect器“}）; var xDoc = XDocument.Parse（mvcHtmlString.ToHtmlString（））; var xElement = xDoc.Element（“input”）; if（xElement！= null）{var valueAttribute = xElement.Attribute（“value”）; if（valueAttribute！= null）{valueAttribute.Value = DateTime.Parse（valueAttribute.Value）.ToShortDateString（）; if（valueAttribute.Value ==“1/1/0001”）valueAttribute.Value = string.Empty; }}返回新的MvcHtmlString（xDoc.ToString（））; }
对于那些想要知道使用date-picker类装饰查找对象的JQuery语法来呈现日历的人，这里是：
$(document).ready(function () { $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true }); $('.date-picker').datepicker('option', 'showAnim', 'slideDown'); });
您可以使用：
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
（至less在ASP.NET MVC 5中，但是我不知道ASP.NET MVC 3是如何的）
可以通过AdditionalViewData提供一个类或其他信息 – 我使用这个地方允许用户根据数据库字段（propertyName，editorType和editorClass）创build一个表单。
根据你最初的例子：
@Html.EditorFor(x => x.Created, new { cssClass = "date" })
并在自定义模板中：
<div> @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] }) </div>
没有任何EditorFor覆盖可以让你传入一个匿名对象，这个匿名对象的属性会以某种方式作为某些标签的属性添加，特别是对于内置的编辑器模板。 您需要编写自己的自定义编辑器模板，并将所需的值作为附加的viewdata传递。
@Html.EditorFor(m=>m.Created ...)
不允许在文本框中传入任何参数
这是如何应用属性。
@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })
使用jQuery，你可以轻松地做到这一点：
$("input").addClass("class-name")
这是你的input标签
@Html.EditorFor(model => model.Name)
对于DropDownlist，你可以使用这个：
$("select").addClass("class-name")
对于下拉列表：
@Html.DropDownlistFor(model=>model.Name)
您可以创build相同的行为，创build一个名为DateTime.cshtml的简单自定义编辑器，并将其保存在Views / Shared / EditorTemplates中
@model DateTime @{ var css = ViewData["class"] ?? ""; @Html.TextBox("", (Model != DateTime.MinValue? Model.ToString("dd/MM/yyyy") : string.Empty), new { @class = "calendar medium " + css}); }
并在你的意见
@Html.EditorFor(model => model.StartDate, new { @class = "required" })
请注意，在我的例子中我硬编码两个CSS类和date格式。 你当然可以改变这一点。 你也可以用别人的html属性来做同样的事情，比如readonly，disabled等
我用另一个解决scheme使用CSS属性select器来获得你所需要的。
指出你知道的HTML属性，并以你想要的相对风格进行放置。
如下所示：
input[type="date"] { width: 150px; }
你也可以通过jQuery来做到这一点：
$('#x_Created').addClass(date);
我只需要在一个页面上设置一个文本框的大小。 在模型上编码属性和创build自定义编辑器模板是矫枉过正的，所以我只是用一个span标签包装了@ Html.EditorFor调用，该标签调用了一个指定文本框大小的类。
CSS类声明：
.SpaceAvailableSearch input { width:25px; }
查看代码：
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>
在MVC3 RAzor中将类应用于@Html.EditorFor()一个最佳方法是
@Html.EditorFor(x => x.Created) <style type="text/css"> #Created { background: #EEE linear-gradient(#EEE,#EEE); border: 1px solid #adadad; width:90%; } </style>
它会将以上样式添加到您的EditorFor()
它适用于MVC3。
不需要为MVC创build自定义模板4.使用TextBox代替EditFor这里不支持特殊的html属性，它只支持从MVC 5. TextBox应该支持MVC 4，我不知道其他版本。
@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })
虽然这个问题是针对MVC 3.0，我们也发现问题仍然存在于MVC 4.0。 MVC 5.0现在包含本地重载的htmlAttributes。
我被迫在当前的工作岗位上使用MVC 4.0，并且需要为JQuery集成添加一个css类。 我用一个扩展方法解决了这个问题
扩展方法：
using System.Linq; using System.Web.Mvc; using System.Web.Routing; using System.Xml.Linq; namespace MyTest.Utilities { public static class MVCHelperExtensionMethods { public static MvcHtmlString AddHtmlAttributes(this MvcHtmlString input, object htmlAttributes) { // WE WANT TO INJECT INTO AN EXISTING ELEMENT. IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE // CREATE THE ATTRIBUTE WITH DATA VALUES. // USE XML PARSER TO PARSE HTML ELEMENT var xdoc = XDocument.Parse(input.ToHtmlString()); var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault(); // IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED. if (rootElement == null) { return input; } // USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES var routeValueDictionary = new RouteValueDictionary(htmlAttributes); foreach (var routeValue in routeValueDictionary) { var attribute = rootElement.Attribute(routeValue.Key); if (attribute == null) { attribute = new XAttribute(name: routeValue.Key, value: routeValue.Value); rootElement.Add(attribute); } else { attribute.Value = string.Format("{0} {1}", attribute.Value, routeValue.Value).Trim(); } } var elementString = rootElement.ToString(); var response = new MvcHtmlString(elementString); return response; } } }
HTML标记用法：
@Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })
（确保在razor视图中包含扩展方法的名称空间）
说明：这个想法是注入现有的HTML。 我select使用XDocument.Parse()使用Linq-to-XMLparsing当前元素。 我将htmlAttributes作为typesobject传递。 我利用MVC的RouteValueDictionary来parsing传递的htmlAttributes。我将他们已经存在的属性合并，或添加一个新的属性，如果它还不存在。
如果input不能被XDocument.Parse()parsing，我放弃所有希望，并返回原始inputstring。
现在，我可以使用DisplayFor（渲染数据types，例如适当的货币）的好处，但也有能力指定CSS类（和任何其他属性）。 可能有助于添加诸如data-*或ng-* （Angular）之类的属性。
