How to Redirect with MVC when calling $post in angular

Question

So upfront, I am new to angular so I am a little lost with how I want to accomplish a redirect after I post data back to a server:

I have the following in a update:

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

Then on the server I have this in my controller:

[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
    }

My routing isnt working and I am lost how to do this so I can navigate to the correct location.

You're using an MVC controller. You need to be using a Web API controller. — Phil Degenhardt
– Phil Degenhardt, Commented Mar 3, 2015 at 22:14
Unfortunately I cant switch from an MVC controller. Is the only way to do this then is to do a client side $location.path? — Sean P
– Sean P, Commented Mar 3, 2015 at 22:27
Well there are a number of ways of redirecting within the angular app, but a redirect so that a new MVC view is loaded would be done using window.location. However, this will cause the angular app to be unloaded and an entirely new page loaded into the browser. This doesn't make much sense to me. If you're using ASP.NET MVC, why are you using angular? — Phil Degenhardt
– Phil Degenhardt, Commented Mar 3, 2015 at 22:32
Angulars two way binding significantly helps in the reduction of javascript and jquery code for what I am implementing. — Sean P
– Sean P, Commented Mar 3, 2015 at 22:38
It also ended up that window.location seemed to give me the implementation I want. — Sean P
– Sean P, Commented Mar 3, 2015 at 22:40

Phil Degenhardt · Accepted Answer · 2015-03-03 22:41:40Z

2

Use window.location to manually redirect in the browser rather than use a server redirect.

answered Mar 3, 2015 at 22:41

Phil Degenhardt

7,2743 gold badges37 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Callum Linington · Accepted Answer · 2015-03-04 09:30:15Z

The angular way to redirect is using $location service.

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');
        });
    }
}

I put this answer here for completeness. I think also $location is more geared up for handling either hash urls or html5mode urls. If you use raw JavaScript, then you either use window.location.hash = "someUrl" or window.location.href = "someUrl". That could be a little caveat for not doing it the "angular" way.

I noticed also that you include that @Url.Action("", ""), when I did my Angular app with MVC in the index page I did this:

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

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

    return service;

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

That way I can have all my other scripts separate, and they only rely on a function name so if you change the URL you don't have to go around the app changing all the links. When you inject this into the controller you would do something like:

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');
        });
    }
}

Obviously then you can tie all that up into it's own service to reduce the injection into the controller:

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;
        });
    }
}

Wow very well explained answer. I will follow this approach on my next pass at this.
@SeanP no worries dude, I just thought - I had these issues so I would share how I got around them.

Collectives™ on Stack Overflow

How to Redirect with MVC when calling $post in angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related