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

GreAmbWang 2020-04-04 00:51:25

202

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/weixin_38211198/article/details/105304208

版权

一般，我们现在都用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>