IE doesn't call server side action when you press back

StackOverflow https://stackoverflow.com/questions/19160234

Domanda

So I have a issue with I have two steps: Step 1 and Step 2. I am able to go to Step 2 but when I press back Step 1 does get loaded but doesn't make a call to the server. This issue is only present in IE. Currently I am using IE10, but in compatibility mode the same issue is duplicated.

I have attached a example project. If you place a breakpoint in the "GetStep1" action in HomeController. You will see that the breakpoint doesn't get caught when press back in IE10. Please let me know what I am doing wrong.

Download example here: http://sdrv.ms/19mrZL7

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout-2.3.0.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/sammy-0.7.4.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
</head>

<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
    @RenderSection("scripts", false)
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<ul>
    <li id="Step-1">
        <a href="#Step1">Step1</a>
    </li>

    <li id="Step-2">
        <a href="#Step2">Step2</a>
    </li>
</ul>

<div id="dynamicData">
</div>
@section scripts{


    <script type="text/javascript">
        var IndexViewModel = function () {
            var self = this;

            self.selectedStep = ko.observable();

            Sammy(function () {
                this.get('#Step1', function () {
                    console.log('here');
                    $.ajax({
                        url: '/Home/GetStep1',
                        type: "GET",
                        success: function (result) {
                            $('#dynamicData').html(result);
                            self.selectedStep(1);
                        }
                    });
                });

                this.get('#Step2', function () {
                    $.ajax({
                        url: '/Home/GetStep2',
                        type: "GET",
                        success: function (result) {
                            $('#dynamicData').html(result);
                            self.selectedStep(2);
                        }
                    });
                });

                this.notFound = function () {
                    //console.log(location.hash);
                };

            }).run('#Step1');
        };


        ko.applyBindings(new IndexViewModel());
    </script>
}

_Step1.cshtml

<h1>Step 1</h1>
<div id="step1-view">
    <h1 data-bind="text: SelectedValue"></h1>
    <ul data-bind="foreach: Collection">
        <li data-bind="css: {'selected' : $data === $root.SelectedValue()}, click: $root.setValue"><span data-bind="text: $data"></span></li>
    </ul>
    @*<span data-bind="text: ko.toJSON($data)"></span>*@
</div>



<script type="text/javascript">
    var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
    viewModel.setValue = function (item) {
        viewModel.SelectedValue(item);
    }
    ko.applyBindings(viewModel, document.getElementById("step1-view"));
</script>

HomeController.cs

[HttpGet]
        public ActionResult GetStep1()
        {
            return PartialView("_Step1", new Step1ViewModel());
        }

        [HttpGet]
        public ActionResult GetStep2()
        {
            return PartialView("_Step2", new Step2ViewModel());
        }
È stato utile?

Soluzione

Adding this to all of the Actions fixes the issue:

[OutputCache(Location = OutputCacheLocation.ServerAndClient, NoStore = true, Duration = 0, VaryByParam = "None")]
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top