使用jQuery的ASP.NET MVC AJAX

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?

我有一个网站，每个用户的页面显示注释，并允许其他用户添加注释。我想拥有它，所以添加注释表单在页面上，当用户添加注释时，它将被添加到数据库并显示在带有AJAX的注释部分中。我正在使用jQuery for AJAX和LINQ to SQL来处理数据库逻辑。如何执行此操作以便在将注释添加到数据库之后，将刷新和更新注释部分而不刷新页面？

2 个解决方案

#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):

您需要利用jQuery ajax调用触发的“成功”（或“完整”）事件来触发后续的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();                    
            }
        }
    });

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

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

#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.

在回应Matt时，提交表单数据的另一种方法是，您可以在jQuery.ajax函数的'data'字段中调用$（'#form'）。serialize（）而不是JSON。这将消除对插件的需求。

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:

此外，我不是这个主题的专家，仍然试图自己学习它，但是当你可以将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);


        }
    }
    });

#1