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
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Implementare il throttling in ASP.NET Core
Generare file per il download da Blazor WebAssembly
Load test di ASP.NET Core con k6
Eseguire operazioni con timeout in React
Utilizzare la libreria Benchmark.NET per misurare le performance
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Recuperare un elemento inserito nella cache del browser tramite API JavaScript