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

如果要将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;
     }

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

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

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

如果您不想将新页面推送到Backstack，可以使用window.history.replaceState替换它。

Answer 2

有一个简单的jQuery插件。

只需将其包含在您的页面上即可

修改您的链接：

<a href="#link">Click here</a>

并在脚本块中开始侦听地址更改：

$.address.change(function (event) {
    //it works perfect for url with complex hash like this: http://....#?departmentid=10&employeeid=15
    if(location.hash == '#link')
    {
         $('.page-content').load("@Url.Action("Register","Home")");
    }
}

该函数接收单个事件对象参数，该参数包含以下属性：value，path，pathNames，parameterNames，parameters和queryString。

有更多的解决方案，如角度，主干等，但你写道你有问题，所以它只是jQuery。