{Programming} & Life

I don’t have a lot of time to blog about this, and it is something I wanted to blog about weeks ago, so while I have the links on hand, here are the links I used to move away from ASP.NET MVC’s built in Ajax methods utilising the Microsoft Ajax JavaScript library (you know, your Ajax.BeginForm()) which in my opinion does not offer as much control and fine tuning, and over to the promise land of jQuery AJAX & JSON data structures.

These are the links I learnt from, I used best bits out of them all to come up with something decent to my knowledge: -

• http://weblogs.asp.net/mikebosch/archive/2008/02/15/asp-net-mvc-submitting-ajax-form-with-jquery.aspx
• http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx
• http://haacked.com/archive/2008/11/21/combining-jquery-form-validation-and-ajax-submission-with-asp.net.aspx
• http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
• http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/
• http://www.iridescence.no/post/Invoking-ASPNET-MVC-Actions-from-JavaScript-using-jQuery.aspx
• http://blogger.forgottenskies.com/?p=252

I especially found great value in the encosia.com ones.

And now to cut the fat, just a quick sample of how I would go about returning data via Ajax with jQuery (“getexamplemessage” returns a JsonResult from my ASP.NET MVC controller action, all data for sample purposes):

    function getExampleMessage() {
        var ajaxLoadImgId = 'ajaxLoadingGetExampleMessage';
        $("#" + ajaxLoadImgId).html(ajaxLoadImage);
        $('#MessageFormat').hide();
        $("#" + ajaxLoadImgId).show();
        var moduleId = $("input#FromModuleID").attr("value");
        var messageTypeId = $("input#MessageTypeID").attr("value");
        $.ajax({
            type: "GET",
            url: "/configuration/module/getexamplemessage",
            data: {
                moduleId: moduleId,
                messageTypeId: messageTypeId
            },
            dataType: "json",
            success: function(result) {
                $("#" + ajaxLoadImgId).hide();
                // Insert the returned HTML into the
.
                $('#MessageFormat').text(result.exampleMessage).fadeIn('fast');
                //$("textarea#MessageToTranslate").val(result.exampleMessage);
            },
            error: function(req, status, error) {
                $('#MessageFormat').text('Could not load example translation message, please try reloading the page.');
                $("#" + ajaxLoadImgId).hide();
                $('#MessageFormat').show();
            }
        });
    }