用于新HTML5输入类型的ASP.NET MVC HTML帮助程序方法

Question

HTML5似乎支持一系列新的输入字段,例如:

• 数字
• 电子邮件地址
• 颜色
• 网址
• 数字范围(通过滑块)
• 日期
• 搜索框

有没有HtmlHelper人为ASP.NET MVC实现生成这些的扩展方法呢？可以使用接受的重载来执行此操作htmlAttributes,例如:

Html.TextBoxFor(model => model.Foo, new { type="number", min="0", max="100" })

但那并不像以下那样好(或类型安全):

Html.NumericInputFor(model => model.Foo, min:0, max:100)

Answer 1

只是提醒一下,其中许多现在通过使用DataType属性合并到MVC4中.

在此工作项目中,您可以使用:

public class MyModel 
{
    // Becomes <input type="number" ... >
    public int ID { get; set; }

    // Becomes <input type="url" ... >
    [DataType(DataType.Url)]
    public string WebSite { get; set; }

    // Becomes <input type="email" ... >
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    // Becomes <input type="tel" ... >
    [DataType(DataType.PhoneNumber)]
    public string PhoneNumber { get; set; }

    // Becomes <input type="datetime" ... >
    [DataType(DataType.DateTime)]
    public DateTime DateTime { get; set; }

    // Becomes <input type="date" ... >
    [DataType(DataType.Date)]
    public DateTime Date { get; set; }

    // Becomes <input type="time" ... >
    [DataType(DataType.Time)]
    public DateTime Time { get; set; }
}

Answer 2

查看 ASP.net MVC HTML5 Helpers Toolkit

Answer 3

我不喜欢DataTypes属性的是你必须在视图中使用EditorFor.然后,您不能使用htmlAttributes来装饰您的标签.还有其他解决方案,但我更喜欢这种方式.

在这个例子中,我只扩展了我最常使用的签名.

所以在课堂上:

using System.Linq.Expressions;
namespace System.Web.Mvc.Html
{
    public static class HtmlExtensions
    {
        public static MvcHtmlString EmailFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, Object htmlAttributes)
        {
            MvcHtmlString emailfor = html.TextBoxFor(expression, htmlAttributes);
            return new MvcHtmlString(emailfor.ToHtmlString().Replace("type=\"text\"", "type=\"email\""));
        }
    }
}

如你所见,我刚刚更改了type ="email"的type ="text",然后我可以在我的视图中使用:

    <div class="form-group">            
        @Html.LabelFor(m => m.Email, new { @class = "col-lg-2 control-label" })
        <div class="col-lg-10">
            @Html.EmailFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })
            @Html.ValidationMessageFor(m => m.Email)                                 
        </div>            
    </div>

而html源代码为:

<div class="form-group">            
    <label class="col-lg-2 control-label" for="Email">Email</label>
    <div class="col-lg-10">
        <input class="form-control" data-val="true" data-val-required="The Email field is required." id="Email" name="Email" placeholder="Email" type="email" value="" />
        <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>                                 
    </div>            
</div> 

Answer 4

最简单的方法是简单地添加type ="Email"作为html属性.它会覆盖默认的type ="text".这是一个带有html5必需验证器的示例:

@Html.TextBox("txtEmail", "", new {placeholder = "email...", @type="email", @required = ""})

Answer 5

喜欢它,什么时候可以从模型中驱动这种类型的东西!我装饰了我的模型 [DataType(DataType.PhoneNumber)],除了一个以外都工作了.

我意识到这种困难的方式@Html.TextBoxFor并没有实现,type="<HTML5 type>"但@Html.EditorFor确实如此.有道理我想现在我想起来了,但发布这个可能会让其他人失去我刚刚失去的令人沮丧的几分钟;)