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

Answer 1

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);


        }
    }
    });

Answer 2

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/)