ASP.NET MVC consente in maniera estremamente semplice di effettuare invocazioni a metodi di un controller utilizzando AJAX e, pertanto, senza che sia necessario effettuare un refresh della pagina. Supponiamo, ad esempio, di aver realizzato una pagina di visualizzazione dettaglio prodotto e di voler aggiornare, al click dell'utente su un apposito link, il valore delle scorte rimanenti in magazzino. Il primo passo è quello di includere nel markup della view o della master page, le reference alla libreria client di ASP.NET AJAX e alle sue estensioni per MVC:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Sul controller esponiamo una action che accetta un prodottoId e restituisce una stringa simile a quello seguente:
public string ProductStocks(int productId) { int stocks = ProductServices.GetStocks(productId); return string.Format("{0} pezzi rimanenti.", stocks); }
A questo punto, sulla view è sufficiente utilizzare AjaxHelper per renderizzare nella pagina un hyperlink che, se cliccato, utilizza la tecnologia AJAX per invocare ProductStocks.
<%= Ajax.ActionLink( "Verifica disponibilità", "ProductStocks", new { productId = this.Model.Id }, new AjaxOptions { UpdateTargetId = "stocks" }) %> <div id="stocks"></div>
Come possiamo notare, oltre al testo che deve apparire sul link, il metodo accetta vari altri parametri, tra cui:
- il nome della action da invocare (è possibile specificare opzionalmente anche il controller)
- un anonymous type tramite il quale passare evenutali parametri in ingresso; nel nostro esempio abbiamo supposto che il model della view contenga l'id prodotto nella proprietà Id
- un'istanza di AjaxOptions, che abbiamo usato per indicare che al termine dell'invocazione, dovrà essere aggiornato il contenuto del div con id="stocks" posizionato più in basso; oltre questo, AjaxOptions consente di implementare diverse funzionalità di alto livello, specificando ad esempio le funzioni Javascript da eseguire prima e dopo la chiamata o per richiedere conferma all'utente.
In questo caso, l'HTML risultante era piuttosto semplice (una banale stringa). In generale, però, nulla vieta di realizzare una action che restituisca una vera e propria partial view, sicuramente più adatta per generare markup complesso:
public ActionResult ProductStocks(int productId) { ViewData["stocks"] = ProductServices.GetStocks(productId); return View("StocksView"); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
PWAConf 2020
Eseguire del codice personalizzato al click di una checkbox in Blazor
Un confronto tra React, Angular, Vue.js e Svelte
Blazor <3 Javascript
Un componente per gestire lo stato della connessione di rete in Blazor WebAssembly
Registrare un servizio generico nella dependency injection di ASP.NET Core
Testare una pagina web con Puppeteer e Puppeteer recorder
Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML
Utilizzare i Workspace con NPM 7
Utilizzare la deconstruction in combinazione con l'operatore rest di Javascript
L'agenda di #netconfit è online => https://aspit.co/netconfit-20 3 track, tante sessioni e una keynote speciale di @shanselman per la più importante conferenza in lingua italiana su .NET! Vi aspettiamo il 24/11. Iscrizioni sempre aperte! #donet #aspnet #netconf
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Modificare automaticamente la Wiki da una pipeline YAML con Azure DevOps
- Gestione dei token negli input di testo con la Universal Windows Platform
- Utilizzare le proprietà Init-only per inizializzare una proprietà in C# 9
- Effettuare il redirect da HTTP a HTTPS con la Azure CDN
- Creare template HTML con Slim