ASP.NET MVC中使用jQuery的AJAX

Question

我有一个网站，每个用户的页面都显示评论并允许其他用户添加评论。我希望在页面上有一个添加评论的表单，在用户添加评论时，通过AJAX将其添加到数据库，并在评论部分显示。我正在使用jQuery处理AJAX，使用LINQ to SQL处理数据库逻辑。如何实现这一点，以便在将评论添加到数据库后，刷新和更新评论部分而不刷新整个页面？

- Brandon

Answer 1

您需要利用jQuery AJAX调用触发的“success”（或“complete”）事件，以便触发后续的AJAX调用来刷新评论内容。这可能看起来像这样（随意构建，未经测试）：

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

编辑 JSON 代码将使用 jQuery 插件 jquery-json (http://code.google.com/p/jquery-json/)

- Matt

---

URL应该是：'/Comments/Add'，否则URL会被附加到当前URL上，很可能导致404错误。 - Sailing Judo

事实上，最好使用MVC助手之一来生成路径，因为如果您的站点在IIS下作为另一个网站的嵌套应用程序运行，则前导/也会使事情变得混乱。 - Matt

Answer 2

回复Matt，另一种提交表单数据的方式是，在jQuery.ajax函数的“data”字段中调用$('#form').serialize()，而不是使用JSON。这将消除插件的需要。

此外，我不是这个主题的专家，仍在尝试学习它，但是当您可以将ASP.NET MVC的响应插入页面时，是否有必要同时使用POST和GET请求呢？这将导致一个请求。虽然可能存在采取这种方法的有效原因。 我猜我的做法会像这样：

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


        }
    }
    });

- JulianR

---

嗨，朱利安 - 关于将新评论结果合并到POST响应中的观点非常好。我想这归结于你有多么注重RESTful crud纯洁主义。就个人而言，我会将其合并到响应中以节省往返时间，尽管一些纯洁主义者可能会提出不同的观点。 - Matt