JsAction...in action!

Installation

You can install JsAction in 2 ways: downloading library from download page and reference it in Visual Studio, or using the nuGet package manager and adding the JsAction package.
Go to Tools -> Library Package Manager -> Add Library Package Reference and select OnLine. Once located the package press install. (nuget package page: http://www.nuget.org/packages/jsaction)

Configuration

Keep in mind all classes, helpers and more are located under JsAction namespace

You just have to add a script reference in your page (usually your layout.cshtml).
It must be called after jQuery include.

@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>

NOTE: script.js is not a package file. It's a simple js file in which i place javascript code to use JsAction.
Obiously script usage must occurr AFTER JsAction object definition.

Simpest Usage

Configuration it's over, now you can use library.

Let's take the usual Home controller class and decorate its method with JsAction attribute.
        [JsAction()]
        public string MyTestMethod(int a, int b)
        {
            return (a+b).ToString();
        }

Let's use default parameterless costructor. We will explore other features later.
JsAction will create a JsActions object with all methods marked with JsAction attribute.

We can now call method from Javascript code using the pattern JsAction.ControllerName.Method
$(document).ready(function () {
    var ret = JsActions.Home.MyTestMethod(1,2);
});

The ret object is the same returned from $.ajax call.
According to jQuery documentation:
The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object.
and
The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface

This means, if we are using jQuery 1.5+, we can take advantage of Promise interface:

$(document).ready(function () {
     JsActions.Home.MyTestMethod(1,2).then(function(data){ alert(data); });
});

What if i'm using jQuery < 1.5?
You can still take advantage of JsActions. Every function takes a optional option object parameter, that will be merged with options of jQuery ajax call.
You can, obiously, manage all properties, and can have a look at official page documentation -> http://api.jquery.com/jQuery.ajax/

This quick example will clarify. Controller code is the same, we have only to change javascript:

$(document).ready(function () {
    var ret = JsActions.Home.MyTestMethod(1, 2, {
        success: function (data) {
            alert(data);
        }
    });
});
Anyway, really suggest you to upgrate to latest version. It requires minimal code changes and will improve your way to javascript.

You can, potentially, reconfigure entire options for jQuery ajax call, also the ones filled automatically from JsActions.

Next Step - Intellisense feature

Last edited Mar 31, 2012 at 11:12 AM by XVincentX, version 14

Comments

XVincentX Jun 13, 2012 at 4:38 PM 
Yes, since 0.5 i've changed method name to place it in default namespace and keep "name safety"

tommck May 2, 2012 at 4:56 PM 
Looks like @Html.JsAction() doesn't work...

@Html.JsActionScript() looks like it might be correct