Come abbiamo visto in precedenti script, ASP.NET Core MVC ci permette di generare form molto leggibili grazie anche ai tag helper come select, che usiamo per i classici menu a tendina.
Con il suo attributo asp-items impostiamo le opzioni di scelta in maniera dichiarativa e lo valorizziamo con un oggetto di tipo IEnumerable
//modello per una view di modifica prodotto ed impostazione della categoria public class ProductViewModel { //Riferimento al prodotto da modificare public Product Product { get; set; } //Categorie impostabili per il prodotto public IEnumerable<SelectListItem> AllCategories { get; set; } }
Nell'action, creiamo un'istanza di ProductViewModel e lo popoliamo con i dati del prodotto e con l'elenco delle categorie da mostrare all'utente.
public IActionResult Edit(int id) { //Ottengo il prodotto da un eventuale metodo GetProductById //che si trova nel mio strato di servizi per l'accesso al database Product product = GetProductById(id); //Ottengo anche le categorie e proietto ciascuna di esse sul tipo SelectListItem //grazie all'extension method Select di LINQ IEnumerable<SelectListItem> categories = GetAllCategories() .Select(category => new SelectListItem { Value = category.CategoryId.ToString(), Text = category.Description, //La categoria assegnata al prodotto risulterà selezionata Selected = category.CategoryId == product.CategoryId }).ToList(); //Popolo l'istanza del viewModel e la passo alla view var viewModel = new ProductViewModel { Product = product, AllCategories = categories, }; return View(viewModel); }
Ora creiamo il form di modifica contenente il tag helper select. E' importante notare come siano stati valorizzati gli attributi asp-for ed asp-items per indicare, rispettivamente, il nome della proprietà soggetta a modifica e le sue opzioni di scelta.
@using MyApplication.Model @model ProductViewModel @{ ViewData["Title"] = "Edit product"; } <form method="post"> <div class="form-group"> <label asp-for="Product.Description"></label> <input type="text" asp-for="Product.Description" class="form-control" /> </div> <div class="form-group"> <label asp-for="Product.Category"></label> <select asp-for="Product.CategoryId" asp-items="Model.AllCategories" class="form-control"></select> </div> <div class="form-group"> <label asp-for="Product.Condition"></label> <select asp-for="Product.Condition" asp-items="Html.GetEnumSelectList<ProductCondition>()" class="form-control"></select> </div> <button type="submit" class="btn btn-primary">Save</button> </form>
Nell'esempio è presente anche un secondo tag helper select che, grazie all'helper method Html.GetEnumSelectList
Usando l'attributo Display possiamo personalizzare il testo mostrato all'utente per ciascuna opzione:
public enum ProductCondition { [Display(Name = "New ? in a sealed box")] New, [Display(Name = "Used ? with warranty")] Used, [Display(Name = "Reconditioned ? like new")] Reconditioned }
Avviando l'applicazione, otterremo il seguente risultato finale.

Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Impostare l'hostname di un'immagine docker per rendere il container da altri container in Visual Studio
Generare un QR Code da ASP.NET Web API
Log streaming di una Azure Container App
Le novità di Angular 13 e del suo ecosistema
Configuration strongly typed anche per singleton con IOptionsMonitor in ASP.NET Core
Performance in .NET 6
Layout skeleton per Screen Reader
Agenda di #devconf22 del 26/05 quasi al completo! Ce n'è per tutti i gusti: #dotnet, #aspnetcore, #blazor, #terraform, #githubAltre informazioni e iscrizioni su => https://aspit.co/devconf-22
Parallelizzare le chiamate HTTP con async/await e le Promise in JavaScript
Graceful shutdown di un hosted service di ASP.NET Core
Dichiarare una variabile in JavaScript con le parole chiave var, let e const
Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Impostare un default custom per i metodi LINQ che tornano il valore di default
- Velocizzare l'installazione delle dipendenze in un workflow di GitHub
- YARP: un reverse proxy in ASP.NET Core
- Costruire applicazioni native per ogni dispositivo con .NET e Visual Studio