Effettuare chiamate ad un controller tramite AJAX in ASP.NET MVC

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"); 
}