mrgeesbigcircus

I'm a web designer and developer from Nottingham. I mostly work in C# for getting things done, although I have a penchant for obscure and interesting aspects of programming. I come from a background of generally non-IT environments, so I tend to see things from a "human" perspective.

Away from the computer, I love cycling and mountain biking, as well as dusting off my rather large collection of records every now and then. I'm also a big fan of graphic design, illustration and typography.

I'm married to my beautiful wife Luce and we have a gorgeous girl called Bibi.

RSS
Archive

Oct 4

Calling an MVC Action from jQuery (and doing some crazy class togglin’)

Wow, been a while hasn’t it? Anyway…I’ve recently been tricking out our MVC application with some additional jQuery goodies.

The main crux of the application is about allowing the user to build up lists of people. @paulwallas designed a UI which incorporated a “star” visual - from a search, clicking it once would “light up” the star and add the person to the list. Clicking it again would toggle the process, turning the star grey and removing the person from the list. Because of initial time constraints, we built this facility to perform a page refresh when a person was added or removed - the actual HTML and CSS classes assigned to the state of the person (added/removed) was generated on the fly in the actual LINQ code on each page load - sounds oh-so-snazzy when talking about it over cheese and wine, but not terribly efficient.

So, all aboard the good ship jQuery.ajax!The basic functionality of the application remains, however rather than an <a> tag performing all the back end trickery to add the person to the list, then reload the list with the toggled markup code, we now have something like this:

    addUser = function (id) {        $.ajax({            type: "POST",            url: "/Controller/Action",             data: "id=" + id,            success: function (result) {                $("#starSpan" + id).removeClass().addClass("starredIcon");                 $("#starSpan" + id).unbind("click").click(function () { removeUser(id); });                 $("#dropSpan" + id).removeAttr("class").addClass("expandUserIcon");             },            error: function (req, status, error) {             }        });    }

Pretty neat!The user stays where they are, but the loveliness of the MVC action performing the adding/removing all kicks off behind closed doors. There’s obviously the removeUser() function which performs the opposite, and toggles the classes back.

Posted via email from The wonderful world of pgdev | Comment »