Javascript 使用ajax防止导航页面刷新

我在一个MVC5项目中工作，我想使用ajax更改我的内容

<script>


    $(document).ready(function () {

        window.onpopstate = function (e) {
            if (e.state) {
                $('.body-content').html(e.state.html);
                document.title = e.state.pageTitle;
            }
        };


        $("a").click(function (e) {
            e.preventDefault(); \\ currently placed here, but 
            var me = $(this);
            $('.body-content').fadeOut(300, function () {

                var url = "" + me.attr("href");

                if (!url || url.match("^http")) {
                    debugger;
                    return true;
                }
                if (!url || url === "/") {
                    url = "Home/Index";
                }
                $('.body-content').load(url, function () {

                    $('.body-content').fadeIn(300);
                    //window.history.pushState(
                    //    null,
                    //    'Terram Novum', // new page title
                    //    url// new url
                    //);
                });
                return false;
            });




        });

    });
</script>

$（文档）.ready（函数（）{
window.onpopstate=函数（e）{
如果（如州）{
$（'.body content'）.html（e.state.html）；
document.title=e.state.pageTitle；
}
};
$（“a”）。单击（功能（e）{
e、 preventDefault（）；\ \当前放置在此处，但
var me=$（此）；
$（'.body content'）.fadeOut（300，函数（）{
var url=”“+me.attr（“href”）；
如果（！url | | url.match（“^http”））{
调试器；
返回true；
}
如果（！url | | url==“/”）{
url=“主页/索引”；
}
$（'.body content'）.load（url，函数（）{
$（'.body content'）.fadeIn（300）；
//window.history.pushState(
//空，
//“Terram Novum”，//新页面标题
//url//新url
//);
});
返回false；
});
});
});

这是我到目前为止编写的代码，但有时它仍然会刷新，有时我无法找出模式或原因

代码放在_layout.cshtml页面中，我对模板没有太大的更改。有人能帮我解决这个问题，或者想出更好的方法吗

---

哦，如果你能帮我弄清楚我什么时候从一个区域转到另一个区域，那就有额外的好处了。

这段代码只适用于你的第一个页面加载，因为它放在$（document）.ready（）中，但随后，一旦你离开了第一个页面并在另一个带有链接的页面中，你就必须再次将事件侦听器附加到你的所有标记上，因为一开始它们不在那里。

是的，但一旦我把菜单放进去。所以这些应该注册。但在几次页面切换之后，它仍然会刷新。