我试图将一个类添加到输入中。
这不起作用:
@Html.EditorFor(x => x.Created, new { @class = "date" })
我试图将一个类添加到输入中。
这不起作用:
@Html.EditorFor(x => x.Created, new { @class = "date" })
Answers:
向其添加类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" } })
您不能为通用EditorFor设置类。如果知道所需的编辑器,则可以立即使用它,在那里可以设置类。您无需构建任何自定义模板。
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
您可以使用:
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
(至少使用ASP.NET MVC 5时,但我不知道使用ASP.NET MVC 3时如何。)
我遇到了同样令人沮丧的问题,并且我不想创建一个适用于所有DateTime值的EditorTemplate(UI中有很多时间我想显示时间,而不是jQuery UI下拉日历)。在我的研究中,我遇到的根本问题是:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
,但不允许我应用自定义的“日期选择器”类。因此,我创建了自定义HtmlHelper类,它具有以下优点:
此方法将其替换为空字符串。
public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
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;
}
}
return new MvcHtmlString(xDoc.ToString());
}
对于那些想知道JQuery语法的人,这些语法会查找具有date-picker
类装饰的对象然后呈现日历,这里是:
$(document).ready(function () {
$('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
$('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});
DateTimePickerFor
和更新你与代表模型的日期字段[DataType(DataType.Date)]
或[DataType(DataType.DateTime)]
?您也可以将其放入mm / dd / yyyy格式.ParseFormats(new string[] { "MM/dd/yyyy" })
(或轻松修改为所需的格式)。如果它的空,现场也呈现为空,而无需代码英寸
@MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)
。关于如何实现这一点的任何想法?
可以通过AdditionalViewData提供类或其他信息-在允许用户基于数据库字段(propertyName,editorType和editorClass)创建表单的情况下,使用此方法。
根据您的初始示例:
@Html.EditorFor(x => x.Created, new { cssClass = "date" })
并在自定义模板中:
<div>
@Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>
@Html.EditorFor(m=>m.Created ...)
不允许为“文本”框传递任何参数
这是应用属性的方法。
@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })
虽然问题是针对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" })
(确保在剃刀视图中包括扩展方法的名称空间)
说明:
想法是注入到现有的HTML中。我选择使用Linq-to-XML解析当前元素XDocument.Parse()
。我将htmlAttributes传递为type object
。我利用MVC RouteValueDictionary
解析传入的htmlAttributes。我将属性合并到它们已经存在的地方,或者添加一个不存在的新属性。
如果输入无法解析,则XDocument.Parse()
我放弃所有希望并返回原始输入字符串。
现在,我可以利用DisplayFor的好处(适当地渲染诸如货币之类的数据类型),还可以指定CSS类(以及与此相关的任何其他属性)。可能有助于添加诸如data-*
或ng-*
(角度)的属性。
您可以创建一个名为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类和日期格式进行了硬编码。您当然可以更改它。您还可以对其他html属性(例如,只读,禁用等)执行相同的操作。