如何在 Angular $http.post 之后使用模型重定向到另一个 MVC 视图

Question

我正在尝试从 Angular 1.6 $http.post 重定向到另一个 MVC 视图。基本上我想去另一个视图（结帐）来显示用户从详细信息页面中选择的选项。我遇到的麻烦是，如果我直接去 Checkout，我会得到一个 NullReferenceException，所以我尝试了这个：

角度：

model.submitDetails = function () {

        // Commented out code results in NullReferenceExeption - not binding the data

        //var data = {
        //    car: model.car, colour: model.colour, features: model.features, cover: model.cover
        //}

        //window.location = 'http://localhost:50592/Cars/Checkout?vm=' + data;


        $http.post('http://localhost:50592/Cars/DetailsSubmit',
                { car: model.car, colour: model.colour, features: model.features, cover: model.cover })
            .then(function (response) {
                window.location.href = response;
            }, function (err) {
                model.error = err.data;
                console.log(err.data);
        });
    };

上述$http.post 导致404 错误。如果我不包括.then，例如注释掉，我可以在 F12 开发工具的 Network 选项卡中看到 $http.post 直接返回 html 而不是呈现 Checkout View 页面。

我的 MVC 控制器代码：

[HttpPost]
public ActionResult DetailsSubmit(CheckoutViewModel vm)
{
    TempData["car"] = vm.Car;

    vm.StartDate = DateTime.Now;
    vm.EndDate = DateTime.Now.AddDays(7);

    return RedirectToAction("Checkout", vm);
}

public ActionResult Checkout(CheckoutViewModel vm)
{
    vm.Car = (Car)TempData["car"];

    return View(vm);
}

如何从submitDetails() Angular 函数成功重定向到结帐页面？非常感谢任何帮助使这项工作正常进行。

Answer 1

您似乎正在尝试使用有效负载进行重定向。那是不可能的。重定向实际上引入了一个完全独立的请求。服务器返回一个响应，状态码为 302（通常）和一个 Location 标头，指示客户端可以在哪里找到已“移动”的文档。至此，请求-响应周期完全完成。然后，客户端通常会继续请求该新 URL，但这是 100% 在客户端上，重要的是，客户端不会通过此 GET 请求传递 URL 中不存在的任何数据。

如果您需要在请求之间保留信息，则必须将其存储在数据库中或使用Session 或TempData 之类的东西。然后，您负责在客户端发出下一个请求时“恢复”这些数据。

也就是说，如果您打算做的只是重定向，那么做 AJAX 帖子绝对是零点。 AJAX 的全部意义在于停留在页面上，而重定向会导致加载新页面。只需做一个普通的帖子，您实际上可以从该帖子操作中返回您的视图（以及发布的数据）。无需存储任何东西。但是，如果您需要进一步请求，则必须每次都继续传递相同的帖子数据（以及任何其他数据），或者再次将其保存在数据库或会话之类的地方。

Answer 2

您的 MVC 控制器看起来不正确，您可以在您的帖子 DetailsSubmit 方法中引入：return Redirect(URL);。

你的 Angular http 调用应该JSON.stringify() 你通过网络发送的数据，例如：

model.submitDetails = function () {

    var data = JSON.stringify({car: model.car, colour: model.colour, features: model.features, cover: model.cover});

    $http
        .post('/Cars/DetailsSubmit', data, {headers: {'Content-Type': 'application/json'}})
      .then(function (response) {
            // do somethings i.e. display a success message
            // then
            window.location.href = response.body.url;
            return;
        }, function (err) {
            model.error = err.data;
            return;
        });
};