jQuery 发布到控制器并重定向到 ASP.NET MVC 视图

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, IEnumerable s, 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;
}

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

Answer 2

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.