Espaces réservés Html5 avec .NET MVC 3 Razor EditorPour l'extension?

Existe-t-il un moyen d'écrire l' espace réservé Html5 en utilisant @ Html.EditorFor, ou devrais-je simplement utiliser l'extension TextBoxFor ie

@Html.TextBoxFor(model => model.Title, new { @placeholder = "Enter title here"})

Ou serait-il judicieux d'écrire notre propre extension personnalisée qui peut peut-être utiliser l'attribut d'affichage 'Description' via DataAnnotations (similaire à celui-ci )?

Bien sûr, la même question s'applique également à la mise au point automatique.

Vous pouvez consulter l' article suivant pour rédiger une personnalisation DataAnnotationsModelMetadataProvider.

Et voici une autre façon de procéder, plus ASP.NET MVC 3ish, impliquant la nouvelle interface IMetadataAware .

Commencez par créer un attribut personnalisé implémentant cette interface:

public class PlaceHolderAttribute : Attribute, IMetadataAware
{
    private readonly string _placeholder;
    public PlaceHolderAttribute(string placeholder)
    {
        _placeholder = placeholder;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        metadata.AdditionalValues["placeholder"] = _placeholder;
    }
}

Et puis décorez votre modèle avec:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Ensuite, définissez un contrôleur:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

Une vue correspondante:

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Title)
    <input type="submit" value="OK" />
}

Et enfin le template de l'éditeur ( ~/Views/Shared/EditorTemplates/string.cshtml):

@{
    var placeholder = string.Empty;
    if (ViewData.ModelMetadata.AdditionalValues.ContainsKey("placeholder"))
    {
        placeholder = ViewData.ModelMetadata.AdditionalValues["placeholder"] as string;
    }
}
<span>
    @Html.Label(ViewData.ModelMetadata.PropertyName)
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { placeholder = placeholder })
</span>

Comme le commentaire smnbss dans la réponse de Darin Dimitrov, Promptexiste exactement dans ce but, il n'est donc pas nécessaire de créer un attribut personnalisé . De la documentation:

Obtient ou définit une valeur qui sera utilisée pour définir le filigrane des invites dans l'interface utilisateur.

Pour l'utiliser, décorez simplement la propriété de votre modèle de vue comme ceci:

[Display(Prompt = "numbers only")]
public int Age { get; set; }

Ce texte est ensuite commodément placé dans ModelMetadata.Watermark. Hors de la boîte, le modèle par défaut dans MVC 3 ignore la Watermarkpropriété, mais le faire fonctionner est vraiment simple. Tout ce que vous avez à faire est de peaufiner le modèle de chaîne par défaut pour indiquer à MVC comment le rendre. Modifiez simplement String.cshtml, comme le fait Darin, sauf que plutôt que d'obtenir le filigrane ModelMetadata.AdditionalValues, vous l'obtenez directement à partir de ModelMetadata.Watermark:

~ / Views / Shared / EditorTemplates / String.cshtml:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

Et c'est tout.

Comme vous pouvez le voir, la clé pour que tout fonctionne est le placeholder = ViewData.ModelMetadata.Watermarkbit.

Si vous souhaitez également activer le filigrane pour les zones de texte multilignes (zones de texte), procédez de la même manière pour MultilineText.cshtml:

~ / Views / Shared / EditorTemplates / MultilineText.cshtml:

@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new { @class = "text-box multi-line", placeholder = ViewData.ModelMetadata.Watermark })

En fait, je préfère utiliser le nom d'affichage pour le texte d'espace réservé la plupart du temps. Voici un exemple d'utilisation de DisplayName:

  @Html.TextBoxFor(x => x.FirstName, true, null, new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.FirstName) })

J'ai écrit une classe si simple:

public static class WatermarkExtension
{
    public static MvcHtmlString WatermarkFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        var watermark = ModelMetadata.FromLambdaExpression(expression, html.ViewData).Watermark;
        var htmlEncoded = HttpUtility.HtmlEncode(watermark);
        return new MvcHtmlString(htmlEncoded);
    }
}

L'utilisation en tant que telle:

@Html.TextBoxFor(model => model.AddressSuffix, new {placeholder = Html.WatermarkFor(model => model.AddressSuffix)})

Et la propriété dans un modèle de vue:

[Display(ResourceType = typeof (Resources), Name = "AddressSuffixLabel", Prompt = "AddressSuffixPlaceholder")]
public string AddressSuffix
{
    get { return _album.AddressSuffix; }
    set { _album.AddressSuffix = value; }
}

Remarquez le paramètre Prompt. Dans ce cas, j'utilise des chaînes de ressources pour la localisation, mais vous pouvez utiliser uniquement des chaînes, évitez simplement le paramètre ResourceType.

J'utilise de cette façon avec le fichier de ressources (je n'ai plus besoin d'invite!)

@Html.TextBoxFor(m => m.Name, new 
{
     @class = "form-control",
     placeholder = @Html.DisplayName(@Resource.PleaseTypeName),
     autofocus = "autofocus",
     required = "required"
})

Voici une solution que j'ai faite en utilisant les idées ci-dessus qui peuvent être utilisées pour TextBoxFor et PasswordFor:

public static class HtmlHelperEx
{
    public static MvcHtmlString TextBoxWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.TextBoxFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }

    public static MvcHtmlString PasswordWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.PasswordFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }
}

public static class HtmlAttributesHelper
{
    public static IDictionary<string, object> AddAttribute(this object htmlAttributes, string name, object value)
    {
        var dictionary = htmlAttributes == null ? new Dictionary<string, object>() : htmlAttributes.ToDictionary();
        if (!String.IsNullOrWhiteSpace(name) && value != null && !String.IsNullOrWhiteSpace(value.ToString()))
            dictionary.Add(name, value);
        return dictionary;
    }

    public static IDictionary<string, object> ToDictionary(this object obj)
    {
        return TypeDescriptor.GetProperties(obj)
            .Cast<PropertyDescriptor>()
            .ToDictionary(property => property.Name, property => property.GetValue(obj));
    }
}

Je pense que créer un EditorTemplate personnalisé n'est pas une bonne solution, car vous devez vous soucier de nombreux tepmlates possibles pour différents cas: chaînes, numsers, comboboxes, etc. Une autre solution est une extension personnalisée vers HtmlHelper.

Modèle:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Extension d'assistance HTML:

   public static MvcHtmlString BsEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TValue>> expression, string htmlClass = "")
{
    var modelMetadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var metadata = modelMetadata;

    var viewData = new
    {
        HtmlAttributes = new
            {
                @class = htmlClass,
                placeholder = metadata.Watermark,
            }
    };
    return htmlHelper.EditorFor(expression, viewData);

}

Une vue correspondante:

@Html.BsEditorFor(x => x.Title)