Html5 Placeholders avec l'extension .NET MVC 3 Razor EditorFor?

Question

Est-il possible d'écrire le Html5 espace réservé à l'aide de @Html.EditorFor, ou devrais-je utiliser le TextBoxFor extension c'est à dire

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

Ou serait-il judicieux d'écrire notre propre extension qui peut peut-être utiliser la 'Description' attribut d'affichage via DataAnnotations (similaire à présent)?

Bien sûr, la même question s'applique à "autofocus".

Answer 1

Comme smnbss commentaires dans Darin Dimitrov réponse, Prompt existe exactement pour ce but, il n'ya donc pas besoin de créer un attribut personnalisé. À partir de la documentation:

Obtient ou définit une valeur qui sera utilisée pour définir la limite pour les invites l'INTERFACE utilisateur.

Pour l'utiliser il suffit de décorer votre modèle de vue de la propriété de la sorte:

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

Ce texte est idéalement placé en ModelMetadata.Watermark. Hors de la boîte, le modèle par défaut dans MVC 3 ignore l' Watermark de la propriété, mais le faire fonctionner est vraiment simple. Tout ce que vous devez faire est de modifier la valeur par défaut de la chaîne de modèle, de dire MVC comment le rendre. Juste modifier la Chaîne.cshtml, comme Darin, sauf qu'au lieu de recevoir le filigrane d' ModelMetadata.AdditionalValues, vous obtenez directement à partir de ModelMetadata.Watermark:

~/Views/Shared/EditorTemplates/Chaîne.cshtml:

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

ou

// Add the placeholder data to the existing ViewData so other ViewData info is not lost.
@{
ViewData["placeholder"] = ViewData.ModelMetadata.Watermark;
}@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData)

Et c'est tout.

Comme vous pouvez le voir, la clé pour faire tout ce travail est l' placeholder = ViewData.ModelMetadata.Watermark bits.

Si vous aussi vous souhaitez activer la fonction de filigrane pour le multi-ligne de zones de texte (textareas), vous faites la même chose 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 })

ou

// Add the placeholder data to the existing ViewData so other ViewData info is not lost.
@{
ViewData["placeholder"] = ViewData.ModelMetadata.Watermark;
} @Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, ViewData)

Answer 2

Vous pouvez prendre un coup d'oeil à la suite de l'article pour l'écriture personnalisée DataAnnotationsModelMetadataProvider.

Et en voici un autre, plus ASP.NET MVC 3ish façon de procéder impliquant le nouvellement introduit IMetadataAware interface.

Commencez par créer un attribut personnalisé la mise en œuvre de 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;
    }
}

Puis les décorer votre modèle:

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

Prochaine définir 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, l'éditeur de template (~/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>

Answer 3

En fait, je préfère utiliser le nom d'affichage pour le texte fictif la majorité du temps. Voici un exemple d'utilisation du nom d'affichage:

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

Answer 4

J'ai écrit un cours 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; }
}
 

Avis Paramètre d'invite. Dans ce cas, j'utilise des chaînes de ressources pour la localisation, mais vous ne pouvez utiliser que des chaînes, il suffit d'éviter le paramètre ResourceType.

Answer 5

@ Html.TextBoxFor (model => model.Name, new {@placeholder = "abcxyz"})