jquery - MVC 5 : Loading content area via Ajax and modify browser url

Question

在我的 _Layout.cshtml 页面中，页面左侧有几个链接，页面右侧有一个主要内容区域，当单击链接时，仅内容区域应该更新。我不想重新加载整个页面。

我尝试使用 Ajax 加载部分 View

所以在我的 _Layout.cshtml 页面中

这是链接:

<a href="#" onclick="return link_click()">Click here</a>

内容区域div

<div class="page-content">
            @RenderBody()
            @RenderSection("Scripts", false)
</div>

然后通过Ajax调用加载内容区域

function link_click() {

         $('.page-content').load('/Home/Register);
         return false;
     }

从 MVC Controller :我只是返回部分 View 。

我的问题:

1. 这种方法工作正常，但问题是浏览器上的 Url 保持不变。我需要根据内容页面修改浏览器 URL，以便用户可以为页面添加书签并使用后退/前进浏览器按钮查看历史记录。浏览器Url如何修改？

2. 我在 google 上做了一些研究，找到了 jQuery 插件 Pjax 和 Pajax，它们使用 HTML5 Pushstate 技术和 Ajax，但我不确定哪一个是更好的解决方案(Pjax 或 PAjax)？演示 Pjax 和 Pajax 的示例也相当过时。有什么最新技术/模式可以实现上述功能吗？

3. 我不想避免使用 AngularJS、Knockout 等 SPA 框架，因为使用这些框架需要我公司的多次批准，我想避免这种情况。

对此的任何帮助或建议都非常感谢。

谢谢

Answer 1

如果您想随 View 一起更改 url，您可以使用 window.history.pushState() 函数。

该函数的使用如下:

window.history.pushState(
    { state: 'someState' }, // any object, that can be retrieved
    'Page title', // new page title
    '/Home/Register' // new url
);

您可以这样使用它:

function link_click() {

         $('.page-content').load('/Home/Register', function() {
            window.history.pushState(
                null,
                'Page title', // new page title
                '/Home/Register' // new url
            )
         });

         return false;
     }

这将导致新的状态被插入后台堆栈。它允许用户只需单击后退按钮即可返回上一页。但这是您需要自己处理的，即加载上一个 View 。 为此，您需要设置一个处理程序，当用户返回时将调用该处理程序:

window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

状态对象与您在将新页面插入后台堆栈时定义的相同。

如果您不想将新页面插入后台堆栈，可以使用window.history.replaceState替换它。