【ASP.NET】实现ajax局部更新,改变地址栏地址,标题,history.pushSate,完美解决浏览器前进后退按钮失效问题

一般,我们现在都用ajax进行页面刷新,但是这样存在着一些问题

问题

1.ajax刷新页面后,地址栏地址没有变化

2.浏览器的前进后退按钮失效了

 

我们使用ASP.NET MVC做一个简单的例子

一个模板页和三个子页面,主页,关于和联系方式

先看看控制器原本的代码

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult About()
    {
        ViewBag.Message = "Your application description page.";

        return View();
    }

    public ActionResult Contact()
    {
        ViewBag.Message = "Your contact page.";

        return View();
    }
}

我们需要将返回的视图修改为分部视图

如果是异步请求,则返回分部视图,否则返回正常的视图

当在浏览器输入地址时,则是同步请求;而当点击链接刷新时,则是异步请求

public class HomeController : Controller
{
    public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
            return PartialView();
        return View();
    }

    public ActionResult About()
    {
        ViewBag.Message = "Your application description page.";

        if (Request.IsAjaxRequest())
            return PartialView();
        return View();
    }

    public ActionResult Contact()
    {
        ViewBag.Message = "Your contact page.";

        if (Request.IsAjaxRequest())
            return PartialView();
        return View();
    }
}

视图中_Layout.cshtml

@*<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>*@

<li><a href="javascript:void(0)" id="Index">主页</a></li>
<li><a href="javascript:void(0)" id="About">关于</a></li>
<li><a href="javascript:void(0)" id="Contact">联系方式</a></li>

其中href="javascript:void(0)"是了实现鼠标悬浮改变鼠标光标的效果

 

同时,添加一个更新目标

<div id="main">
    @RenderBody()
</div>

在原本@RenderBody()的外面添加一个div,将分部视图更新到id为main的div中

 

最后就是JS代码了,也是最重要的部分

先看看几个重要的方法

 history.pushState(data,title,url)

向浏览器插入浏览器记录

data:保存一些数据,可以保存url等

title:标题,但浏览器不支持该参数

url:浏览器显示的地址

 

 history.replaceState(data,title,url)

替换浏览器记录

data:保存一些数据,可以保存url等

title:标题,但浏览器不支持该参数

url:浏览器显示的地址

 

windows.onpopstate

在点击浏览器的前进和后退按钮时触发该事件

 

在刷新页面时使用history.pushState,而在点击浏览器前进和后退按钮时使用history.replaceState

<script>

    //局部更新,并向浏览器添加记录
    function LoadMain(url) {
        $("#main").load(url, function () {
            history.pushState({ url: url }, "", url);
        });
    }

    $("#Index").click(function () {
        LoadMain("/Home/Index");
    });

    $("#About").click(function () {
        LoadMain("/Home/About");
    });

    $("#Contact").click(function () {
        LoadMain("/Home/Contact");
    });

    //禁止后退按钮
    //$(document).ready(function () {
    //    if (window.history && window.history.pushState) {
    //        $(window).on('popstate', function () {
    //            window.history.forward(1);
    //        });
    //    }
    //});

    //解决浏览器前进后退按钮失效
    $(window).on("popstate", function () {
        var url = history.state.url;
        //this.console.log(url);
        $("#main").load(url, function () {
            history.replaceState({ url: url }, "", url);
        });
    })

</script>

在解决浏览器前进后退按钮失效的方法,实际是点击浏览器的前进和后退时重新加载页面,并且也是局部更新

 

如果想禁止浏览器的后退按钮,则用下面代码

$(document).ready(function () {
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            window.history.forward(1);
        });
    }
});

 


2020.04.05

上面还出现标题没有改变的问题

我们可以通过 document.title = title;来改变标题

我说的标题指的是浏览器窗口的标题

ajax局部更新改变标题

<script>
    //解决第一次刷新标题为空的问题,如果没有添加则在点击后退按钮会出现标题为undefined的情况
    document.title = "@ViewBag.Title";

    //局部更新,并向浏览器添加记录
    function LoadMain(url, title) {
        this.document.title = title;
        $("#main").load(url, function () {
            history.pushState({ url: url, title: title }, "aaa", url);
        });
    }

    $("#Index").click(function () {
        LoadMain("/Home/Index","Home Page");
    });

    $("#About").click(function () {
        LoadMain("/Home/About","About");
    });

    $("#Contact").click(function () {
        LoadMain("/Home/Contact","Contact");
    });

    //禁止后退按钮
    //$(document).ready(function () {
    //    if (window.history && window.history.pushState) {
    //        $(window).on('popstate', function () {
    //            window.history.forward(1);
    //        });
    //    }
    //});

    //解决浏览器前进后退按钮失效
    $(window).on("popstate", function () {
        var url = history.state.url;
        var title = history.state.title;
        
        document.title = title;

        $("#main").load(url, function () {
            history.replaceState({ url: url }, "", url);
        });

    });
</script>

 

参考

https://www.tuicool.com/articles/MvYnY3U

https://www.cnblogs.com/hutuzhu/p/4535234.html

https://blog.csdn.net/chushao7505/article/details/100771740

https://www.cnblogs.com/webzwf/p/5714385.html

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页