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
Gestire progetti NPM in .NET Aspire
Evitare memory leaks nelle closure JavaScript
Modificare lo stile in una QuickGrid Blazor
Implementare il throttle in JavaScript
Fornire parametri ad un Web component HTML
Usare la parola chiave field per semplificare la scrittura di proprietà in C#
Gestire gli errori nelle Promise JavaScript con try()
Impostare la content-visibility in CSS per ottimizare il rendering iniziale di una pagina
Integrare un servizio esterno con .NET Aspire
Gestione degli eventi nei Web component HTML
Gestione opzioni colonna nella Blazor QuickGrid


