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

只是一个提示,其中许多现在通过使用 DataType

截至 this work item

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 HTML5 Helpers Toolkit

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

数据类型 属性是你必须使用的 编辑 在视野中。那么,你不能使用 装饰你的标签。有其他的解决办法,但我更喜欢这样。

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

所以在课堂上:

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> 

当你能把这类东西从模特身上赶走的时候,我就喜欢它了!!我把我的模型装饰成 [DataType(DataType.PhoneNumber)] ,除一人外,其他人都成功了。

我意识到 @Html.TextBoxFor 不会渲染 type="<HTML5 type>" 但是 @Html.EditorFor 做。我想现在我想这是有道理的,但是发布这篇文章也许可以让其他人省下我刚刚失去的令人沮丧的几分钟;)

我发现我自己想要的数字微调器时,你得到使用 <input type='number' /> 最后我自己解决了。

从Html.TextBoxFor您可以使用MVC为您提供的所有客户端验证功能。在本例中,我使用 data-val-range 属性设置约束微调器所需的最小/最大属性。

public static HtmlString SpinnerFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
    XDocument _xml = XDocument.Parse(html.TextBoxFor(expression, htmlAttributes).ToString());
    XElement _element = _xml.Element("input");

    if (_element != null)
    {
        _element.SetAttributeValue("type", "number");

        if (_element.Attribute("data-val-range-max") != null) 
            _element.SetAttributeValue("max", _element.Attribute("data-val-range-max").Value);

        if (_element.Attribute("data-val-range-min") != null) 
            _element.SetAttributeValue("min", _element.Attribute("data-val-range-min").Value);
    }

    return new HtmlString(_xml.ToString());
}

然后,您可以像使用视图中的任何其他HtmlHelper一样使用它:

@Html.SpinnerFor(model => model.SomeNumber, new { htmlAttribute1 = "SomeValue" })

不管怎样,这是我的实现,从你的问题我可以看出你想要:

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

将我的方法进行如下调整非常简单:

public static HtmlString NumericInputFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, int min, int max)
{
    XDocument _xml = XDocument.Parse(html.TextBoxFor(expression, htmlAttributes).ToString());
    XElement _element = _xml.Element("input");

    if (_element != null)
    {
        _element.SetAttributeValue("type", "number");
        _element.SetAttributeValue("min", min);
        _element.SetAttributeValue("max", max);
    }

    return new HtmlString(_xml.ToString());
}

基本上,我所做的就是重命名它并提供min/max作为参数,而不是从DataAnnotation属性获取它们。