Enable/Disable Go Back button to view previous Partial View in MVC

Question

I have Single Page Application developed using MVC 4 & EF. I load different partial views upon clicking various menus (available in header).

For now, I disabled browser go back button.

Here is the scenario.. User clicks on Menu1 & sees PartialView1 , then clicks on Menu2 and views PartialView2.

Now , I would like to go back to previous View (i.e : PartialView1). Browser's Go back will not work.

I tried with history.js file and tried. It doesn't work because it is obsolete now. How can I achieve this?

Here is my Ajax Posting Code ... navigateElement: function (actionUrl, containerElem) {

    //load view without postback
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: {},
        cache: false,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Denied") {
                Error.accessDenied(data.message);
            } else {
                containerElem.html('');
                containerElem.html(data.viewMarkup);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console(thrownError);
            _showErrorMessage();
        }
    });
},

The above will method will retrieve the Partial View and replace in PageContainer (The viewport where I generate different partial views based on user actions).

Now, How do I navigate FORWARD/BACKWARD between partial views that are viewed by user.

Obviously storing the visited partial views in DB will end up in Performance degrade over the period, because the targeted number of audience for this App is large in number.

Answer 1

In terms of using SPA with AJAX, this is a fairly common scenario I believe. If you can guarantee compatibility with HTML5 then I would say History API would be the way to go; a quick google search should set you up with good example code.

Basically the History API spec of HTML5 defines methods to programatically push a page state into the browser's history stack. In this way, each time you use AJAX to update the view you would push that state into the brower history. Then you can re-enable the browser's back functionality and it should work how users intend.

In these scenarios I tend to think that the "browser back" functionality is a well-understand and expected paradigm, so disabling might just be confusing for your users. Just my thoughts though.