2

AJAX 呼び出しを使用して部分ビューを要求し、その html をメインのインデックス ビューのコンテンツ領域に読み込みます。URL へのハッシュを利用して、ブラウザー履歴のサポートを有効にしています (GMail の URL ブラウザー履歴と同じように)。

私の部分的なビューが返されてロードされた後を除いて、すべてが正常に機能しています

メインビューにリクエストを開始するリンクがあります:

<div class="linkButton" data-bind="click:function(){Nav.makeRequest('#/MyController/Profile/2')}">Profile</div>

部分ビューをリクエストしてロードするために使用しているJavaScriptは次のとおりです。

var Nav:function(){
    var self = this;
    $(window).bind("hashchange", self.onHashChange);

    makeRequest: function(hash){
        window.location.hash = hash;
    };

    onHashChange: function (e) {
        var hash = window.location.hash.substring(1); 
        var url = 'http://localhost:3333/' + hash.substring(1);
        $.get(url, function (data) {
            $('#content').html(data);
        });
    }
}

したがって、私のリクエスト例の 1 つは次のようなものです。http://localhost:3333/#/MyController/Profile/2

リクエストが正常に完了し、ルーティングで渡された id ( 2 )の正しいモデルがプロファイル ビューに読み込まれ、ブラウザのナビゲーションの URL が上に表示されます。

ただし、ビューの読み込みが完了すると、ブラウザーの URL は自動的に次のように変更されます。http://localhost:3333/#

これは、ページに現在読み込まれているものには影響しませんが、この新しい URL がブラウザーの履歴に追加されるため、[戻る] ボタンを押すと、部分的なプロファイル ビューの要求が再度送信されます。

Global.axax にある唯一のルートは次のとおりです。

routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", 
    new { controller = "MyController", action = "Index", id = UrlParameter.Optional } 
);

MVC ルーティング エンジンは、部分ビューのリクエストが ( http://localhost:3333/MyController/Profile/2) に入ってきたことを確認し、インデックス ビューの URL を返すデフォルト ルートと照合するのではないかと考えています。http://localhost:3333/

私はクライアントで広範囲にデバッグしましたが、onHashChange イベントは実際に、部分ビュー要求に対して 1 回、URL が localhost:3333/# に戻ったときに 2 回発生します。呼び出しスタックは、クライアント側で行われている呼び出しを明らかにしません。 URLが元に戻るようにします。

AJAX と履歴サポート用のハッシュを使用して部分ビューを要求してロードし、ブラウザの URL をデフォルトのルート パスに自動的に戻さないようにする方法はありますか?

4

1 に答える 1