如何实现history.js与ASP.NET MVC

Question

任何人都可以点我在正确的方向有超过在https://github.com/browserstate/history.js实施History.js要点与MVC项目

林刚开与MVC夹具和IM充分考虑带Ajax导航的Ajax应用程序或带有通过Ajax加载的内容的标准导航（url），不知道要走哪条路，但有帮助。

林MVC新手，所以请原谅我，如果这是一个基本的或明显的问题

Answer 1

如果你是一个新手，MVC，你还不如用一个库，帮助你做到这一点。 Backbone以非常干净的方式为您提供帮助，并通过其路由器支持历史记录。从这个链接

Answer 2

副本： Make an MVC Application into a SPA with AJAX and History.js（从Edson_Ferreira）

1 ..让我们先从布局文件。我们需要将以下引用添加到我们的布局页面（_Layout.cshtml）：

<script src="~/Scripts/jquery-2.1.0.js "></script> 
<script src="~/Scripts/jquery.history.js"></script> 
<script src="~/Scripts/jquery.showLoading.js"></script> 

2 ..创建控制器（S），并且我们将导航到相关意见： 这是怎样一个返回视图中的MVC控制器方法是这样的：

public ActionResult Rating() 
{ 
    ViewBag.IsAjaxRequest = Request.IsAjaxRequest(); 
    return View(); 
} 

原因为什么我们需要指定动态属性“ViewBag.IsAjaxRequest = Request.IsAjaxRequest（）;”是因为这些信息将用于禁用或启用与返回视图关联的布局。

'_ViewStart.cshtml'将负责管理这个。该文件应该是这样的：

@{ 
    if (ViewContext.ViewBag.IsAjaxRequest == true) 
    { 
     Layout = null; 
    } 
    else 
    { 
     Layout = "~/Views/Shared/_Layout.cshtml";  
    }  
} 

这是必需的，以使用户在地址栏上键入URL，并没有得到一个PartialView，而是与布局得到预期的全网页应用在它上面。

3 ..准备你的链接通过AJAX进行管理： 在锚元素，我们需要添加将用于以后使用jQuery的“点击”事件绑定一个类。此外，我们需要添加'data-ref'属性，以便我们可以存储与此链接关联的网址。

因为这是一个MVC应用程序，我们可以使用'@ Url.Action'助手来帮助我们创建URL;第一个参数是'View'，第二个参数是'Controller'。

这是它应该如何看：

<a href="#" class="ajaxLink" data-href="@Url.Action("Rating", "Visualisation")" data-title="Rating">Rating</a> 

4 ..准备在其上的意见将被插入的容器。 _Layout。CSHTML文件应该有下面的代码行是：

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

5 ..创建的JavaScript负责基于AJAX导航和历史状态管理：

$(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(); 
     if (State.url === '') { 
      return; 
     } 
     navigateToURL(State.url); 
    }); 

    function navigateToURL(url) {   
     $('#bodyContent').showLoading(); 
     $.ajax({ 
      type: "GET", 
      url: url, 
      dataType: "html", 
      success: function (data, status, xhr) { 
       contentShell.hideLoading(); 
       $('#bodyContent').hide(); 
       contentShell.html(data);     
       $('#bodyContent').fadeIn(1000);     
      }, 
      error: function (xhr, status, error) { 
       contentShell.hideLoading(); 
       alert("Error loading Page."); 
      } 
     }); 
    } 
} 

6 ..在_Layou中添加对此JavaScript文件的引用意见容器后t.cshtml文件：

<div id="bodyContent"> 
    @RenderBody() 
</div> 
@RenderSection("scripts", required: false) 
<script src="~/Scripts/App_Scripts/Layout.js"></script> 

这就是它！