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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire attività con Azure Container Jobs
Creare form tipizzati con Angular
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Controllare gli accessi IP alle app con Azure Container Apps
Load test di ASP.NET Core con k6
Potenziare Azure AI Search con la ricerca vettoriale
Hosting di componenti WebAssembly in un'applicazione Blazor static
Criptare la comunicazione con mTLS in Azure Container Apps
Usare una container image come runner di GitHub Actions
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Registrare servizi multipli tramite chiavi in ASP.NET Core 8