Programmazione.it :: JsAction, chiamate AJAX in .NET

JsAction, chiamate AJAX in .NET

Scritto da Vincenzo Chianese il 12-03-2012 ore 15:52

JsAction è una piccola e leggera libreria per ASP.NET MVC, in grado di generare automaticamente codice JavaScript basato su jQuery. Fine ultimo della libreria è quello di chiamare lato client qualsiasi metodo lato server usando una sola DataAnnotation e una singola linea di codice.

Supponiamo di avere un controller minimale chiamato Home, con un metodo che ritorna una stringa:

public string MyTestMethod()
{
  return "Test String";
}

Supponiamo a questo punto di voler chiamare il metodo dal client usando AJAX e di visualizzare a video il risultato; il codice dovrebbe essere più o meno una cosa del genere:

function AjaxDisplayString()
{
  $.ajax({
    url: @Url.Action("MyTestMethod"),
    method: 'GET',
    success: function(data) { alert(data); }
  });
}

Questo approccio naive, seppur funzionante, ha alcuni difetti:

Nei file .js non è disponibile l’helper @Url. E’ quindi necessario scrivere l’url a mano, utilizzare delle estensioni o salvare l’url precedentemente in qualche variabile.
Se il metodo viene marcato con HttpPost, occorre modificare la chiamata AJAX per poter riallineare il metodo client e quello del server. E se poi si cambia idea e lo si rende disponibile solo a richieste di tipo GET? E’ necessario ancora una volta modificare il codice.

JsAction si occupa tutto di questo (e di molto altro) automaticamente utilizzando una singola data annotation.

L’installazione di JsAction è estremamente rapida: il pacchetto può essere scaricato dal sito e inserito come riferimento nel proprio progetto o (metodo consigliato) essere aggiunto usando nuGet.
Basta andare su
Tools -> Library Package Manager -> Add Library Package Reference e selezionare OnLine. Una volta trovato il pacchetto premere Install. Terminato il download, deve essere aggiunta una entry nella route table per permettere a JsAction di gestire le sue chiamate. La procedura è semplice: andiamo su global.asax e cerchiamo la funzione RegisterRoutes:

public static void RegisterRoutes(RouteCollection routes)
{
  routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  routes.Add(JsAction.JsActionRouteHandlerInstance.JsActionRoute); //JsAction
  routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", // URL with parameters
    new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
  );
 
}

E’ molto importante inserire la route di JsAction prima del MapRoute di default.
L’ultimo passo è referenziare JsAction nella pagina web (solitamente layout.cshtml)

@using JsAction
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    @Html.JsAction()
    <script src="../../Scripts/script.js" type="text/javascript"></script>
</head>
 
<body>
    @RenderBody()
</body>
</html>

Riprendiamo il nostro metodo e marchiamolo con l’attributo JsAction:

[JsAction()]
public string MyTestMethod(int a, int b)
{
  return (a+b).ToString();
}

La presenza dell’attributo farà sì che venga generato un oggetto JsAction con all’interno il nostro metodo:

$(document).ready(function () {
  var ret = JsActions.Home.MyTestMethod(1,2);
});

La chiamata AJAX è stata sostituita da una sola riga di codice.

JsAction è inoltre in grado di leggere diversi attributi standard (NonAction, ActionName) e di modificare il codice JavaScript a seconda delle scelte fatte dall’utente, costruendo la chiamata AJAX in accordo alle scelte dei metodi supportati: GET o POST.
Nella release più recente è stato aggiunto anche il supporto ad IntelliSense. Una delle cose che scoraggia gli utenti ad usare JavaScript e quindi limita anche la diffusione di MCV è la mancanza di IntelliSense con JavaScript.

Riprendiamo il nostro metodo e aggiungiamo dei commenti nel codice.

Con un semplice script PoweShell - installato automaticamente assieme a JsAction - è possibile generare un file .vsdoc.js il quale, referenziato nei nostri file .js, attiverà l’IntelliSense di Visual Studio.
Per prima cosa assicuriamoci che l’applicazione compili senza errori e che l’output XML sia abilitato (Project Properties -> Build -> Check "Xml Documentation File").
Andiamo quindi sul Package Manager Console e lanciamo il seguente comando:PM> JsAction-GenDoc

Il progetto sarà compilato ed eseguito. Se ci saranno errori, saranno mostrati sulla console. Nella cartella Scripts verrà generato un file .vsdoc.js, il quale, referenziato nei vostri script, attiverà IntelliSense.

Come potete notare sono stati risolti sia i parametri i loro tipi (Student, Int32) e i commenti riportarti nel metodo del controller.