0

私はAsp.net mvc 3アプリケーションを構築しています。私がやりたいのは、プロファイル ページ ( stackoverflow プロファイル ページとかなり似ています) であり、このページのコンテンツはタブに分割され、各タブはPartialView.

ユーザーがタブ X をクリックすると、ページ全体を更新せずにタブ領域のみを更新したい。同時に URL アドレスを変更するので、ユーザーがブラウザの更新ボタンをクリックすると、選択したタブでページが更新されます。これは可能ですか？

私がすでに知っているのは、を使用してデータを取得しAJAX、ビューのコンテンツを置き換える方法です。私はこの投稿を読みました。興味深いと思いましたが、すべてのページが更新されました。

前もって感謝します。

4

2 に答える 2

2

あなたは正しい軌道に乗っています。ページを更新せずに HTML をレンダリングするには、ajax を使用する必要があります。また、現在のタブを含むように URL を更新するには、プッシュ状態を使用する必要があります。

これらを個別の操作として実行することもできますが、PJAXを使用することをお勧めします。PJAX を使用すると、レイアウトを含む完全な html ページを返すか、部分的なもの (PJAX 要求) を返すかを決定するために、サーバーに少し追加のロジックが必要になります。

これが Foo コントローラーです。インデックスには、デフォルトで選択された「バー」タブがあります。Bar アクションと Baz アクションは Index ビューを返しますが、別のタブが選択されたタブになっています。PJAX リクエストの場合、必要なのはタブのコンテンツを埋める部分ビューだけです。

public class FooController : Controller
{
    public ActionResult Index()
    {
        ViewBag.SelectedTab = "Bar";
        return View();
    }

    public ActionResult Bar()
    {
        if(Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Bar";
        return View("Index");
    }

    public ActionResult Baz()
    {
        if (Request.Headers["X-PJAX"] != null)
            return PartialView();
        ViewBag.SelectedTab = "Baz";
        return View("Index");
    }
}

Foo/Index.cshtml の内部には、レンダリングする部分ビューを決定する Razor コードがありますViewBag.SelectedTab。

@{
    ViewBag.Title = "Foo";
}

<h2>Foo</h2>

<ul>
    <li><a class="tabs" href="@Url.Action("Bar", "Foo")">Bar</a></li>
    <li><a class="tabs" href="@Url.Action("Baz", "Foo")">Baz</a></li>
</ul>
<div id="tab_content">
    @if(ViewBag.SelectedTab == "Bar")
    {
        @Html.Partial("Bar")
    }
    @if (ViewBag.SelectedTab == "Baz")
    {
        @Html.Partial("Baz")
    }
</div>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $(".tabs").pjax("#tab_content");
        })
    </script>
}

最後のスクリプト セクションは、PJAX を接続する方法です。クラスとのすべてのハイパーリンクはtabspjax を使用して、 から生成された htmlhrefを idtab_contentを持つコンテナーに動的にロードしてレンダリングし、ブラウザーの URL を からの URL に更新しhrefます。

このシナリオでは、各タブの部分ビューはかなり単純です

Bar.cshtml

<p>This is the Bar tab. No pun intended.</p>

Baz.cshtml

<p>This is the baz tab.</p>

これは明らかに非常に単純化されたソリューションです。通常、プレゼンテーション モデルを使用してビューのロジックを処理します。また、この手法があらゆる種類のリンクで使用できることを示すために、意図的にタブ スタイルを省略しています。タブだけに限定されません。

この例の完全なソース コードは、私の GitHub サイトにあります。

于 2012-07-29T22:27:41.320 に答える
1

ユーザーがタブ X をクリックすると、ページ全体を更新せずにタブ領域のみを更新したい。同時に URL アドレスを変更するので、ユーザーがブラウザの更新ボタンをクリックすると、選択したタブでページが更新されます。これは可能ですか？

これを実現するには、ブラウザーの履歴 API にプラグインする必要があります (これは HTML5 の一部であり、サポートしていないブラウザーで同じものを取得するには、ある種のプラグインを使用する必要があります)。

Manning の "HTML5 for .net developers" には、それに関するかなり良いセクションがありますが、まだ "アーリー アクセス" の段階です。

于 2012-07-29T16:58:55.107 に答える