blocks|key|295773|text|查看ASP.net+MVC+HTML5+Helpers+Toolkit|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|295774|entityMap|0|LINK|mutability|MUTABLE|url|http://mvchtml5.codeplex.com/^0|2|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Check out the  <a href="http://mvchtml5.codeplex.com/" rel="noreferrer">ASP.net MVC HTML5 Helpers Toolkit</a></p>


blocks|key|3025067|text|需要注意的是，现在可以使用DataType属性将其中的许多内容合并到MVC4中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3025068|从this+work+item开始，您可以使用：|3025069|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;+}
}|code-block|syntax|javascript|3025070|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.datatype.aspx|1|https://aspnetwebstack.codeplex.com/workitem/2^0|D|8|D|8|0|0|1|E|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>Just a heads up that many of these are now incorporated into MVC4 by using the <a href="http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.datatype.aspx"><code>DataType</code></a> attribute.</p>

<p>As of <a href="https://aspnetwebstack.codeplex.com/workitem/2">this work item</a> you can use:</p>

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

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

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

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

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

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

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


blocks|key|298294|text|我喜欢它的时候，可以把这种类型的东西从模型！！我用[DataType(DataType.PhoneNumber)]装饰我的模型，除了一个之外，所有的模型都可以工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|298295|我意识到@Html.TextBoxFor不能呈现type="<HTML5+type>"，而@Html.EditorFor却能。现在我想这是有道理的，但发布这篇文章可能是为了节省别人我刚刚失去的令人沮丧的几分钟；)|298296|entityMap^0|P|W|0|4|G|O|J|19|F|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>Love it when can drive this type of stuff off the model!!  I decorated my models with  <code>[DataType(DataType.PhoneNumber)]</code>, and all but one worked.</p>

<p>I realized the hard way that <code>@Html.TextBoxFor</code> doesn't render the <code>type="&lt;HTML5 type&gt;"</code> but <code>@Html.EditorFor</code> does.  Makes sense I guess now that I think about it, but posting this to maybe save others the frustrating few minutes that I just lost;)</p>


blocks|key|301149|text|我不喜欢DataTypes属性的原因是你必须在视图中使用EditorFor。然后，你就不能使用htmlAttributes来装饰你的标签了。还有其他解决方案，但我更喜欢这种方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|301150|在这个例子中，我只扩展了我最常用的签名。|301151|所以在课堂上：|301152|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\""));
++++++++}
++++}
}|code-block|syntax|javascript|301153|如你所见，我刚刚将type=的“type=”改为“email”，然后我就可以在我的视图中使用了：|301154|++++<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>|301155|html源代码给出了：|301156|<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>+|301157|entityMap^0|1B|E|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

<p>What i don't like about <em>DataTypes</em> Attributes is that u have to use <em>EditorFor</em> in the view. Then, you can't use <strong>htmlAttributes</strong> to decorate your tag. There are other solutions but i prefer this way.</p>

<p>In this example i only extended the signature i use the most.</p>

<p>So in the class:</p>

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

<p>As you see i just changed the type="text" for type="email" and then i can use in my view:</p>

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

<p>And the html source gives:</p>

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


blocks|key|301177|text|最简单的方法是简单地添加type=“电子邮件”作为html属性。它会覆盖默认的文本“type=”。下面是一个需要html5验证器的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|301178|@Html.TextBox("txtEmail",+"",+new+{placeholder+=+"email...",+@type="email",+@required+=+""})|code-block|syntax|javascript|301179|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Easiest way is to simply add type="Email" as an html attribute. It overrides the default type="text". Here is an example with a html5 required validator also:</p>

<pre><code>@Html.TextBox("txtEmail", "", new {placeholder = "email...", @type="email", @required = ""})
</code></pre>


