Mootools & JQuery Ajax calls to an ASP.NET MVC Application

It’s been a while since I’ve messed around with some good ol’ Mootools and JQuery. I hope they’re still in fashion!

This project demonstrate something very simple and something that probably every web application out there has to do nowadays… make ajax calls from JavaScript to a backend ┬áservice. Both Mootools and jQuery provide wrappers around that functionality but it can be annoying to get started with them especially when you want to POST different kinds of data – simple strings and numbers, complex objects and lists etc.

The code is on GitHub (you can also download a .zip file from this link)

https://github.com/floatingfrisbee/MooToolsAndJqueryServiceExample

Not much more to say but if you check out the project (an ASP.NET MVC 3 application build using Visual Studio 2010) it is a minimalistic demonstration of what headers you need to set, what additional encoding (using json2) you need and a couple of other nuances.

Here are Mootools calls

// Call a service that takes a simple string as input
function simpleMoo() {
    var args = new Object();
    args.stuff = 'A Compact JavaScript Framework';

    var req = new Request.JSON({
        url: '/home/savestuff',
        method: 'POST',
        onSuccess: OnSuccessMoo,
        onFailure: OnFailureMoo,
        data: args
    });

    req.send();
}

// Call a service that takes an object with a sub object as an argument
function complexMoo() {
    var args = new Object();
    args.Name = 'Vince';
    args.Age = 34;
    args.Address = new Object();
    args.Address.Street = '32 E 23RD ST APT F';
    args.Address.City = 'New York';
    args.Address.State = 'NY';
    args.Address.Country = 'USA';

    var req = new Request.JSON({
        url: '/home/savecomplexstuff',
        method: 'POST',
        onSuccess: OnSuccessMoo,
        onFailure: OnFailureMoo,
        urlEncoded: false
    });

    req.setHeader('Content-Type', 'application/json; charset=utf-8');

    req.send(JSON.encode(args));
}

// Call a service that takes a list as an argument
function listMoo() {
    var args = new Object();

    args.listOfStuff = [];
    args.listOfStuff[0] = "Christoph Pojer";
    args.listOfStuff[1] = "David Walsh";
    args.listOfStuff[2] = "Darren Waddell";

    var req = new Request.JSON({
        url: '/home/savealistofstuff',
        method: 'POST',
        onSuccess: OnSuccessMoo,
        onFailure: OnFailureMoo,
        urlEncoded: false
    });

    req.setHeader('Content-Type', 'application/json; charset=utf-8');

    req.send(JSON.encode(args));
}

And here are the JQuery calls

// Call a service that takes a simple string as input
function simpleJQuery() {
    var args = new Object();
    args.stuff = 'Write Less Do More';

    $.ajax({
        url: '/home/savestuff',
        type: 'POST',
        data: args,
        success: OnSuccessJQuery,
        error: OnFailureJQuery
    });
}

// Call a service that takes an object with a sub object as an argument
function complexJQuery() {
    var args = new Object();
    args.Name = 'Vince';
    args.Age = 23;
    args.Address = new Object();
    args.Address.Street = '45 W 43TH ST APT E';
    args.Address.City = 'New York';
    args.Address.State = 'NY';
    args.Address.Country = 'USA';

    $.ajax({
        url: '/home/savecomplexstuff',
        type: 'POST',
        data: JSONDC.stringify(args),
        contentType: 'application/json; charset=utf-8',
        success: OnSuccessJQuery,
        error: OnFailureJQuery
    });
}

// Call a service that takes a list as an argument
function listJQuery() {
    var args = new Object();

    args.listOfStuff = [];
    args.listOfStuff[0] = "John Resig";
    args.listOfStuff[1] = "Leah Silber";
    args.listOfStuff[2] = "Adam Sontag";

    $.ajax({
        url: '/home/savealistofstuff',
        type: 'POST',
        data: JSONDC.stringify(args),
        contentType: 'application/json; charset=utf-8',
        success: OnSuccessJQuery,
        error: OnFailureJQuery
    });
}

Hope this help you get going faster!

Mootools & JQuery Ajax calls to an ASP.NET MVC Application