2

我正在使用 AJAX 调用来请求部分视图并将其 html 加载到我的主索引视图的内容区域中。我正在利用 url 中的哈希来启用浏览器历史记录支持（与 GMail url 浏览器历史记录的工作方式相同）。

一切正常，除了返回并加载我的部分视图后，MVC 似乎正在清除我的 url 哈希符号之后的所有内容，这会影响 javascript 浏览器历史堆栈。

我的主视图上有一个链接，它启动了请求：

<div class="linkButton" data-bind="click:function(){Nav.makeRequest('#/MyController/Profile/2')}">Profile</div>

这是我用来请求和加载部分视图的 javascript：

var Nav:function(){
    var self = this;
    $(window).bind("hashchange", self.onHashChange);

    makeRequest: function(hash){
        window.location.hash = hash;
    };

    onHashChange: function (e) {
        var hash = window.location.hash.substring(1); 
        var url = 'http://localhost:3333/' + hash.substring(1);
        $.get(url, function (data) {
            $('#content').html(data);
        });
    }
}

因此，我的示例请求之一是：http://localhost:3333/#/MyController/Profile/2

请求成功完成，我的 Profile 视图加载了正确的模型，用于在路由中传递给它的 id ( 2 )，浏览器导航中的 url 如上所示。

然而，在视图完成加载后，浏览器的 url 会自动更改为：http://localhost:3333/#

这不会影响页面上当前加载的内容，但它会将这个新 url 添加到浏览器的历史记录中，因此当我点击“返回”按钮时，它会再次发送部分配置文件视图的请求。

我在 Global.axax 中的唯一路线如下：

routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", 
    new { controller = "MyController", action = "Index", id = UrlParameter.Optional } 
);

我怀疑 MVC 路由引擎看到我对部分视图的请求进入 ( http://localhost:3333/MyController/Profile/2)，然后将其与返回我的索引视图的 url 的默认路由匹配，这当然是：http://localhost:3333/

我已经在客户端上进行了广泛的调试，并且 onHashChange 事件确实两次触发，一次是针对部分视图请求，然后是当 url 更改回 localhost:3333/# 调用堆栈没有显示任何客户端调用导致 url 变回。

有没有一种方法可以让我使用 AJAX 请求和加载我的部分视图，并使用哈希来支持历史记录，并且让浏览器的 url 不会自动路由回默认路由路径？

4

1 回答 1

1

这必须是您搜索的内容：

要处理浏览器历史记录，您需要使用支持 Html5 的新方法

//use it in ur ajax function to save history 
 history.pushState({page: 1}, "title 1", "?page=1");

//and to get ur history
     window.onpopstate = function(event) {
    something like 

$.post('url',{page:event}function(event) {
    do something
})

}

于 2013-07-21T23:31:37.233 回答