Dall'archivio script > ASP.NET 4.0

Creare un custom HTML helper per ASP.NET MVC

di Gianluca EspositoGianluca Esposito, in ASP.NET 4.0, ASP.NET MVCUserScript,

Un HTML helper è un metodo che, tipicamente, viene utilizzato per generare un tag HTML (o anche strutture più complesse) all'intero di una View di ASP.NET MVC, utilizzando una sintassi semplice e pulita.

Il framework ASP.NET MVC include già diversi HTML helper relativi ai controlli più comuni, come CheckBox, TextBox, Password, Hidden, ed altri. Ad esempio, scrivere nella propria view il codice che segue

<div>
    Username: <%: Html.TextBox("username") %>
    Password: <%: Html.Password("password") %>
</div>

produce come output questo codice HTML:

<div>
    Username: <input id="username" name="username" type="text" value="" />
    Password: <input id="password" name="password" type="password" />
</div>

Ovviamente gli HTML helper già presenti sono un insieme che comprende i tag più comuni, ma con poco sforzo è possibile scrivere un proprio helper, specifico per le proprie esigenze. Nel nostro caso, ad esempio, ne realizzeremo uno personalizzato per semplificare la generazione dei meta tag.

HTML Helper con metodi statici

Il sistema più semplice per creare un helper custom consiste nella realizzazione di un metodo statico che restituisca un oggetto di tipo MvcHtmlString. Questa classe è analoga al tipo string, ma rappresenta testo contenente tag HTML, che pertanto dovrà essere immune da eventuali processi di encoding.

Nel nostro caso, ipotizziamo di voler gestire in un'unica chiamata sia la description che le keywords per generare il tagging appropriato; creiamo quindi una classe, che chiameremo, MetaInfoHelper, dotata del metodo MetaInfo seguente.

namespace MvcApplication.Helpers
{
  public class MetaInfoHelper
  {
    public static MvcHtmlString MetaInfo(string description, string keywords)
    {
      StringBuilder sb = new StringBuilder();
      sb.AppendFormat("<meta name=\"description\" content=\"{0}\" />", description);
      sb.AppendFormat("<meta name=\"keywords\" content=\"{0}\" />", keywords);
      return MvcHtmlString.Create(sb.ToString());
    }
  }
}

Per utilizzare l'helper appena creato all'interno della nostra view, è sufficiente includere il namespace e invocarlo all'interno del tag <%: .. %>.

<%@ Import Namespace="MvcApplication.Helpers" %>
...
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="Head1" runat="server">
    <title>Esempio</title>
    <%= MetaInfoHelper.MetaInfo("Lorem ipsum dolor sit amet.", 
      "keyword1, keyword2, keyword3")%>
  </head>
  <body>
...


L'output generato dall'helper nel caso di una simile invocazione sarà qualcosa simile al seguente codice HTML:

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <title>Esempio</title>
    <meta name="description" content="Lorem ipsum dolor sit amet." />
    <meta name="keywords" content="keyword1, keyword2, keyword3" /
  </head> 
  <body> 
...

HTML helper con gli extension method

Esiste una seconda modalità per creare un HTML helper custom, che consiste nella realizzazione di un extension method per la classe HtmlHelper. Ricordiamo che, in questo caso, sia la classe che il metodo devono essere statici. 

namespace MvcApplication.Helpers
{
  public static class MetaInfoHelper
  {
    public static MvcHtmlString MetaInfo(this HtmlHelper helper, string description, string keywords)
    {
      StringBuilder sb = new StringBuilder();
      sb.AppendFormat("<meta name=\"description\" content=\"{0}\" />", description);
      sb.AppendFormat("<meta name=\"keywords\" content=\"{0}\" />", keywords);
      return MvcHtmlString.Create(sb.ToString());
    }
  }
}

Una soluzione di questo tipo è utile nel caso in cui, nel codice del metodo, abbiamo bisogno di accedere ai parametri di routing o ai dati della view, oppure vogliamo sfruttare qualcuno dei tanti HTML helper già esistenti nel framework ASP.NET MVC.

Anche in questo caso, per utilizzare il nostro helper, è necessario prestare attenzione all'inclusione del namespace; la chiamata è leggermente differente rispetto all'esempio precedente, secondo una sintassi più simile a quella degli HTML helper standard.

<%@ Import Namespace="MvcApplication.Helpers" %>
...
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="Head1" runat="server">
    <title>Esempio</title>
    <%= Html.MetaInfo("Lorem ipsum dolor sit amet.", "keyword1, keyword2, keyword3")%>
  </head>
  <body>
...

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

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