将复杂对象从视图发送到 MVC 操作作为无 ajax 调用

Question

I'm working on an ASP.NET MVC web application. There is a view with a bunch of search filters and there is also a grid in the middle of the page that represents the result of the search.

End-user set value for the search filter and when search button clicked an ajax call returns the values that will rebind the gird. every row in the grid represents ' ItemId ' and ' version ' which could be selected by the checkbox.

At the end when the user clicks on " Detail report " we need to redirect the user to another page(view).

I need to pass the selected search filters and the grid selected rows values as an array like this (ItemIds[] and Versions[]) to the " Detail " action.

So, to make the question clear. I need to pass the below values to the action :

1. search filters
2. ItemId array
3. Version array

Unfortunately, I can not pass the parameters to the action. I got null

I can not call the action as ajax call When i use

View ( Index.cshtml )

 function prepareSelectedInfos() {
            var formValues = $('#form').serializeFormToObject();
            var gridValues = GetGridSelectedValues();
            var dto = {
                FormFilters: formValues,
                ItemIds : gridValues.ItemIds,
                Versions : gridValues.Versions
            } 
            return dto;
        }


  $('#lnkDetailReport').click(function () {
            var gridValues = GetGridSelectedValues();

            var url = '/Report/Controller/Detail/';
            var dto = prepareSelectedInfos();
            window.open(url + dto, '_blank');
        });

Controller

  public ActionResult Detail(ModelVersionStatisticalDetailDto data)
        {

            //create a ViewModel according to the incoming data
            var viewModel = ;
            return View(viewModel);
        }

Model

  public class ModelVersionStatisticalDetailDto
    {
        public ModelVersionStatisticalReportDto FormFilters { get; set; }
        public int [] ItemIds { get; set; }
        public string[] Versions { get; set; }
    }

I need to have the view prepared values in the Detail action

Answer 1

To the best of my recollection, it is not possible to perform a redirect after having post a complex object in ajax call (with the same posted parameters). In order to perform your desired operation, you can choose a solution from below.

1. Use query strings in your Detail action and perform a simple post action instead of ajax call
2. Try to replace the response of Detail action with Partial View
3. If you are seeking a client side solution, you can assist from localStorage object (a tricky solution). You can store the required data in a localStorage object and pass the key to the controller. In the target page, use the key in order to fetch the data stored in storage. Do not forget to clear it after the process. https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/