jQuery.get 到 MVC 控制器操作后重新加载页面答案

【问题标题】：Reload page after jQuery.get to MVC controller actionjQuery.get 到 MVC 控制器操作后重新加载页面
【发布时间】：2012-02-09 18:00:04
【问题描述】：

我正在尝试创建一个 MVC 视图，该视图将在多个表中显示一些数据，然后通过点击要更新的表上的提交按钮来更新这些数据。在表更新时，表中的记录可能会从一个表移动到下一个（这都在服务层而不是视图中处理）。目前，我有从控制器呈现的视图，每个表都是一个单独的局部视图，向用户显示数据。我的更新被一个 jQuery 方法拦截，该方法从表中捕获数据，然后将其作为 JSON 字符串发布到控制器。然后控制器反序列化 JSON 并将其发布到服务层。

然后我希望控制器返回一个视图结果，该结果将刷新整个页面，更新每个表以显示适当的记录。除了页面刷新之外，我的一切都在工作 - 我的控制器返回一个视图结果，并且视图和模型在返回时都是正确的，但是页面并没有像我期望的那样刷新。

我觉得我错过了一些愚蠢的东西，但此刻我看不到它是什么......

代码--

视图上的jQuery脚本：

function DailyPaymentIn(payInId, payOut, notes) {
  this.PayInId = payInId;
  this.PayOut = payOut;
  this.Notes = notes;
}

$(function () {
  $('#update-yes-payments').submit(function (e) {
    e.preventDefault();

    var payments = new Array();

    $('#payment-table-yes tbody tr').each(function () {
      var payInId = $('input#PayInId', this).val();
      var payOut = $('input#PayOut', this).is(':checked');
      var notes = $('input#payment_Notes', this).val();

      payments.push(new DailyPaymentIn(payInId, payOut, notes));
    });

    $.get('/payments/UpdatePayments', { json: JSON.stringify(payments) });
  });
});

上面是将值捕获到对象中，然后将其序列化为 JSON。这一切正常 - 数据被发送到控制器方法，并且在到达时处于正确的形状。我已经在实验中将 get 换成 post 并且没有任何运气。

控制器方法：

渲染数据的方法：

[HttpPost]
public ViewResult PayInAdmin(PayInAdminModel model)
{
    var payments = _autoPayOutService.PopulatePayments(model.PaymentsDate);

    return View("AutoPayOut/PayInAdmin", payments);
}

这将返回正确填充的视图。

更新数据的方法：

public ViewResult UpdatePayments(string json)
{
    var updates = Deserialise<List<DailyPaymentInUpdateModel>>(json);

    var model = _autoPayOutService.UpdatePayments(updates);

    return View("AutoPayOut/PayInAdmin", model);
}

这是接收 JSON 并正确处理它，但是当它返回时，页面没有更新。请注意，两个控制器操作返回的视图相同，服务调用的返回类型也相同 - 我可以看到调试中返回的正确填充的模型。

我不确定问题是什么，据我所知，这应该是正确返回视图。我对 jQuery 和 MVC 3 还很陌生，所以很可能是我用错了方法——我是否应该以不同的方式执行此操作，或者我是否只是错过了一些东西，我不确定.

干杯

【问题讨论】：

标签： c# jquery json asp.net-mvc-3

【解决方案1】：

如果你需要更新整个页面，你不需要使用$.get这个ajax方法。试试这个：

window.location = '/payments/UpdatePayments?json=' + JSON.stringify(payments);

【讨论】：

这可行，但会产生一个可怕的网址。它正在做我需要的。非常感谢。
虽然这可行，但我仍然建议您稍微改变一下这种方法。如果您正在“更新付款”，您应该执行 POST 而不是 GET，那么它就不会出现在您的 URL 中。另外，请考虑there is a recommendation 不会创建太长的 URL（超过 2000 个字符）。
同样，如果你想更新整个页面，使用标准的表单提交而不是 $.post 函数。
酷，谢谢 - 我会看看重构视图/控制器。

【解决方案2】：

对不起，但问题是，你返回页面但你没有得到回报，要获得回报你需要使用回调..函数（数据）......见下面的例子。然后如果你做console.log 上的回调就可以看到返回了。你需要做这样的事情。

$.get('/payments/UpdatePayments', { json: JSON.stringify(payments) }, function(data){
  //The data is the return.. is the view
  console.log(data);
 // you can change the div content
 $("#content").html(data)
});

function(Data)是get处理后返回的数据。

【讨论】：

如果你不使用 firefox + firebur 或 chrome，你可以做一个警报（数据），而不是 console.log。
有什么办法让它改变整个页面的内容？ $(文档).html(数据); ?
$("body").html("新的 html")

【解决方案3】：

一旦您从服务器接收到数据，您实际上并没有对它做任何事情。通过添加一个回调函数来更新您的$.get，该函数将结果粘贴到它应该去的地方。

您可以阅读有关 jQuery 的 get 函数 in the jQuery documentation 的更多信息。

【讨论】：

【解决方案4】：

执行 jQuery 调用时，您不会对成功或失败采取任何操作。

get 将通过 AJAX 执行，但页面不会发生任何事情，返回的内容将被丢弃。

如果返回的内容是 HTML，您可能需要在页面上进行就地替换。

编辑

要将页面的整个正文标记替换为响应的正文标记，您可以执行以下操作。在成功处理程序中，您知道数据响应将是一个 HTML 文档，所以 ...

$.get(url, data, function(data, textStatus, jqXHR) {
    $('body').replaceWith( $('body', $(data)) );
});

这确实是蛮力，我不是 100% 相信它会起作用，但你可以试一试，看看会发生什么。

【讨论】：

我以前做过，但是因为我想替换整个页面的内容，而不仅仅是一个 div，我希望只调用 get 会调用服务器操作并使其只是显示页面。有没有办法让它在整个页面上呈现返回的数据，或者这样做，我会通过尝试在执行过程中重写它来破坏 JS 函数吗？
如果你没有在头脑中修改任何东西，你应该没问题。请参阅上面的编辑。
不幸的是 - 目前 - 脚本内联在正文中。我想它可以在某处重构为文件并附加到母版页，但现在，它是正文的一部分，所以暂时行不通。（还是）感谢你的建议。目前我正在考虑重构操作以返回 JSON，然后从该 JSON 对象更新 jQuery 中的视图。
我还想到了其他事情。如果您使用绑定绑定事件，则在替换正文后，您将丢失事件绑定，除非您改为“实时”。无论如何，看起来你有一个或多或少满足你需求的解决方案。

【解决方案5】：

如果您想重新加载整个页面，那么只需在 jquery location.reload(); 中使用此代码，此代码会在您需要刷新页面时写入。

【讨论】：