ASP.NET MVC HTML辅助方法，新的HTML5输入类型 [英] ASP.NET MVC HTML helper methods for new HTML5 input types

问题描述

HTML5似乎支持输入字段的一系列新获取<一个href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute">things如：

• 数字
• 电子邮件地址
• 颜色
• 网址
• 在数值范围（通过滑块）
• 日期
• 在搜索框中

对于ASP.NET MVC

有没有人实施的HtmlHelper 扩展方法生成这些了吗？这是可能的使用接受，过载 htmlAttributes 如要做到这一点：

  Html.TextBoxFor（型号=＆GT; model.Foo，新的{type =数字，最小为0，最大=100}）
 

但是，这不是很好（或类型安全）为：

  Html.NumericInputFor（型号=＆GT; model.Foo，最小值：0，最大值：100）
 

解决方案

只是抬起头，许多这些现在都纳入MVC4使用<一个href="http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.datatype.aspx"><$c$c>DataType属性。

由于的您可以使用该工作项目：

 公共类为MyModel
{
    //变为＆LT;输入类型=数字...＆GT;
    公众诠释ID {获得;组; }

    //变为＆LT;输入类型=网址......＆GT;
    [数据类型（DataType.Url）
    公共字符串网{获得;组; }

    //变为＆LT;输入类型=电子邮件......＆GT;
    [数据类型（DataType.EmailAddress）
    公共字符串电子邮件{获得;组; }

    //变为＆LT;输入类型=电话...＆GT;
    [数据类型（DataType.PhoneNumber）
    公共字符串联系号码{获得;组; }

    //变为＆LT;输入类型=日期时间...＆GT;
    [数据类型（DataType.DateTime）
    公开日期时间日期时间{获得;组; }

    //变为＆LT;输入类型=日期...＆GT;
    [数据类型（DataType.Date）
    公开日期时间日期{获得;组; }

    //变为＆LT;输入类型=时间......＆GT;
    [数据类型（DataType.Time）
    公众的DateTime时间{获得;组; }
}
 

HTML5 appears to support a new range of input fields for things such as:

• Numbers
• Email addresses
• Colors
• URLs
• Numeric range (via a slider)
• Dates
• Search boxes

Has anyone implemented HtmlHelper extension methods for ASP.NET MVC that generates these yet? It's possible to do this using an overload that accepts htmlAttributes, such as:

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

But that's not as nice (or typesafe) as:

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

解决方案

Just a heads up that many of these are now incorporated into MVC4 by using the DataType attribute.

As of this work item you can use:

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

这篇关于ASP.NET MVC HTML辅助方法，新的HTML5输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！