Méthodes d'aide HTML ASP.NET MVC pour les nouveaux types d'entrée HTML5

Question

HTML5 semble prendre en charge une nouvelle gamme de champs de saisie para des choses telles que :

• Chiffres
• Adresses électroniques
• Couleurs
• URL
• Plage numérique (via un curseur)
• Dates
• Boîtes de recherche

Quelqu'un a-t-il mis en œuvre HtmlHelper pour ASP.NET MVC qui génère ces méthodes ? Il est possible de le faire en utilisant une surcharge qui accepte htmlAttributes , tels que

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

Mais ce n'est pas aussi agréable (ni aussi sûr) que :

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

Answer 1

Je vous signale que nombre d'entre elles sont désormais incorporées dans MVC4 en utilisant l'option DataType attribut.

A partir de ce point de travail que vous pouvez utiliser :

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; }
}

Answer 2

Consultez le site ASP.net MVC HTML5 Helpers Toolkit

Answer 3

Le plus simple est d'ajouter simplement type="Email" comme attribut html. Il remplace le type="text" par défaut. Voici un exemple avec un validateur html5 requis :

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

Answer 4

Ce que je n'aime pas Types de données Les attributs sont ceux que vous devez utiliser Rédacteur en chef dans la vue. Dans ce cas, vous ne pouvez pas utiliser htmlAttributes pour décorer votre étiquette. Il existe d'autres solutions mais je préfère cette méthode.

Dans cet exemple, je n'ai étendu que la signature que j'utilise le plus souvent.

Donc dans la classe :

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\""));
        }
    }
}

Comme vous le voyez, j'ai juste changé le type="text" pour le type="email" et je peux ensuite l'utiliser dans ma vue :

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

Et la source html donne :

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

Answer 5

J'adore quand on peut conduire ce genre de choses hors du modèle ! J'ai décoré mes modèles avec [DataType(DataType.PhoneNumber)] et tous sauf un ont fonctionné.

J'ai réalisé à mes dépens que @Html.TextBoxFor ne rend pas le type="<HTML5 type>" mais @Html.EditorFor fait. C'est logique maintenant que j'y pense, mais je poste ceci pour éviter à d'autres de perdre les quelques minutes frustrantes que je viens de perdre ;)