Return a PartialView from $.Ajax Post

Question

I have the following code;

        $.ajax({
            url: "/Home/jQueryAddComment",
            type: "POST",
            dataType: "json",
            data: json,
            contentType: 'application/json; charset=utf-8',
            success: function(data){ 
                //var message = data.Message; 
                alert(data);
                $('.CommentSection').html(data);
            }

And in my controller;

    [ValidateInput(false)]
    public ActionResult jQueryAddComment(Comment comment)
    {
        CommentSection commentSection = new CommentSection();

        //ya da - ya da 
        // fill the commentsection object with data

        //then
        return PartialView("CommentSection", commentSection);

    }

However, when I get back to the page the success alert doesn't happen. Can anyone see the flaw in this logic?

Answer 1

Your expecting JSON in the .Ajax POST, but in the ActionMethod your returning a PartialView?

Try:

$.ajax({
   url: "/Home/jQueryAddComment",
   type: "POST",
   dataType: "html",
   data: json,
   success: function(data){ 
      //var message = data.Message; 
      alert(data);
      $('.CommentSection').html(data);
   }
}

Answer 2

Unless it was copied over wrong it appears you are missing some closing tokens.

       $.ajax({
        url: "/Home/jQueryAddComment",
        type: "POST",
        dataType: "json",
        data: json,
        contentType: 'application/json; charset=utf-8',
        success: function(data){ 
            //var message = data.Message; 
            alert(data);
            $('.CommentSection').html(data);
            } //<-- added close for anonymous function
        }); //<--added close/semicolon for ajax function

Also, you are POSTing but it your action doesn't appear to have the [Post] attribute. When you run this in the debugger does a breakpoint on your action get hit?