1

Razor ページに 2 つのタブがあります。ページを読み込んで、ページ A または B を選択できるようにしたいと考えています。現在、ページが読み込まれ、常に A に表示されます。

私のホームビューでは、製品ビューを呼び出します

<a class="btn btn-default"
   href='@Url.Action("Index", "Products", new { id = "productB" })'
   role="button">
   Learn More 
</a>

ここでルート値「productB」を渡しているので、タブを読み込もうとします。私の製品コントローラには

public ActionResult Index(object id = null)
{
    if (id != null && !String.IsNullOrEmpty())
        ViewBag.ActiveTab = id.ToString();
    return View();
}

製品ビュー

@{
    string activeTab = ViewBag.ActiveTab;
}

<div class="products container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#productA">
                <span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#productB">
                <span class="glyphicon glyphicon glyphicon-align-left"></span>productB
            </a>
        </li>
    </ul>
    <div class="products-body">
        <div class="tab-content">
            <div id="productA" class="tab-pane active fade in">
                ...
            </div>
            <div id="productB" class="tab-pane fade">
                ...
            </div>
        </div>
    </div>
</div>

関数で

$(function () {
    var selector = '@activeTab';
    $("#" + selector).addClass("active");

    // Also tried the following...
    // var anchor = '@activeTab' || $("a[data-toggle=tab]").first().attr("href");
    // $('a[href=' + anchor + ']').tab('show');
});

しかし、これは私のタブページを選択しません。これはとても簡単に思えますが、どうすればこれを機能させることができますか?

4

2 に答える 2

1

まず、引数の型をオブジェクトから文字列に変更する必要があります。それを object として保持すると、ViewBag からカミソリ ビューでそれを読み取ると、期待した文字列 (A または B) を取得できず、代わりに次のようになります。System.Object

public ActionResult Index(string id = null)
{
    if (id != null)
        ViewBag.ActiveTab = id.ToString();
    return View();
}

また、そのタブのアンカー タグで tab メソッドを呼び出して、タブを有効にする必要があります。後で jQuery コードで要素を選択できるように、各アンカー タグの Id を含めるようにマークアップを変更しました。

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" id="link-tabA" href="#productA">
            <span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
        </a>
    </li>
    <li>
        <a data-toggle="tab" id="link-tabB" href="#productB">
            <span class="glyphicon glyphicon glyphicon-align-left"></span>productB
        </a>
    </li>
</ul>

ドキュメントの準備ができたら、@activeTab変数 value の値 (既に ViewBag から読み取ったもの) を使用して、タグの jQuery セレクター式を作成し、その上で show メソッドを呼び出します。

$(function () {
    var selector = '@activeTab';
    if(selector)
    {
       $("#link-tab"+selector).tab('show');
    }        
});
于 2015-11-12T15:26:28.627 に答える