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
Eseguire lo shutdown pulito di un'applicazione ASP.NET Core
Creare applicazioni web native con Electron
Effettuare il tracing asincrono delle chiamate a un'applicazione ASP.NET Core
PWAConf 2020
Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
Un componente per gestire lo stato della connessione di rete in Blazor WebAssembly
Abilitare la configurazione fortemente tipizzata in Blazor
Un pattern per gestire il pre-rendering in componenti Blazor complessi
Componenti presentational e container nei framework frontend
Testare una pagina web con Puppeteer e Puppeteer recorder
Gestire un observable quando la finestra del browser non è attiva in Angular