Question

我有一个简单的页面，可以在表格中显示用户的电子邮件地址。我还在桌子下面有一个文本框和一个“添加”按钮。目前，我正在使用一个由控制器处理的简单表单帖子，该控制器将电子邮件地址添加到数据库并重新加载页面。这很好，但我希望通过使用jQuery和AJAX来简化流程，以便不需要刷新页面。

这样做的最佳方法是什么？我想我必须为按钮的click事件设置一个事件监听器，对像“Email / Add”这样的URL执行AJAX调用。我迷失的地方是弄清楚从控制器操作返回什么类型的信息，以及如何在客户端解析该信息以更新电子邮件地址表。那里有什么好的样品吗？

Answer 1

您应该使用XML或JSON。我更喜欢JSON，因为它很容易在javascript端解析。

在添加按钮的单击处理程序中，对某些MVC路径进行AJAX调用，指定添加了哪些电子邮件。使该路径的代码插入指定的电子邮件。然后，只返回一个结果：

{
    result: 'SUCCESS',
    description: 'Email Added.'
}

然后，在你的AJAX回调中，解析结果如下：

//This function abstracts away the strangeness in dealing with the eval method and returning JSON objects
//If there is a better way, let me know
function ParseJSON(jsonText) {
    var ret = null;
    eval('ret = '+jsonText);
    return ret;
}

var ret = ParseJSON(response.value);;

if(ret.result == 'SUCCESS') {
    //Add a new TR to your table here
} else {
    //Display the error message here
    // alert(ret.description);
}

'SUCCESS'的结果意味着服务器已将电子邮件添加到数据库。因此，我们只需使用JavaScript动态地将行添加到表中，您就不必刷新页面。

Answer 2

如果要使用jquery，可以返回局部视图并将返回html插入当前文档。 ajaxloading div包含一个旋转加载的gif。返回的值作为最后一个值插入表中。视图在tr-tags之间返回一段html。

    $("#ajaxLoading").show();

     $.ajax({
         type: "POST",
         url: "/Hoofdgroepen/Add",
         data: "nummer=" + nummer + "&omschr=" + omschr,
         dataType: "html",
         success: function(result) {
             //alert(result);                                
             $("tr:last").after(result);
             $("#ajaxLoading").hide();
             $("#hfdgrpForm").resetForm();
         }
     });

Answer 3

当您应用EnganderedMassa的anwser时，您还可以使用micro-template的客户端功能。这是John Resig / jQuery god用来解析和格式化从帖子返回的数据集的技术。您的餐桌是实现这一目标的理想场所。

以下是两篇使用此技术的博客文章（它们基于.Net，但在.Net方面有点亮。）

Encosia - JTemplate

.Net and John Resig's micro template

使用jQuery和ASP.NET MVC刷新表信息

3 个答案: