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

Question

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

执行此操作的最佳方法是什么？我想我必须为按钮的单击事件设置一个事件监听器，对“电子邮件/添加”等 url 执行 AJAX 调用。我迷失的地方是弄清楚从 Controller 操作返回什么类型的信息以及如何在客户端解析该信息以更新电子邮件地址表。那里有任何好的示例吗？

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 动态地将行添加到表中，而无需刷新页面。