Quando dobbiamo effettuare una lookup su un elenco di elementi numeroso, il controllo DropDownList non rappresenta la soluzione ideale, sia perché l'HTML generato è piuttosto verboso, sia perché comunque il suo utilizzo rischia di risultare davvero scomodo per l'utente finale.
Molto meglio è invece avvalersi di una semplice TextBox, a cui affiancare il widget Autocomplete di jQuery UI, popolandone il contenuto tramite una chiamata AJAX ad un servizio server-side.
Il comportamento di default di questo oggetto, tuttavia, non è direttamente sostituibile a quello di una DropDownList, in quanto si limita a valorizzare la TextBox con l'elemento selezionato; nel caso di una lookup, invece, tipicamente vogliamo fare in modo che l'utente effettui la sua scelta basandosi su un campo descrittivo (il nome della città, nell'esempio precedente), ma poi vogliamo trattare il dato nei termini del suo identificativo univoco.
Per raggiungere questo risultato, dobbiamo intanto restituire anche questa seconda informazione tramite il servizio server side. Se, ad esempio, scegliamo di implementarlo tramite un HttpHandler, possiamo sfruttare del codice simile al seguente, che serializza una collezione di oggetti in formato JSON.
public void ProcessRequest(HttpContext context) { var searchTerm = context.Request["term"]; var cities = CityRepository .Where(c => c.Name.Contains(searchTerm)) .OrderBy(c => c.Name) .Select(c => new { label = c.Name, code = c.Code }) .ToList(); var serializer = new JavaScriptSerializer(); var result = serializer.Serialize(cities); context.Response.Clear(); context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.Write(result); context.Response.Flush(); }
In particolare, ogni elemento è un anonymous object dotato delle proprietà label e code. La prima viene automaticamente visualizzata da Autocomplete nell'elenco di valori suggeriti, mentre con la seconda possiamo popolare, ad esempio, un campo hidden all'avvenuta selezione. Questa logica deve essere configurata in fase di inizializzazione di jQuery UI Autocomplete, definendo un handler per l'evento client-side select:
$(function () { $('#txtCity').autocomplete({ source: 'citieshandler.ashx', select: function (event, ui) { var item = ui.item; var code = $('#txtCode'); var name = $('#txtCity'); if (item !== null) { name.val(item.label); code.val(item.code); } } }); });
Il gestore di questo evento è una funzione che riceve un elemento chiamato ui, la cui proprietà item contiene il dato corrispondente alla selezione dell'utente, unitamente a tutte le eventuali proprietà che abbiamo restituito tramite il servizio. Nel nostro codice, ad esempio, abbiamo utilizzato code per popolare una seconda TextBox con la sigla della provincia selezionata.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Usare il versioning con i controller di ASP.NET Core Web API
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Ottimizzazione dei block template in Angular 17
Eseguire attività basate su eventi con Azure Container Jobs
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Utilizzare Model as a Service su Microsoft Azure
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare Tailwind CSS all'interno di React: primi componenti
Eseguire una GroupBy per entity in Entity Framework
Utilizzare i primary constructor di C# per inizializzare le proprietà
I più letti di oggi
- Cambiare la chiave di partizionamento di Azure Cosmos DB
- ASP.NET 2.0 per tutti
- Definire stili a livello di libreria in Angular
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17