ASP.NET MVC AJAX with jQuery

Question

I have a site where each user's page shows comments and allows other user's to add comments. I want to have it so the add comments form is on the page and when a user adds a comment, it is added to the database and shows up in the comment section with AJAX. I am using jQuery for the AJAX and LINQ to SQL to handle the database logic. How would go about doing this so that after the comment is added to the database, the comments section is refreshed and updated without refreshing the page?

Solution 1

You would need to take advantage of the 'success' (or 'complete') event that is fired by the jQuery ajax call to fire a subsequent AJAX call for refreshing the content of your reviews. This would probably look something like (winged it, untested):

function UpdateComments(){
    resultHTML = jQuery.ajax({
        type: 'GET',
        url: 'Comments/List/UserID'
    }).responseText;

    $('#comments').html(resultHTML);
}

function PostComment(targetUserID, commenterUserID, comment)
jQuery.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: $.toJSON({review: comment, id:targetUserID, commenter:commenterUserID}),
        dataType: 'json',
        url: 'Comments/Add',
        success: function(result){
            // Only update comments if the post was successful:
            resultJson = $.evalJSON(result);
            if(resultJson['success'] == true){
                UpdateComments();                    
            }
        }
    });

EDIT The JSON code would make use of the jquery plugin jquery-json (http://code.google.com/p/jquery-json/)

Solution 2

In response to Matt, another way to submit the form data is, instead of the JSON, you could call $('#form').serialize() in the 'data' field of the jQuery.ajax function. This would eliminate the need for a plugin.

Also, I'm not an expert on this subject, still trying to learn it myself, but is it necessary to have both a POST and GET request when you could insert the response from ASP.NET MVC into the page instead? This would result in one request. There might be a valid reason for that approach though. I guess mine would look like this:

    // The Controller Action should return a PartialView as response,
    // so just a user control that contains the comments. 
function PostComment(targetUserID, commenterUserID, comment)
jQuery.ajax({
    type: 'POST',
    data: $('#commentForm').serialize(),
    url: 'Comments/Add',
    success: function(result){ 
        $('#comments').html(result);


        }
    }
    });

Comments

[Matt]

Hi Julian - that is a very good point RE: combining the new comment results into the POST response. I suppose it boils down to how much of a RESTful crud purist you are. Personally, I'd combine it into the response, to save the round-trip, even though some purists might argue otherwise.

[Sailing Judo]

the url should be: '/Comments/Add' ... otherwise the url gets appended to the current url and you will most likely get a 404.

[Matt]

In fact, it is probably better to use one of the MVC helpers to actually generate the path, because the leading / will also throw things off if your site is operating as a nested application under another website in IIS