0

I am using .NET MVC and AngularJS. After making a post request to place an order, I need to return the order that was created to a different view.

I have two views. Purchase Success and Purchase Fail. Here is the post request in Angular:

$http.post('/Home/PlaceOrder/', placeOrderViewModel)
                .then(function (response) {
                    if (response != null) {
                        window.location = '/Home/PurchaseSuccess';
                    } else {
                        window.location = '/Home/PurchaseFail';
                    }
                }, function () {
                    alert('error');
                });

Here is the method on my MVC controller.

public ActionResult PlaceOrder(PlaceOrderViewModel viewModel)
{

}

It accepts a view model from the Angular post request, and does some work. Then I have it returning either the purchase success or purchase fail view with the order model attached to a successful order.

return View("~/Views/Home/PurchaseSuccess.cshtml", order);

return View("~/Views/Home/PurchaseFail.cshtml");

Returning the view does not work. MVC does not seem to be able to handle the change in views since the request was made from Angular? The redirect in the Angular success handler is already working, and works great when you do not have a model being returned.

I basically just need to be able to redirect to the purchase success view with the model.

Thank you for your time!

EDIT: Here is the purchase success and purchase fail controller methods:

public ActionResult PurchaseSuccess()
        {
            return View();
        }

        public ActionResult PurchaseFail()
        {
            return View();
        }
Andrew Meservy
  • 103
  • 2
  • 9
  • 1
    Does not make sense to return a view if you are going to redirect. What is happening with `window.location.href = '/Home/PurchaseSuccess';` approach ? It should make the browser to navigate to that url. Check your page has any script errors. – Shyju Aug 08 '18 at 17:34
  • 1
    IMHO, why not return a result/JSON data that Angular can handle the UI/routing for? In other words let Angular do the UI (what display and associated data parsed from your server response). – EdSF Aug 08 '18 at 17:41
  • @Shyju It does redirect to the url, but it does not bring the model with it. – Andrew Meservy Aug 08 '18 at 17:59
  • That has nothing to do with the code you shared in the question. You need to see why `PurchaseSuccess` action method is not returning what it should be. Debug that method – Shyju Aug 08 '18 at 18:00
  • @EdSF That sounds great, but how do I do that with AngularJS? I have not been able to find any resources on how to redirect with a model in AngularJS. Could you elaborate a little bit more? Thanks! – Andrew Meservy Aug 08 '18 at 18:02
  • @Shyju I think we have a misunderstanding. The PurchaseSuccess action method just returns the view as of this moment, but I need it to return the view with the model that is returned as a response from the initial post request. Everything is working as expected, but I am looking for an approach to redirect after the post request with the model. The redirect works without the model, but I need the model to display important information about the order on the purchaseSuccess page. Hope that clarifies the question a little? – Andrew Meservy Aug 08 '18 at 18:06
  • @Shyju I have updated the question with those controller methods. – Andrew Meservy Aug 08 '18 at 18:09
  • 2
    You need to query your data and build the (view) model in the `PurchaseSuccess` action method and pass that to the view to render the desired HTML. You probably need to return a unique Id from your `PlaceOrder` method and pass that to your `PurchaseSuccess` method so that it can get the data. – Shyju Aug 08 '18 at 18:10
  • 1
    Instead of redirecting with model, you should redirect with orderid and in controller action you should get the details of order from database and display in the view. – Chetan Aug 08 '18 at 18:11
  • 1
    When using libraries like angular/react and doing an ajax post, don't you want to stay on the same page (so user does not get the feeling of navigating to a different page) ? – Shyju Aug 08 '18 at 18:11
  • 1
    Look into [Angular routing](https://docs.angularjs.org/api/ngRoute/service/$route) and/or newer implementations (depending on what Angular version you're using). Hth – EdSF Aug 08 '18 at 18:12
  • @Shyju That is actually not a bad idea. I mean, it seems like a waste to make another call to the database when I already have access to the full object in my other method, but that would definitely work. Thanks for the solution!! I will do this if there is not a more efficient solution (which it seems like there may not be haha) – Andrew Meservy Aug 08 '18 at 18:13
  • @Shyju Most of the time yes, but in this case it is necessary to redirect away to a separate page. – Andrew Meservy Aug 08 '18 at 18:15
  • 1
    Not an answer to your question. But this post helps you understand options to transfer data (with normal form submit scenarios) https://stackoverflow.com/questions/11209191/how-do-i-include-a-model-with-a-redirecttoaction/11209320#11209320 – Shyju Aug 08 '18 at 18:34

1 Answers1

1

When you use Angular to make a request, you are making an Ajax request where the intention is to get some data from server side without leaving the current page.

If you do want to go to another page, it's probably better just use a normal form with a submit button and an action attribute pointing to the page you want to redirect to. Like:

<form action="newPageUrl" method="post"> 
    ... // more inputs that carry the data you want to send to server side
    <input type="submit">
</form>

However, when people use Angular, it is more often that they just let Angular do the routing/rendering. That means you put your PurchaseSuccess.cshtml and PurchaseFail.cshtml on the client side as view templates and let client side render it: You make a post request to submit the order, server receives the order and returns a new data model, client side gets the data model and reders it into the view that it already holds in memory (or request the template file on the fly if you choose to configure it that way).

jian
  • 1,236
  • 11
  • 11