Visualizzare un placeholder sugli input di testo in ASP.NET MVC

di Marco De Sanctis, in ASP.NET MVC,

ASP.NET MVC incapsula all'interno dell'oggetto ModelMetadata tutte le informazioni relative al model e alle sue proprietà, in modo che possano essere sfruttate da editor e html helper. Questa classe contiene proprietà dai nomi piuttosto esplicativi, come DisplayName, IsRequired, Description, che per default vengono valorizzate in base alle data annotation con cui abbiamo decorato il nostro modello.

In particolare, la proprietà Watermark è agganciata a Display.Prompt e può essere utilizzata per indicare un testo che inviti all'input e ne descriva le caratteristiche:

[DataType(DataType.EmailAddress)]
[Display(Name = "Indirizzo email", Prompt = "name@domain")]
public string Email { get; set; }

Questa proprietà è ignorata da tutti gli helper e i template inclusi all'interno di ASP.NET MVC, ma ciò non toglie che possiamo sfruttarla tramite un helper personalizzato. Per esempio possiamo creare un overload di TextBoxFor simile al seguente:

public static MvcHtmlString TextBoxFor<TModel, TProperty>(
  this HtmlHelper<TModel> htmlHelper, 
  Expression<Func<TModel, TProperty>> expression, 
  object htmlAttributes, 
  bool includePlaceholder)
{
  var attributes = new RouteValueDictionary(htmlAttributes);

  if (includePlaceholder)
  {
    var metadata = ModelMetadata.FromLambdaExpression(
      expression, htmlHelper.ViewData);
    attributes["placeholder"] = metadata.Watermark;
  }

  return htmlHelper.TextBoxFor<TModel, TProperty>(expression, attributes);
}

Questo helper prevede un parametro addizionale includePlaceholder. Quando vale true, non facciamo altro che recuperare i metadati della proprietà specificata e aggiungere un attributo placeholder con il testo indicato nel watermark. Il risultato sarà un editor molto più comprensibile e friendly per l'utente:

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi