ASP.NET MVC 3 Razor-将类添加到EditorFor


189

我试图将一个类添加到输入中。

这不起作用:

@Html.EditorFor(x => x.Created, new { @class = "date" })

1
嘿,您甚至也用了正确的名字!-(针对我的代码)

1
注意:对于某些答案,即使它们是正确的,也可能必须清除浏览器缓存才能实现。如果解决方案基于CSS或涉及CSS类,则尤其如此!刚刚花了相当长的一段认识到一个稍微不同的问题....
JosephDoggie

Answers:


183

向其添加类Html.EditorFor没有意义,因为在其模板内部您可以具有许多不同的标签。因此,您需要在编辑器模板中分配该类:

@Html.EditorFor(x => x.Created)

并在自定义模板中:

<div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>

5
很好,谢谢。在我的模型中无法按照DisplayFormat注释格式化字段值。格式化为带有EditorFor和DisplayFor注释的格式,但不带TextBoxFor :(看来我必须使用自定义模板,除非有人可以指出我所缺少的内容。?
Sean

还有一个问题,即TextBoxFor不支持DisplayFormat设置。
jocull 2012年

14
这是ModelTom的GroundController,我向您发送View,并且以最MVC的方式浮动。
特伦特·斯图尔特

3
我有同样的问题,但是我不能使用TextBoxFor,因为我需要与Editor或Display配合使用的DisplayFormat,但是同时我也需要类,以便我可以以只读形式显示文本
AT at

153

从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的新增功能,对编辑器模板的Bootstrap支持


棒极了。谢谢!
尼尔

1
我几乎错过了它,因为它在名单上排名第三。提出自己的问题然后自己回答可能会有所帮助。
罗伯·萨德勒

在MVC 2,3,4期间,我没有任何意义...但是随着越来越多的人开始使用它并抱怨缺乏它-MVC 5:D +1
Piotr Kula

我认为这现在应该是公认的答案。
曼弗雷德

101

您不能为通用EditorFor设置类。如果知道所需的编辑器,则可以立即使用它,在那里可以设置类。您无需构建任何自定义模板。

@Html.TextBoxFor(x => x.Created, new { @class = "date" }) 

5
很好,不需要构建自定义模板真是太好了。
史蒂夫·杜伊斯曼

你为我节省了很多时间乔!
Prashanth Benny's

39

您可以使用:

@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })

(至少使用ASP.NET MVC 5时,但我不知道使用ASP.NET MVC 3时如何。)


请阅读问题标题,这是MVC3的问题,您提供的MVC5解决方案完全具有误导性。
文森特

10
而且,您请阅读我写的完整文章,该文章是为MVC5写的。这是Google的第一个结果,因此在找到解决方案后,我想在这里分享它,也许可以对某些人有所帮助。
przno 2015年

这帮助了我!感谢@przno
Joakim M

29

我遇到了同样令人沮丧的问题,并且我不想创建一个适用于所有DateTime值的EditorTemplate(UI中有很多时间我想显示时间,而不是jQuery UI下拉日历)。在我的研究中,我遇到的根本问题是:

  • 标准的TextBoxFor助手允许我应用自定义类的“ date-picker”来呈现不引人注意的jQuery UI日历,但是TextBoxFor不会在没有时间的情况下格式化DateTime,因此导致日历渲染失败。
  • 标准EditorFor会将DateTime显示为带格式的字符串(当使用适当的属性(例如)修饰时[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")],但不允许我应用自定义的“日期选择器”类。

因此,我创建了自定义HtmlHelper类,它具有以下优点:

  • 该方法自动将DateTime转换为jQuery日历所需的ShortDateString(如果存在时间,jQuery将失败)。
  • 默认情况下,帮助程序将应用所需的htmlAttributes来显示jQuery日历,但是如果需要可以覆盖它们。
  • 如果日期为空,则ASP.NET MVC会将日期1/1/0001作为值。

此方法将其替换为空字符串。

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');
});

刚才对我有帮助,几乎没有问题-在将valueAttribute.Value传递给DateTime.Parse方法之前,需要检查以确保valueAttribute.Value不为空或空格,否则您可能会在空字段上抛出FormatException。
Moo 2012年

谢谢。你帮了我很多
Bronzato

这帮助了我,但是如果你实现这个和你希望进行验证字段中,您将需要应用此逻辑:stackoverflow.com/questions/12023970/...
亚伦牛顿

干得好,但是你知道你可以使用,如果一个DateTime或只是一个时间的控制出现控制DateTimePickerFor和更新你与代表模型的日期字段[DataType(DataType.Date)][DataType(DataType.DateTime)]?您也可以将其放入mm / dd / yyyy格式.ParseFormats(new string[] { "MM/dd/yyyy" })(或轻松修改为所需的格式)。如果它的空,现场也呈现为空,而无需代码英寸
vapcguy

剃刀不认识@MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)。关于如何实现这一点的任何想法?
Mehdiway '16

15

可以通过AdditionalViewData提供类或其他信息-在允许用户基于数据库字段(propertyName,editorType和editorClass)创建表单的情况下,使用此方法。

根据您的初始示例:

@Html.EditorFor(x => x.Created, new { cssClass = "date" })

并在自定义模板中:

<div>
    @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>

8
@ Html.EditorFor(x => x.Created,new {cssClass =“ date”})对我不起作用
Alan Macdonald

1
这对我有用,并且比标记为更好的答案。它提供了使用模板的好处,并且允许进行一些自定义而无需jQuery黑客。
乍得Hedgcock 2014年

TextBoxFor忽略可以在模型中设置的其他属性,例如'DataType'。
马库斯2015年

8

没有任何EditorFor替代方法可以让您传递匿名对象,该对象的属性将以某种方式作为属性添加到某些标签上,尤其是对于内置编辑器模板。您将需要编写自己的自定义编辑器模板,并将所需的值作为附加的视图数据传递。


2
@Html.EditorFor(m=>m.Created ...) 

不允许为“文本”框传递任何参数

这是应用属性的方法。

@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })

2

使用jQuery,您可以轻松做到:

$("input").addClass("class-name")

这是您的输入标签

@Html.EditorFor(model => model.Name)

对于DropDownlist,您可以使用以下代码:

$("select").addClass("class-name")

对于下拉列表:

@Html.DropDownlistFor(model=>model.Name)

2

虽然问题是针对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-*(角度)的属性。


1

您可以创建一个名为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属性(例如,只读,禁用等)执行相同的操作。


1

我使用了另一个使用CSS属性选择器的解决方案来获得所需的内容。

指出您知道的HTML属性,并放入所需的相对样式。

如下所示:

input[type="date"]
{
     width: 150px;
}

1

无需为MVC 4创建自定义模板。使用TextBox而不是EditFor这里不支持特殊的html属性,仅MVC 5支持它。TextBox应该支持MVC 4,我不知道其他版本。

@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })


0

我只需要在一页上设置一个文本框的大小。在模型上编码属性和创建自定义编辑器模板是过分的,因此我只用跨距标记包装了@ Html.EditorFor调用,该跨距标记调用了一个用于指定文本框大小的类。

CSS类声明:

.SpaceAvailableSearch input
{
    width:25px;
}

查看代码:

<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>

0

@Html.EditorFor()在MVC3 RAzor中将类应用到的最佳方法是

@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。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.