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

【问题标题】：Refresh table info using jQuery and ASP.NET MVC使用 jQuery 和 ASP.NET MVC 刷新表信息
【发布时间】：2010-09-22 18:29:18
【问题描述】：

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

执行此操作的最佳方法是什么？我想我必须为按钮的单击事件设置一个事件侦听器，对诸如“电子邮件/添加”之类的 url 执行 AJAX 调用。我迷路的地方是弄清楚从该控制器操作返回什么类型的信息，以及如何在客户端解析这些信息以更新电子邮件地址表。有没有这方面的好样本？

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案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 将行动态添加到我们的表格中，您无需刷新页面。

【讨论】：

【解决方案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();
         }
     });

【讨论】：

【解决方案3】：

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

这里有两篇博客文章使用了这种技术（它们基于 .Net，但在 .Net 方面比较简单）。

Encosia - JTemplate

.Net and John Resig's micro template

【讨论】：