Use Back button with AJAX form?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-05 17:24 出处：网络

Hi, I have a ASP.NET MVC page that contains 5 cascading dropdowns(hidden until loaded). When the first is set AJAX will fetch data for the second dropdown (dynamic html).

Hi,

I have a ASP.NET MVC page that contains 5 cascading dropdowns(hidden until loaded). When the first is set AJAX will fetch data for the second dropdown (dynamic html).

If we navigates to the next page and then hit the "back" button in the browser only the first cascading dropdown will be shown and set even when we did set all 5?

Note : By setting a correct querystring the service i开发者_运维问答s able to set the form just as if the Ajax have been used, but the service is never consulted with the back button.

Pleas Advice

What you need is HTML 5 history API. You can read about this in many places, for example here.

Here's a simple example, HTML only (your whole problem is not ASP.NET MVC related but HTML related, this can happen on any platform):

Let's say you have page 1 (index.html) :

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8" />
</head>
<body>
    <input type="text" id="txt1" />
    <br />
    <input type="text" id="txt2" />
    <br />
    <br />
    <button onclick="doStuff();">do stuff</button>
    <button onclick="goFurther();">go further</button>

    <script type="text/javascript">

        var qs = (function (a) {
            if (a == "") return {};
            var b = {};
            for (var i = 0; i < a.length; ++i) {
                var p = a[i].split('=', 2);
                if (p.length == 1)
                    b[p[0]] = "";
                else
                    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
            }
            return b;
        })(window.location.search.substr(1).split('&'));

        window.onload = function () {
            var data1 = qs["txt1"];
            var data2 = qs["txt2"];
            if (data1 == undefined)
                data1 = "";
            if (data2 == undefined)
                data2 = "";
            var textbox1 = document.getElementById("txt1");
            var textbox2 = document.getElementById("txt2");
            textbox1.value = data1;
            textbox2.value = data2;
        }

        function doStuff() {
            var textbox1 = document.getElementById("txt1");
            var textbox2 = document.getElementById("txt2");
            history.pushState('abc', 'title', 'index.html?txt1=' + textbox1.value + "&txt2=" + textbox2.value);
        }

        function goFurther() {
            window.location = "/next.html";
        }
    </script>
</body>
</html>

As you can see (and try in a project) the first button takes the data in two fields (the textboxes in my overly simplistic example) and sets the current URL to one with a querystring containing this data (again, being an overly simplified example it does not do validation, escaping, encoding etc.).

The second button takes you to another page:

<!DOCTYPE html>
<html>
<head>
    <title>Next crp</title>
    <meta charset="utf-8" />
</head>
<body>
    asdf
</body>
</html>

Which is put here only to be able to navigate to it. Navigating back to the first page (by pressing the back button in the browser) will lead you to the URL that was set via javascript with the querystring.

The onload handler will repopulate elements with the data in the querystring.

Don't forget to search online resources about 'HTML5 History API'.

I hope this example will help.