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
Implementare il throttling in ASP.NET Core
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Utilizzare Tailwind CSS all'interno di React: installazione
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Gestire liste di tipi semplici con Entity Framework Core
Miglioramenti agli screen reader e al contrasto in Angular
Definire stili a livello di libreria in Angular
Limitare le richieste lato server con l'interactive routing di Blazor 8
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Implementare l'infinite scroll con QuickGrid in Blazor Server
I più letti di oggi
- Riordinare le righe di una GridView di ASP.NET con jQuery
- Creazione di un alarm con suono personalizzato con Windows Phone 7.1
- Utilizzare la session affinity con Azure Container Apps
- Blue-green deployment con Azure Web App e DevOps
- Ed infine anche il calendario :)
- Configurare la diagnostica di Azure attraverso Visual Studio
- Recuperare la data di creazione di un tag tramite una pipeline YAML di Azure DevOps
- Microsoft Security Bulletin MS05-002
- .NET Core e dispositivi IoT
- Eseguire attività pianificate con Azure Container Jobs