MVC 5:通过Ajax加载内容区域并修改浏览器URL

Question

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

我尝试使用Ajax加载部分视图

所以在我的_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控制器:我只是返回局部视图.

我的问题:

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

2. 我在google上做了一些研究,找到了使用HTML5 pushstate技术和Ajax的jQuery插件Pjax和Pajax,但我不确定哪个是更好的解决方案(Pjax或PAjax)？此外,展示Pjax和Pajax的例子已经过时了.是否有上述最新技术/模式？

3. 我不想避免使用像AngularJS,Knockout等SPA框架,因为使用这些框架需要我公司的几个批准,我想避免这种情况.

任何有关此的帮助或建议都非常感谢.

谢谢,

Answer 1

如果您想要在视图中更改网址,可以使用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;
     }

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

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

State对象是相同的,您在将新页面推入Backstack时定义的.

如果您不想将新页面推入Backstack,可以使用替换它window.history.replaceState.