Question

如何通过AJAX加载MVC 4应用程序的第一页？

我已经有了结构设置来加载所有后续页面，但我刚刚碰到了一堵砖墙。

通过history.js添加历史记录管理后，我已将部分视图更改为具有后退按钮 - 按预期工作。

我的问题是，在导航到几页然后按“返回”按钮后，当我到达Windows历史记录中的第一项时 - 即：index.chtml页面 - 此页面加载导航栏出现两次。按F5后，页面正确加载。

我做错了什么，解决这个问题的最佳方法是什么？

提前感谢您的帮助

顺便说一下，这是我在布局视图中加载的JavaScript：

$(function () {

var contentShell = $('#bodyContent');

var History = window.History, State = History.getState();

$(".ajaxLink").on('click', function (e) {        
    e.preventDefault();
    var url = $(this).data('href');
    var title = $(this).data('title');
    History.pushState(null, title, url);
});

History.Adapter.bind(window, 'statechange', function () {
    State = History.getState();       
    navigateToURL(State.url);
});

function navigateToURL(url) {        
    $.ajax({
        type: "GET",
        url: url,
        dataType: "html",
        success: function (data, status, xhr) {
            contentShell.html(data);
        },
        error: function (xhr, status, error) {
            alert("Error loading Page.");
        }
    });
}   

$('.history-back').on('click', function (e) {        
       e.preventDefault();
       History.back();
       return false;
})   
});

Answer 1

这对我来说就像一个已知问题，与在某些浏览器中触发两次的点击事件相关的错误。此行为导致代码中的History.pushState(...)执行两次。

您可以尝试添加某事。比如e.stopPropagation()之后的代码。有关该问题的更多信息，请访问：https://stackoverflow.com/a/21511818/2270888

Answer 2

在“第一项”控制器操作中尝试类似的操作：

public ActionResult Index()
{
   if (Request.IsAjaxRequest())
   {
       return PartialView();
   }

   return View();
}

如何通过AJAX加载MVC 4应用程序的第一页？

2 个答案: