ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

Web API work with WebForms too, so they are a good candidate to replace PageMethods.

JsAction, even if Web API are still in beta, provides full support (intellisense too).
In this document we will see how to install and use them with JsAction support
  • Install nuGet packages
WebApi is formet (actually) by several nuget packages that must be installed (however, JsAction.WebAPI nuget package has dependency resolver).
  1. <package id="AspNetWebApi" version="4.0.20126.16343" />
  2. <package id="AspNetWebApi.Core" version="4.0.20126.16343" />
  3. <package id="System.Json" version="4.0.20126.16343" />
  4. <package id="System.Net.Http" version="2.0.20126.16343" />
  5. <package id="System.Net.Http.Formatting" version="4.0.20126.16343" />
  6. <package id="System.Web.Http.Common" version="4.0.20126.16343" />

The first line add the JsAction route handler that will manage and generate automatic javascript.
The second line maps the route template "api/{controller}/{id}" to WebApi.

JsAction WebApi has a separate nuget package: locate JsAction.WEBAPI

That's all about configuration. Now it's time to code.
Here is a sample ApiController class that implements some methods.
    public class StudentController : ApiController
        private List<Student> data;

        public StudentController()
   = new List<Student>() 
                new Student(){id=0, Name="Vincenzo", Surname="Chianese", BirthDay=DateTime.Parse("20/05/1989"), Exams=10},
                new Student(){id=1, Name="Fernando", Surname="Alonso", BirthDay=DateTime.Parse("19/07/1981"),Exams=0},
                new Student(){id=2, Name="Bill", Surname="Gates", BirthDay=DateTime.Parse("28/10/1955"), Exams=2}

        public IEnumerable<Student> GetStudentList()
            return data;

        public Student GetById(int id)
            return data.Where(s => == id).First();

        public Student GetByName(string name)
            return data.Where(s => s.Name == name).First();


        public Student GetBySurname(string surname)
            return data.Where(s => s.Surname == surname).First();

        public HttpResponseMessage PostStudent(Student st)
          //new student logic
            return new HttpResponseMessage(System.Net.HttpStatusCode.OK);

        public HttpResponseMessage DeleteStudent(int id)
            var elem = data.Where(q => == id);
            if (elem.Count() > 0)
                //Remove logic
                return new HttpResponseMessage(System.Net.HttpStatusCode.OK);
            return new HttpResponseMessage(System.Net.HttpStatusCode.NotFound);

There is nothing of new in this class. It implements a basic (and very bad one) CRUD logic. Obiously, since REST is stateless, you won't have access to Session object.

If you're already a JsAction user, you may see that JsAction attribute is applied on class instead of interested methods.
WebAPI purpose it's to give a public interface on your data; following this principle, all methods in an ApiController class should be reachable: JsAction attribute on single methods has no sense.
Anyway, for particular usages, JsAction will still honor the NonActionAttribute (if specified on a method), skipping its javascript generation.

//install on page section

All WebApi methods are placed into WebApi object of JsActions. Considering previous declared controller, we may call API using this code (taken from preliminary unit tests)
test('JsAction WebApi support', function () {
    JsActions.WebApi.Student.GetStudentList().then(function (data) { ok(typeof data != 'undefined', 'WebApi data retrieving'); start(); });
    JsActions.WebApi.Student.GetById(2).then(function (data) { ok(typeof data != 'undefined', 'WebApi data retrieving 2'); start(); });
    JsActions.WebApi.Student.PostStudent({ id: 3, Name: "Francisco", Surname: "Franco", BirthDay: new Date(), Exams: 15 }, { statusCode: { 200: function () { ok(true, 'New element inserted'); start(); } } });
    JsActions.WebApi.Student.DeleteStudent(500, { statusCode: { 200: function () { ok(false, 'This is not good'); start(); }, 404: function () { ok(true, 'Element not found'); start(); } } });


Of course, WebApi support has been unit tested:

NOTE: WebApi is still in beta and its JsAction support is too. So please do not esistate to open a discussion or issue tracker!

Last edited Mar 31, 2012 at 12:41 PM by XVincentX, version 8


No comments yet.