0
私のmvc.net Webアプリケーションでは、私はブートストラップ3を使用して、タブビューの製品に関するさまざまな側面を表示しています。これは正常に動作します。ページには、タブビューと同じレイアウトの編集ページに移動する編集ボタンもありますが、各タブの部分表示には編集可能な入力/ドロップダウンなどがあります。プログラムでリンクをアクティブにする方法
マイビューの詳細ビューは次のとおりです。
<div id="productdetail">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
<div class="tab-content">
<div id="product" class="tab-pane fade in active">
@Html.Partial("_productDetails", Model)
</div>
<div id="stock" class="tab-pane fade">
@Html.Partial("_stockDetails", Model)
</div>
<div id="notes" class="tab-pane fade">
@Html.Partial("_Notes", Model)
</div>
<div id="manufacture" class="tab-pane fade">
@Html.Partial("_ManufactureDetails", Model)
</div>
</div>
<br />
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" data-theme="product" href="#product">Product</a></li>
<li><a data-toggle="pill" data-theme="stock" href="#stock">Stock</a></li>
<li><a data-toggle="pill" data-theme="notes" href="#notes">Notes</a></li>
<li><a data-toggle="pill" data-theme="manufacture" href="#manufacture">Manufacture</a></li>
</ul>
<br />
</div>
<span style="float:right; margin-right:10px;">
<input type="hidden" id="hd_SelectedTab" />
<button type="button" class="btn btn-default" style="margin-top:2px;" onclick="goEdit('@Model.ServerDetailID')">
Edit <span class="glyphicon glyphicon-edit"></span>
</button> |
<button type="button" class="btn btn-default" style="margin-top:2px;" onclick="location.href='@Url.Action("Index", "Home")'">
Back Home <span class="glyphicon glyphicon-home"></span>
</button>
</span>
</div>
リンクをクリックすると、どのタブ（リンク）がクリックされたかを保存する次の機能があります。
$("a[data-theme]").click(function() {
var $selectedTab = $(this).data("theme")
$("#hd_SelectedTab").val($selectedTab);
//alert('tab Selected is now: ' + $selectedTab);
});
[編集]ボタンをクリックした呼び出し、この関数...
function goEdit(sn) {
var tabSelected = $("#hd_SelectedTab").val();
window.location = "../Details/Edit?sn=" + '@Model.ServerDetailID' + "&ts=" + tabSelected;
}
JSFiddle - 私の編集ビューでhttps://jsfiddle.net/DTcHh/20303/
私は今、同じタブを選択しtabSelected値を使用します。 ..すなわち、株価タブが選択され、編集ボタンがクリックされた場合、ストックタブをアクティブタブとして編集ビューが開きます。
私の編集ビューは次のとおりです。
<div id="productedit">
<div class="col-xs-8 col-sm-9 col-md-10 col-lg-11">
<div class="tab-content">
<div id="product" class="tab-pane fade in active">
@Html.Partial("_productEdit", Model)
</div>
<div id="stock" class="tab-pane fade">
@Html.Partial("_stockEdit", Model)
</div>
<div id="notes" class="tab-pane fade">
@Html.Partial("_NotesEdit", Model)
</div>
<div id="manufacture" class="tab-pane fade">
@Html.Partial("_ManufactureEdit", Model)
</div>
</div>
<br />
</div>
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" data-theme="product" href="#product">Product</a></li>
<li><a data-toggle="pill" data-theme="stock" href="#stock">Stock</a></li>
<li><a data-toggle="pill" data-theme="notes" href="#notes">Notes</a></li>
<li><a data-toggle="pill" data-theme="manufacture" href="#manufacture">Manufacture</a></li>
</ul>
<br />
</div>
<!-- Removed save button & notification panel for brevity -->
</div>
その後、私は、次の未完成のjavascriptを持って
$(document).ready(function() {
var ts = '@ViewData("TabSelected")'
switch(ts) {
case "product":
// select the product tab and show partial view _productEdit
break;
case "stock":
// select the stock tab and show partial view _stockEdit
break;
case "notes":
// select the notes tab and show partial view _notesEdit
break;
case "manufacture":
// select the manufacture tab and show partial view _manufactureEdit
break;
default:
// select the product tab and show partial view _productEdit
}
})
JSFiddle - https://jsfiddle.net/os1pk3og/2/
私は実用的に正しいリンクをアクティブにし、正しい部分を表示するにはどうすればよいです見る？
私はあなたがコードの編集ビューを、次の試してみてくださいすることができ、各タブパネル
<div id="product" class="tab-pane fade @(If(ViewData("TabSelected") = "product", "in active", ""))">
@Html.Partial("_ProductEdit", Model)
</div>
、各錠剤のリンク
<li [email protected](If(ViewData("TabSelected") = "product", "active", ""))><a data-toggle="pill" data-tabId="product" href="#product">Product</a></li>
あなたは私に1つのことを教えてください、あなたはselectedtab値を編集ビューページに渡すことができますか？ –
はい... GoEdit関数のコードを見ると、コントローラがViewDataとして設定するクエリ文字列のパラメタとして選択したタブを送信しています。 – Mych
私はあなたがこれらを試してみてください私の答えを入れている。 –