51

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)
4

6 回答 6

54

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; }
}
于 2013-05-13T14:12:12.310 回答
23

查看 ASP.net MVC HTML5 Helpers Toolkit

于 2010-08-31T20:50:55.743 回答
13

最简单的方法是简单地将 type="Email" 添加为 html 属性。它覆盖默认类型=“文本”。这是一个带有 html5 必需验证器的示例：

@Html.TextBox("txtEmail", "", new {placeholder = "email...", @type="email", @required = ""})
于 2014-06-13T03:09:56.110 回答
11

我不喜欢DataTypes Attributes 的是你必须在视图中使用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="text" 更改为 type="email" ，然后我可以在我的视图中使用：

    <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>
于 2013-09-18T00:41:47.127 回答
9

喜欢什么时候可以将这种类型的东西从模型中剔除！我用 装饰了我的模型 [DataType(DataType.PhoneNumber)]，除一个外，其他所有模型都有效。

我意识到@Html.TextBoxFor不渲染type="<HTML5 type>"但@Html.EditorFor确实如此的艰难方式。有道理我现在想起来了，但发布这个可能是为了节省其他人我刚刚失去的令人沮丧的几分钟；）

于 2013-07-22T20:23:41.857 回答
2

我发现我自己想要<input type='number' />从 HtmlHelper 使用时获得的数字微调器，最终我自己解决了它。

与上面 RPAlbert 的 Html.EmailFor 答案类似，我开始使用普通的 Html.TextBoxFor，但后来我使用 LinqToXml 来修改 HTML，而不仅仅是使用字符串替换。

从 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 属性中获取它们。

我希望这会有所帮助！

于 2016-09-01T15:36:22.893 回答