ASP.NET MVCでhistory.jsを実装する方法

Question

誰もがhttps://github.com/browserstate/history.jsでMVCプロジェクトとHistory.jsの要旨を超える実装に正しい方向に私を指す

イムフルな考慮MVCとグリップとイムになってAjaxを使用したAjaxアプリケーションまたはAjaxを介してロードされたコンテンツを含む標準のnav（URL）。これは基本的なまたは明白な疑問

Answer 1

ある場合

イムMVCの初心者は、あなたがMVCの初心者であれば、あなたにも、あなたがそれを行う支援するライブラリを使用する場合がありますご容赦ください。 Backboneこれは非常にクリーンな方法であなたのためのものであり、ルータ経由で履歴もサポートしています。このリンクから

Answer 2

コピー： はMake an MVC Application into a SPA with AJAX and History.js

1 ..（Edson_Ferreiraから）のレイアウトファイルを見てみましょう。私たちは、レイアウトページ（_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）、我々はに移動しようとしている、関連するビューを作成します。

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

理由： これは、ビューを返しMVCコントローラのメソッドは次のようになります方法ですなぜ私たちは動的プロパティ "ViewBag.IsAjaxRequest = Request.IsAjaxRequest（）;"を指定する必要がありますか？なぜなら、この情報はビューが返された状態で関連するレイアウトを無効にしたり有効にしたりするためです。

「_ViewStart.cshtml」がこれを管理します。これは、アドレスバーにURLを入力することを可能とPartialViewを得ないが、その代わりに、レイアウトと予想全ページを取得するために必要とされる

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

：ファイルは次のようになります。それの上に適用されます。

3 ..は、あなたのリンクがAJAX経由で管理できるように準備します。アンカー要素上に を、我々はjQueryのを使用して「クリック」イベントをバインドするために、後で使用されるクラスを追加する必要があります。また、このリンクに関連付けられたURLを保存できるように、 'data-ref'属性を追加する必要があります。

これはMVCアプリケーションであるため、URLの作成を支援するために '@ Url.Action'ヘルパーを使用できます。第1パラメータは「View」であり、第2パラメータは「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 .. AJAXベースのナビゲーションと歴史の状態管理を担当する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(); 
     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 ..このJavaScriptファイルへの参照を_Layouビューコンテナの後t.cshtmlファイル：それ

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

です！