jQuery post to controller and redirect to ASP.NET MVC view

Question

I have some checkboxes and a button (not in a form).

When the button is clicked, I have some jQuery and I am creating a post model which contains the values of the checked boxes and posting to a controller.

The controller then creates view models and I want to redirect the user to the correct view, passing the view model in to the view.

jQuery:

 $.ajax({
      url: AppSettings.baseUrl + "BOM/getMultiBOM",
      type: 'POST',
       data: JSON.stringify(data)
 });

Controller:

[HttpPost]
public ActionResult getMultiBOM(multiBOMPostModel multiBomsPostModel)
{
       BOM bom = null;

       foreach (int value in multiBomsPostModel.bomsArray)
       {
           bom = db.BOMs.Find(value);
       }

       BOMViewModel viewModel = getViewModel(bom, null);
            
       return RedirectToAction("OpenMultiBOM", new { viewModel = viewModel, bom = bom });
}

public ActionResult OpenMultiBOM(BOMViewModel viewModel, BOM bom)
{
    viewModel.projectModel = new ProjectViewModel
        {
            project = bom.Project

        };
    return View(viewModel);
}

It is probably a bit of a mess.

I think the jQuery is necessary to pass the checkbox values to the controller.

When I use RedirectToAction to the method which then returns the view, the model is not being passed through, presumably as it is sending the model as a query string.

The view model is not simple and contains lists, IEnumerables, and nested models.

Can anyone help with the most efficient way to redirect/return the view while passing the view model?

Answer: I kept the ajax to post my checkbox values to the controller

 $.ajax({
     url: AppSettings.baseUrl + "BOM/getMultiBOM",
     type: 'POST',
     data: JSON.stringify(dataArr),
 }).done(function (result) {
       location.href = "/BOM/OpenMultiBOM";
 });

In my controller, I assigned the posted values to a postModel and then stored them in TempData. The key here was to return a Json value which would then allow the redirect on the client side to take place.

 public ActionResult getMultiBOM(multiBOMPostModel multiBOMPostModel)
 {  
        TempData["BOMs"] =  multiBOMPostModel;
        return Json("success");
 }

I then had another HttpGet method which would load after the page is redirected by the Ajax result and cast the TempData to an object.

[HttpGet]
public ActionResult OpenMultiBOM(int? BomMarkupMessage = null)
{
    var bomIds = TempData["BOMs"] as multiBOMPostModel;
}

Please show both `BOM` and `BOMViewModel` class structure. Note that you cannot perform `RedirectToAction` from AJAX, use normal form submit instead. — Tetsuya Yamamoto, Jan 23 '19 at 01:53

score 1 · Accepted Answer · answered Jan 22 '19 at 19:30

1

I would persist the viewmodel server side, perhaps in a session variable, or perhaps as a TempData (TempData typically only lives until the next request), and pass a key for the session variable to the second controller in the case of session variable, or use the TempData directly in your view in the case of TempData. This would avoid passing the whole object back and forth multiple times.

answered Jan 22 '19 at 19:30

Jonathan

4,916
2
20
37

I've used TempData but I am having trouble redirecting the browser. Because the initial request is made with jquery, the result is that the view is being returned but the browser is not being redirected to the correct page. Any suggestions? – Dion Jan 23 '19 at 11:13
1

Yeah - i think you'd have to pass back a redirect url or similar parameter from your controller, catch the successful response in jQuery ajax, and redirect manually in javascript. See: https://stackoverflow.com/questions/19762629/calling-response-redirect-through-ajax – Jonathan Jan 23 '19 at 20:01

score 0 · Answer 2 · answered Jan 22 '19 at 16:35

So the way that i have done this before is to have an empty div in DOM.

<div id="partialViewContent">
<!-- Content will be loaded later. -->
</div>

If you have a default view, you'll need to set it to load from URI using the below snippet.

$("#partialViewContent").load("Controller/Action",
        function (response, status) {
            if (status !== "success") {
                console.log("An error has occured when attempting to load partial view.");
            }
        });

When you post to your controller action via JQUERY, have the action return a partial view with the model. (Assume model is relevant to each partial view).

Then when your ajax is complete, replace the content in partialViewContent with the POST response.

jQuery post to controller and redirect to ASP.NET MVC view

2 Answers2