is there any way to show the previous page with exact data in the back button click from another page in MVC

I have a Home page which contains couple of dropdown controls, one Grid, couple of text boxes etc.. Using the dropdown change event the gird will reload with new data based on the dropdown selection.

Example : If a dropdown contains values All,Limited,Exceptional. For each item in the dropdown the gird values will be different and for the initial load I am taking the All data.

The situation is like below

Step 1: User comes in to the home page ( Now he is seeing the All data )

Step 2: He filtered the data using dropdown with value Limited (Now he is seeing only the limited data in the grid)

Step 3: Then he select one item from the grid and this will take the user to the details page of that item.

Step 4: User click on the back button in the details page, this will do a history back functionality and will take the user to the home page , since the controller method is hitting again the page reloads and fill up with All data. Instead of this behavior I want to show the user the Limited data(The data the user filtered before he comes to Details page).

Is there any mechanism to cache the data like this in MVC ?

The method what I am planning to go with 1: Currently I am planning to send the drop down selection data to the next page request and when ever user click on the back button I will send it back to controller of home page and based on that value I can get the filtered information which I want.

The method what I am planning to go with 2: Save the filter data into browser storage and when the user come back to that page check for the existence of this data and based on this reload the grid.

The above method will be difficult if I have many filter conditions like different drop downs, different text boxes etc .So is there any other way can we do the same ? Like caching the previous page with control state ?

This is what I am doing in backbutton click from the details page

 $("#btnBack").click(function () {
        window.history.back();
    });

Edit: I am usig Kendo grid to populate the data and yes it is a kendo default ajax call is using to get the data.

  @(Html.Kendo().Grid<ModelName>()
        .Name("SomeGrid")
        .Columns(columns =>
                {

                    columns.Bound(p => p.NAME).Title("Name").Width("26%")
                      .ClientTemplate("<a href=\"" + @Url.Content("~/ControllerName/ActionName/Details/#=DOCKEY#") + "\">#=PTR_NAME#</a>");
                    columns.Bound(p => p.UPN).Title("UPN").Width("10%");

                })
        .Sortable()
        .Scrollable(scrollable => scrollable.Virtual(true).Height(400))
        .DataSource(dataSource => dataSource
                .Ajax()
                .Sort(p => p.Add(m => m.LNAME))
                    .PageSize(10000)
                                       .Read(read => read.Action("Action", "ControllerName"))
                )
        .Filterable()
        .ColumnMenu()
        .Events(events => events.DataBound("onDataBound"))
        .Pageable(p => p.Refresh(true).PreviousNext(false).Numeric(false))
        )

Can someone help me to solve this issue ?

Solution

Finally used the session state of browser to store the data.

Step 1: Before a page change happen save the current state of the page in a json object and save it in the session storage

$(window).bind('beforeunload', function() {
    //Get the current state of the page and store it in the browser session as json string
});

Note : Storing current state means, saving the value of the inputs, dropdown selections , grid filter etc

Step 2: And next time if user comes to this page check whether the session is empty or not.

Step 3: If session is not empty then read the data and fill the session data in the view to retain the state

Step 4: Clear the session