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控制器：我只是返回部分视图。

我的问题：

这种方法运行正常，但问题是浏览器上的Url保持不变。我需要根据内容页面修改浏览器Url，以便用户可以为页面添加书签并使用后退/前进浏览器按钮获取历史记录。浏览器Url如何修改？
我在谷歌上做了一些研究，找到了使用HTML5 pushstate技术和Ajax的jQuery插件Pjax和Pajax，但我不确定哪一个是更好的解决方案（Pjax或PAjax）？此外，展示Pjax和Pajax的例子已经过时了。是否有上述最新技术/模式？
我不想避免使用像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));
};

状态对象与将新页面推入Backstack时定义的相同。

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

Answer 2

There是一个简单的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，参数和queryString。

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

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

2 个答案: