JsAction è una piccola e leggera libreria per ASP.NET MVC, in grado di generare automaticamente codice javascript basato su jQuery che permette di chiamare lato client qualsiasi metodo lato server, attraverso una sola DataAnnotation e una singola linea di codice.
Supponiamo di avere un controller chiamato Home, semplicissimo e minimale, con un metodo che ritorna una stringa:
public string MyTestMethod() { return "Test String"; }
Ci proponiamo di voler chiamare il metodo dal client usando javascript e 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 semplice approccio, se pur funzionante, ha alcuni difetti:
- Nei file .js, per default, non è disponibile l'helper @Url e quini è necessario scrivere l'url a mano, utilizzare delle estensioni o salvare l'url precedentemente in qualche variabile.
- Cosa succede se il metodo viene marcato con HttpPost? Occorre modificare la chiamata Ajax per poter "riallineare" il metodo client e metodo 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 DataAnnotation.
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.
E' sufficiente 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 layout page (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à automaticamente sì che venga generato un oggetto JsActions con all'interno il nostro metodo:
$(document).ready(function () { var ret = JsActions.Home.MyTestMethod(1,2); });
La chiamata AJAX, pertato, può essere eseguita ora tramite una sola riga di codice.
Ma JsAction fa anche altro: è in grado di leggere diversi attributi standard (NonAction, ActionName) e di modificare il codice javascript a seconda delle scelte fatte dall'utente, costruendo l'oggetto proxy in accordo alle scelte dei metodi supportati (GET o POST).
JsAction è in continua crescita, nella release più recente è stato aggiunto anche il supporto all'intellisense, come possiamo vedere dalla figura, ed ha anche diverse altre funzionalità.
Maggiori informazioni sul progetto possono essere reperite sul sito ufficiale all'indirizzo http://jsaction.codeplex.com.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Assegnare un valore di default a un parametro di una lambda in C#
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Short-circuiting della Pipeline in ASP.NET Core
Miglioramenti agli screen reader e al contrasto in Angular
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Reactive form tipizzati con modellazione del FormBuilder in Angular
Disabilitare automaticamente un workflow di GitHub (parte 2)
Gestire domini wildcard in Azure Container Apps
Implementare il throttling in ASP.NET Core
C# 12: Cosa c'è di nuovo e interessante
Usare le variabili per personalizzare gli stili CSS
Gestire la cancellazione di una richiesta in streaming da Blazor