How to redirect with a model after making a post request in Angular/.NET MVC?

Question

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

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
– Shyju, Commented Aug 8, 2018 at 17:34
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
– EdSF, Commented Aug 8, 2018 at 17:41
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
– Shyju, Commented Aug 8, 2018 at 18:10
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
– Chetan, Commented Aug 8, 2018 at 18:11
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
– Shyju, Commented Aug 8, 2018 at 18:11

jian · Accepted Answer · 2018-08-08 18:33:26Z

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).

Collectives™ on Stack Overflow

How to redirect with a model after making a post request in Angular/.NET MVC?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related