1

History.js を使用しbrowserstateて Ajax 経由で子パネルを変更およびロードするカスタム jQuery コントロールがあります。HTML 5 ブラウザーでは、URL が完全に変更されているため、ページの更新が機能します (現在のパネルが読み込まれます)。

ただし、IE9 以前では、状態は次のようなハッシュ値として保存されます。

http://localhost:63559/ApplicationPanel/ListView#/SectionPanel/ListView/3?&_suid=1397574319099025255064889015816

/SectionPanel/ListView/3内のハッシュ URL (例: )を抽出しOnActionExecutingて、ページの更新時に正しい開始点にリダイレクトできるようにします (戻るボタンと進むボタンは正常に動作します)。

基本的にはこれを行いたいのですraw URLが、ハッシュ部分も含まれていません。

    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var url = filterContext.HttpContext.Request.RawUrl;
        if (url.Contains('#'))
        {
            url = url.Substring(url.IndexOf('#')+1);
            filterContext.Result = Redirect(url);
        }
        base.OnActionExecuting(filterContext);
    }

このコードをブレークポイントすると、URL には基本 URL (例: /ApplicationPanel/ListView) のみが含まれます。

MVC コントローラでハッシュ パラメータを取得するにはどうすればよいですか? プッシュ方法も変更する必要があるかもしれませんが、次のいくつかのバリエーションは役に立ちませんでした。

            // If HTML4, try adding a querystring
            if (typeof window.history.pushState !== "function")
            {
                url = "?" + url;
            }
            this.Historyjs.pushState({ somedata: data }, "", url);

次のような URL を取得します。

http://localhost:63559/Level1#Level1/?/Level2/Index/3&_suid=139757562428301418756129738284

アップデート：

これは、History.js がブラウザーの URL を操作する方法にかかっているようです。HTML 4 ブラウザーでは、サーバーが余分なデータを認識しないように、ハッシュ タグのみを変更できます。

テストとして、プラグインにハッシュ URL をチェックさせ、ブラウザをそれにリダイレクトさせました。

    // If HTML4, extract the URL from the hash
    if (typeof window.history.pushState !== "function")
    {
        var hash = window.location.hash;
        if (hash.length)
        {
            var q = hash.indexOf('?');
            if (q < 1)
            {
                q = (hash.length);
            }
            hash = hash.substring(1, q);
            window.location = hash;
        }
    }

これはページの更新には機能しましたが、残念ながらブラウザのページの読み込みでは、ページの再読み込みと戻るボタンが押されたことを区別できません。このコードは、戻るボタンを同じ子ページに何度も送信します。

助言がありますか？

4

1 に答える 1

0

さまざまなオプションを試しましたが、すべての状況を解決できるものはないようです。最後に、ページの読み込み時または戻るボタンを押したときにハッシュを削除することにしました。これら 2 つを常に区別できるとは限らないからです。

最終結果は次のとおりです。

  • HTML 4 ブラウザーでは、[戻る] ボタンと再読み込みを行うと、トップ レベルのパネルに戻ります (ハッシュ参照は削除されます)。
  • HTML 5 では、階層のすべてのレベルで現在のパネルを正しく維持しながら、戻る、進む、更新することで美しく機能します。

jQuery プラグインの開始時のコード

// If HTML4...
if (typeof window.history.pushState !== "function")
{
    // If there is a hash, remove it and redirect (to clean up the address bar)
    var hash = window.location.hash;
    if (hash.length)
    {
        window.location = <any>window.location.pathname;
        return;
    }
}
于 2014-04-15T16:23:25.813 に答える