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

di Marco De Sanctis, in ASP.NET MVC, C#,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi