在角度调用 $post 时如何使用 MVC 重定向

Question

因此，我是 Angular 的新手，所以在将数据发布回服务器后，我对如何完成重定向有点迷茫：

我有以下更新：

     $http.post("@Url.Action("SaveBranding", "AirlineConfig")", brandModel.model);

然后在服务器上，我的控制器中有这个：

[HttpPost]
    public ActionResult SaveBranding(BrandingViewModel viewModel)
    {
        if (IsModelStateValid())
        {
            var airline = GetAirlineFromAirlinePlatformId(viewModel.AirlinePlatformId);

            switch (viewModel.PostAction)
            {
                case "Save":
                    BrandingViewModel.SaveEntity(viewModel, _db);
                    var airlineBranding = BrandingViewModel.FromEntity(_db.AirlinePlatforms.Single(x => x.AirlinePlatformId == viewModel.AirlinePlatformId).BrandingViews, viewModel.AirlinePlatformId);

                    return View("Branding", airlineBranding);
                case "Save & Close":
                    BrandingViewModel.SaveEntity(viewModel, _db);                     

                    return RedirectToAction("Edit", "AirlineConfig", new { id = airline.AirlineId });
                case "Cancel":
                    return RedirectToAction("Edit", "AirlineConfig", new { id = airline.AirlineId });
                default:
                    return HttpNotFound();
            }
        }
        return View("Branding"); //Replace this later
    }

我的路由不起作用，我不知道如何执行此操作，因此我可以导航到正确的位置。

Answer 1

重定向的角度方式是使用$location服务。

angular.module('someModule', [])
    .controller('SomeController', ['$scope', '$http', '$location', someController])

function someController($http, $location) {
    $scope.brandModel = {};

    $scope.submit = function () {
        $http.post("@Url.Action("SaveBranding", "AirlineConfig")", brandModel.model).then(function (data) {
            $location.path('/url/to/path');
        });
    }
}

为了完整起见，我把这个答案放在这里。我认为$location 也更适合处理哈希 url 或 html5mode url。如果您使用原始 JavaScript，那么您可以使用 window.location.hash = "someUrl" 或 window.location.href = "someUrl"。对于不以“有角度”的方式进行操作，这可能是一个小警告。

我还注意到您包含 @Url.Action("", "")，当我在索引页面中使用 MVC 制作 Angular 应用程序时，我这样做了：

angular.module('someModule', [])
    .factory('urlService', urlService)

function urlService() {
    var service = {
        getSaveBrandingUrl: getSaveBrandingUrl
    };

    return service;

    function getSaveBrandingUrl() {
        return '@Url.Action("", "")';
    }
}

这样我可以将所有其他脚本分开，它们只依赖于函数名称，因此如果您更改 URL，则不必绕过应用程序更改所有链接。当您将其注入控制器时，您会执行以下操作：

angular.module('someModule', [])
    .controller('SomeController', ['$scope', '$http', '$location', 'urlService', someController])

function someController($scope, $http, $location, urlService) {
    $scope.brandModel = {};

    $scope.submit = function () {
        $http.post(urlService.getSaveBrandingUrl(), brandModel.model).then(function (data) {
            $location.path('/url/to/path');
        });
    }
}

显然，您可以将所有这些绑定到它自己的服务中，以减少对控制器的注入：

angular.module('someModule', [])
    .factory('someControllerService', ['$http', 'urlService', someControllerService]) 
    .controller('SomeController', ['$scope', '$location', 'someControllerService', someController])

function someController($scope, $location, someControllerService) {
    $scope.brandModel = {};

    $scope.submit = function () {
        someControllerService.saveBranding($scope.brandModel.model).then(function (data) {
            $location.path('some/url');
        });
    }
}

function someControllerService($http, urlService) {
    var service = {
        saveBranding: saveBranding
    };

    return service;

    function saveBranding(branding) {
        return $http.post(urlService.getSaveBrandingUrl(), brandModel.model).then(function (data) {
            return data.data;
        });
    }
}

Answer 2

使用 window.location 在浏览器中手动重定向，而不是使用服务器重定向。