Tra le varie novità di HTML5, una che risulta estremamente utile è l'elemento DataList, che implementa un comportamento simile a quello di una ComboBox: questo tag va utilizzato in concomitanza con un input testuale ed è in grado di fornire una serie di suggerimenti o di valori predefiniti, che poi possono essere comunque modificati dall'utente. Possiamo vederne un esempio in figura.
Il markup necessario per realizzare un effetto del genere consiste nell'abbinare, tramite l'attributo list, un input[type=text] alla corrispondente DataList:
<input type="text" ... list="nome_dataList" />; <datalist id="nome_dataList"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> </datalist>
ASP.NET MVC non presenta un html helper nativo per realizzare un tag di questo tipo, ma possiamo costruirne uno in maniera abbastanza semplice. Tutto ciò che dobbiamo fare, infatti, è creare un extension method con la signature seguente:
public static MvcHtmlString DataListFor<TModel, TProperty>( this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes) { ... }
Visto che, in fin dei conti, dobbiamo realizzare un box di testo, questo metodo contiene tutti i parametri che troviamo nell'helper TextBoxFor (sia l'expression che l'oggetto htmlAttributes), ma richiede anche una lista di SelectListItem, che poi utilizzeremo per popolare l'elenco a scomparsa.
Passando all'implementazione, il nostro primo compito è quello di generare un id univoco per la datalist, e di referenziarlo dalla TextBox:
var listId = ExpressionHelper.GetExpressionText(expression) + "_dataList"; if (htmlAttributes == null) htmlAttributes = new object(); RouteValueDictionary dictionary = new RouteValueDictionary(htmlAttributes); dictionary.Add("list", listId); var input = html.TextBoxFor(expression, dictionary);
A questo punto non ci resta che creare, tramite TagBuilder, la parte di markup mancante, ossia quella relativa al tag DataList:
var dataList = new TagBuilder("DataList"); dataList.GenerateId(listId); StringBuilder items = new StringBuilder(); foreach (var item in selectList) { items.AppendLine(ItemToOption(item)); } dataList.InnerHtml = items.ToString(); return new MvcHtmlString(input + dataList.ToString());
Nel codice precedente, abbiamo sfruttato il medesimo listId per associare questo identificativo alla DataList. Successivamente, per ogni elemento SelectListItem fornito, generiamo il corrispondente tag option, da aggiungere all'InnerHtml della DataList stessa. Questo compito è eseguito dal metodo ItemToOption:
private static string ItemToOption(SelectListItem item) { TagBuilder builder = new TagBuilder("option"); builder.MergeAttribute("value", item.Value); builder.SetInnerText(item.Text); return builder.ToString(TagRenderMode.Normal); }
Con questi semplici passaggi, siamo stati in grado di confezionare un HtmlHelper che rende davvero immediato l'utilizzo di questo nuovo elemento, come possiamo notare dal codice seguente:
<div class="col-md-10"> @Html.DataListFor(model => model.Title, this.Model.AvailableTitles, null) </div>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare lo streaming di una chiamata Http da Blazor
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Miglioramenti agli screen reader e al contrasto in Angular
Specificare il versioning nel path degli URL in ASP.NET Web API
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Creare un'applicazione React e configurare Tailwind CSS
Generare file PDF da Blazor WebAssembly con iText
Usare un KeyedService di default in ASP.NET Core 8
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0