51

HTML5 は、次のような新しい範囲の入力フィールドをサポートしているようです。

  • 数字
  • メールアドレス
  • 色
  • URL
  • 数値範囲 (スライダーによる)
  • 日付
  • 検索ボックス

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

属性を使用して、これらの多くが MVC4 に組み込まれていることに注意してくださいDataType。

この作業項目の時点で、次を使用できます。

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 ヘルパー ツールキットを確認して ください

于 2010-08-31T20:50:55.743 に答える
13

最も簡単な方法は、html 属性として type="Email" を追加することです。デフォルトの type="text" をオーバーライドします。これも html5 必須バリデータの例です。

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