新的HTML5inputtypes的ASP.NET MVC HTML帮助器方法

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

  • 数字
  • 电子邮件地址
  • 颜色
  • url
  • 数字范围(通过滑块)
  • date
  • search框

有没有人实现了ASP.NET MVC的HtmlHelper扩展方法,生成这些呢? 可以使用接受htmlAttributes的重载来完成这个操作,比如:

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

但是,这不是很好(或types安全):

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

现在就来看看,现在通过使用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; } } 

检查出ASP.net MVC HTML5助手工具包

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

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

所以在课堂上:

 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> 

喜欢它可以驱动这种types的东西closures模型! 我用[DataType(DataType.PhoneNumber)]装饰我的模型,除了一个都工作。

我意识到@Html.TextBoxFor不会呈现type="<HTML5 type>"而是@Html.EditorFor 。 有道理我想现在我想到了,但发布这个也许可以拯救别人让我感到沮丧的几分钟,我刚刚失去了;)

最简单的方法是简单地将type =“Email”添加为html属性。 它覆盖了默认的type =“text”。 这里还有一个html5validation器的例子:

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

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

以类似的方式,RPAlbert的Html.EmailFor上面的答案,我开始使用正常的Html.TextBoxFor,但后来我用LinqToXml来修改HTML,而不是只使用一个stringreplace。

从Html.TextBoxFor开始的优点是你可以使用MVC为你做的所有客户端validation的东西。 在这种情况下,我使用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属性获取它们。

我希望有帮助!