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

Posted 2023-05-09

【中文标题】MVC 5：通过 Ajax 加载内容区域并修改浏览器 url

【英文标题】：MVC 5: Loading content area via Ajax and modify browser url

【发布时间】：2014-11-18 20:13:06

【问题描述】：

在我的 _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 将如何修改？

我在 google 上做了一些研究，发现使用 HTML5 pushstate 技术和 Ajax 的 jQuery 插件 Pjax 和 Pajax，但我不确定哪个是更好的解决方案（Pjax 或 PAjax）？演示 Pjax 和 Pajax 的示例也已经过时了。有什么最新的技术/模式可以实现上述目标？

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

非常感谢您对此提供任何帮助或建议。

谢谢，

【参考方案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 替换它。

【讨论】：

您的解决方案非常适合我。这正是我所寻找的。感谢您的帮助:)

【参考方案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")");
    

该函数接收一个事件对象参数，该参数包含 以下属性：值、路径、路径名、参数名、 参数和查询字符串。

还有更多的解决方案，如 Angular、Backbone 等，但你写的时候遇到了问题，所以它只是 jQuery。