blocks|key|295861|text|我发现我自己想要从HtmlHelper中使用<input+type='number'+/>时得到的数字旋转器，并最终自己解决了它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|295862|与上面RPAlbert的Html.EmailFor答案类似，我开始使用普通的Html.TextBoxFor，但后来我使用LinqToXml修改了HTML，而不仅仅是使用字符串替换。|295863|从Html.TextBoxFor开始的好处是，您可以使用MVC为您做的所有客户端验证工作。在本例中，我使用data-val-range属性中的值来设置约束微调器所需的最小/最大属性。|295864|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());
}|code-block|syntax|javascript|295865|然后，您可以像在视图中使用任何其他HtmlHelper一样使用它：|295866|@Html.SpinnerFor(model+=>+model.SomeNumber,+new+{+htmlAttribute1+=+"SomeValue"+})|295867|这是我的实现，从你的问题中我可以看出你想要：|295868|@Html.NumericInputFor(model+=>+model.Foo,+min:0,+max:100)|295869|将我的方法调整为如下所示将非常简单：|295870|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());
}|295871|基本上，我所做的就是重命名它，并提供min/max作为参数，而不是从DataAnnotation属性中获取它们。|295872|我希望这对你有帮助！|295873|entityMap^0|M|N|0|0|1H|E|0|0|0|0|29|0|0|0|1L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|1N|8|@]|D|@]|E|$M|N]]|$1|10|3|11|5|6|7|1O|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|1P|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|15|$]]

<p>I found my self wanting the number spinner you get when using <code>&lt;input type='number' /&gt;</code> from an HtmlHelper, and ended up solving it my self. </p>

<p>In a similar fashion to RPAlbert's Html.EmailFor answer above, I started off using the normal Html.TextBoxFor, but then I used LinqToXml to modify the HTML rather than just using a string replace. </p>

<p>The advantage of starting with the Html.TextBoxFor is that you can use of all the client side validation stuff that MVC does for you. In this case I am using the values from the <code>data-val-range</code> attributes to set the min/max attributes needed to constrain the spinner.</p>

<pre><code>public static HtmlString SpinnerFor&lt;TModel, TValue&gt;(this HtmlHelper&lt;TModel&gt; html, Expression&lt;Func&lt;TModel, TValue&gt;&gt; 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());
}
</code></pre>

<p>You would then use it as you would any other HtmlHelper in your views:</p>

<p><code>@Html.SpinnerFor(model =&gt; model.SomeNumber, new { htmlAttribute1 = "SomeValue" })</code></p>

<p>This was my implementation of it anyway, from you question I can see that you wanted:</p>

<p><code>@Html.NumericInputFor(model =&gt; model.Foo, min:0, max:100)</code></p>

<p>It would be very simple to tweak my method to do this as follows:</p>

<pre><code>public static HtmlString NumericInputFor&lt;TModel, TValue&gt;(this HtmlHelper&lt;TModel&gt; html, Expression&lt;Func&lt;TModel, TValue&gt;&gt; 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());
}
</code></pre>

<p>Basically all I have done is to rename it and provide min/max as arguments rather than getting them from DataAnnotation attributes.</p>

<p>I hope that helps!</p>


<p>HTML5 appears to support a new range of <a href="http://diveintohtml5.info/forms.html" rel="noreferrer">input fields</a> for <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute" rel="noreferrer">things such as</a>:</p>

<ul>
<li>Numbers</li>
<li>Email addresses</li>
<li>Colors</li>
<li>URLs</li>
<li>Numeric range (via a slider)</li>
<li>Dates</li>
<li>Search boxes</li>
</ul>

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

<pre><code>Html.TextBoxFor(model =&gt; model.Foo, new { type="number", min="0", max="100" })
</code></pre>

<p>But that's not as nice (or typesafe) as:</p>

<pre><code>Html.NumericInputFor(model =&gt; model.Foo, min:0, max:100)
</code></pre>


ASP.NET MVC HTML helper methods for new HTML5 input types

HTML5

HTML5似乎支持用于的一系列新的NumbersEmail addressesColorsURLsNumeric范围(通过slider)DatesSearch boxes有没有人为ASP.NET MVC实现了HtmlHelper扩展方法来生成这些扩展方法？可以使用接受htmlAttributes的重载来实现这一点，例如...

问用于新HTML5输入类型的ASP.NET MVC HTML帮助器方法
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于新HTML5输入类型的ASP.NET MVC HTML帮助器方法EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于新HTML5输入类型的ASP.NET MVC HTML帮助器方法
EN