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!