使用jQuery的ASP.NET MVC AJAX

Question

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

Answer 1

您需要利用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();                    
            }
        }
    });

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

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


        }
    }
    });