asp.net-mvc @Html.EditorFor 如何使属性 type="email"

@Html.EditorFor How to make attribute type="email"

提问by Shane LeBlanc

I can do this easily using a TextBoxForbut how do I do it with an EditorFor?

我可以使用 a 轻松完成此操作，TextBoxFor但如何使用EditorFor?

I figured using the DataAnnotation [DataType(DataType.EmailAddress)]but that doesn't do it.

我想使用 DataAnnotation[DataType(DataType.EmailAddress)]但这并没有做到。

I don't quite understand what the DataTypeannotation actually does because it doesn't seem to do anything at all at first glance.

我不太明白DataType注释实际上做了什么，因为乍一看它似乎根本没有做任何事情。

采纳答案by Josh Earl

The EditorForhelper method is somewhat limited out of the box and doesn't yet appear to support the HTML5 type="email"attribute.

该EditorFor辅助方法，在一定程度上限制了箱子，还没有出现支持HTML5type="email"属性。

Your options right now seem to be either using TextBoxForor creating a custom template that will allow you to set the input's typeattribute. Here's another threadthat reviews some of the options for creating your own templates.

您现在的选择似乎是使用TextBoxFor或创建自定义模板，以允许您设置输入的type属性。这是另一个线程，它回顾了创建自己的模板的一些选项。

The DataAnnotation [DataType(DataType.EmailAddress)]is actually quite useful. It sets the idand nameof your form field to email, which you can use with jQuery validation to show the user client-side validation messages. Applying the DataAnnotationto your model class also means that the email property on your model will be automatically validated on the server side. If you enable unobtrusive validation in your app, you get client- and servers-side validation almost for free.

该DataAnnotation [DataType(DataType.EmailAddress)]实际上是非常有用的。它将表单字段的id和设置name为email，您可以将其与 jQuery 验证一起使用以显示用户客户端验证消息。将DataAnnotation应用于您的模型类还意味着您模型上的 email 属性将在服务器端自动验证。如果您在应用程序中启用不显眼的验证，您几乎可以免费获得客户端和服务器端验证。

回答by Ankita Singh

You can override the HTML Attributes, to which a browser will fallback to type='text'if they do not support it:

您可以覆盖 HTML 属性，type='text'如果浏览器不支持，浏览器将回退到该属性：

@Html.TextBoxFor(m => m.Email, new { @type = "email" })

@Html.TextBoxFor(m => m.Email, new { @type = "email" })

回答by jortizromo

it seems to be supported now.

现在好像支持了。

@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", @type = "email" } })

回答by LuckyBrain

As an addition to jortizromo's answer, you have now at least two options:

作为jortizromo答案的补充，您现在至少有两个选择：

1. Specifying @typein the htmlAttributesparameter for method EditorFor()as in

   @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @type = "email" } })
   

2. Using the EmailAddressannotation attribute from System.ComponentModel.DataAnnotationsnamespace in the model class definition for the corresponding Emailproperty and a simple call to method EditorFor() (this provides HTML validation data tags which could be a good or bad idea depending on your task) as in

   ViewModel

   [EmailAddress]
   public string Email { get; set; }
   

   Razor View

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

1. @type在htmlAttributes方法的参数中指定EditorFor()为

   @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @type = "email" } })
   

2. 在相应属性的模型类定义中使用命名空间中的EmailAddress注释属性和对方法 EditorFor() 的简单调用（这提供了 HTML 验证数据标记，这取决于您的任务，这可能是一个好主意或坏主意），如System.ComponentModel.DataAnnotationsEmail

   视图模型

   [EmailAddress]
   public string Email { get; set; }
   

   剃刀视图

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