Segnaposto HTML5 con estensione .NET MVC 3 Razor EditorFor?

C'è un modo per scrivere il segnaposto Html5 usando @ Html.EditorFor, o dovrei semplicemente usare l'estensione TextBoxFor cioè

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

Oppure avrebbe senso scrivere la nostra estensione personalizzata che può forse utilizzare l'attributo di visualizzazione "Descrizione" tramite DataAnnotations (simile a questo )?

Ovviamente, la stessa domanda vale anche per "autofocus".

Puoi dare un'occhiata al seguente articolo per scrivere un'abitudine DataAnnotationsModelMetadataProvider.

Ed ecco un altro, più ASP.NET MVC 3ish modo di procedere che coinvolge l' interfaccia IMetadataAware di recente introduzione .

Inizia creando un attributo personalizzato che implementa questa interfaccia:

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

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

E poi decora il tuo modello con esso:

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

Quindi definire un controller:

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

Una vista corrispondente:

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

E infine il template dell'editor ( ~/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>

Come commenta smnbss nella risposta di Darin Dimitrov, Promptesiste esattamente per questo scopo, quindi non è necessario creare un attributo personalizzato . Dalla documentazione:

Ottiene o imposta un valore che verrà usato per impostare la filigrana per i prompt nell'interfaccia utente.

Per usarlo, basta decorare la proprietà del modello di visualizzazione in questo modo:

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

Questo testo viene quindi opportunamente inserito ModelMetadata.Watermark. Per impostazione predefinita, il modello predefinito in MVC 3 ignora la Watermarkproprietà, ma farlo funzionare è davvero semplice. Tutto quello che devi fare è modificare il modello di stringa predefinito, per dire a MVC come renderlo. Basta modificare String.cshtml, come fa Darin, tranne per il fatto che invece di ottenere la filigrana da ModelMetadata.AdditionalValues, la ottieni direttamente da ModelMetadata.Watermark:

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

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

E questo è tutto.

Come puoi vedere, la chiave per far funzionare tutto è il placeholder = ViewData.ModelMetadata.Watermarkbit.

Se desideri abilitare anche la filigrana per le caselle di testo multilinea (aree di testo), fai lo stesso per 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 })

In realtà preferisco utilizzare il nome visualizzato per il testo segnaposto la maggior parte delle volte. Ecco un esempio di utilizzo del DisplayName:

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

Ho scritto una lezione così semplice:

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'utilizzo in quanto tale:

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

E proprietà in un modello di visualizzazione:

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

Avviso parametro Prompt. In questo caso utilizzo stringhe da risorse per la localizzazione ma puoi usare solo stringhe, evita semplicemente il parametro ResourceType.

Uso in questo modo con il file di risorse (non ho più bisogno di Prompt!)

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

Ecco una soluzione che ho realizzato utilizzando le idee sopra che possono essere utilizzate per TextBoxFor e 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));
    }
}

Penso che creare un EditorTemplate personalizzato non sia una buona soluzione, perché devi preoccuparti di molti possibili tepmlate per diversi casi: stringhe, numeri, combobox e così via. Un'altra soluzione è l'estensione personalizzata a HtmlHelper.

Modello:

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

Estensione helper 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);

}

Una vista corrispondente:

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