Trouble sending JSON data to another action in asp.net MVC controller

Question

I have this controller action:

[HttpPost]
        public ActionResult OrderData(Order order)
        {
            var result = new { redirectToUrl = Url.Action("SeatSelection", "Orders", new { id = order.ScreeningId }), order };

            return Json(result);
        }

and I'm trying to pass the order object to another action:

public ActionResult SeatSelection(int id, Order order)
        {
            var screeningInDb = _context.Screenings.Include(s => s.Seats).Single(s => s.Id == order.ScreeningId);

            var viewModel = new SeatSelectionViewModel
            {
                Seats = screeningInDb.Seats,
                NumberOfTicketsOrdered = order.NumberOfTicketsOrdered
            };

            return View("SeatSelection", viewModel);
        }

The problem is - the only parameter I'm receiving in SeatSelection Action is the id parameter, although the order object in OrderData Action is valid. I'm pretty sure the problem is within the way I'm trying to pass the order object, maybe something with the syntax?

Here is the way I'm posting my form data to the OrderData Action:

$.ajax({
                    type: "POST",
                    url: '@Url.Action("OrderData", "Orders")',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(orderData),
                    dataType: "json",
                    success: function (res) {
                        alert("Success!");
                        window.location.href = res.redirectToUrl;
                    },
                    error: function (xhr, status, error) {
                        alert(status);
                    }
                });

Bottom line - What I'm eventually trying to do is to pass the form to a Controller Action where the data will be processed, and then pass the new data to "SeatSelection" view. I had trouble doing this as my post method sends JSON data, so if there is a better way to do what I'm trying to do, I would be happy to learn!

Answer 1

Your model doesn't match SeatSelection parameter signature.

Try:

$.ajax({
                type: "POST",
                url: '@Url.Action("OrderData", "Orders")',
                contentType: "application/json; charset=utf-8",
                data: `{"order": ${JSON.stringify(orderData)}}`,
                dataType: "json",
                success: function (res) {
                    alert("Success!");
                    window.location.href = res.redirectToUrl;
                },
                error: function (xhr, status, error) {
                    alert(status);
                }
            });

or (this one just creates a javascript object, which has the two signature properties in):

const sendObj = { id: 0, order: orderData };
$.ajax({
                type: "POST",
                url: '@Url.Action("OrderData", "Orders")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(sendObj),
                dataType: "json",
                success: function (res) {
                    alert("Success!");
                    window.location.href = res.redirectToUrl;
                },
                error: function (xhr, status, error) {
                    alert(status);
                }
            });

Answer 2

you can't use

 window.location.href = ...

because in this case browser always calls a GET method that can only keep data in a query string with primitives parameters and it doesn't convert Order to a qusery string parameters. This is why you can get only id.

in your case it would be much easier to redirect directly in the action

 public ActionResult OrderData(Order order)
{
  return RedirectToAction( ( "SeatSelection", "Orders", new { id = order.ScreeningId }), order });

}

or when it is the same controller I usually do this

public ActionResult OrderData(Order order)
{
    return SeatSelection (order.ScreeningId, order };

}

but since you are using ajax it will redirect, but will not update your view. For ajax you need a partial view that should be updated on success. So instead of ajax you can only submit form using button. In this case everything will be working ok.

Another way you can use ajax is you can try to split the order in properties and create a query string.