Я написал этот фрагмент кода для обработки вкладки bootstrap, он работает нормально, но я хочу использовать простой способ поддерживать активную вкладку.
Я тестирую сеанс ["вкладка"] в режиме просмотра действий, если он работает не создано раньше, тогда показывать tab1 по умолчанию, но если вызов поступает с другой страницы, я должен показать текущую вкладку на основе значения сеанса, которое содержит текущее значение вкладки
public ActionResult View_All_SupportTickets()
{
if (Session["tab"] == null)
{
Session["tab"] = "tab1";
}
return View();
}
[HttpGet]
public ActionResult GetPartialView(string id)
{
switch (id)
{
case "tab1":
var query = (from st in Db.Support_Teckets ............
}).ToList().OrderByDescending(a => a.Created_Date);
Session["tab"]="tab1";
return PartialView("View_All_SupportTickets_tab1", query);
case "tab2":
var query2 = (from st in Db.Support_Teckets .............
}).ToList().OrderByDescending(a => a.Created_Date);
Session["tab"] = "tab2";
return PartialView("View_All_SupportTickets_tab2" , query2);
case "tab3":
var query3 = (from st in Db.Support_Teckets .............
................................
}).ToList().OrderByDescending(a => a.Created_Date);
Session["tab"] = "tab3";
return PartialView("View_All_SupportTickets_tab3" , query3);
}
return RedirectToAction("View_All_SupportTickets");
}
это страница просмотра, которая показывает вкладки
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="tabs" id="tabs">
<ul class="nav nav-tabs">
<li><a href="#tab1" data-toggle="tab" class="tab" data-id="tab1">البلاغات الجديدة</a></li>
<li><a href="#tab2" data-toggle="tab" class="tab" data-id="tab2">جميع البلاغات</a></li>
<li><a href="#tab3" data-toggle="tab" class="tab" data-id="tab3">البلاغات المتأخرة</a></li>
</ul>
</div>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="tab1"></div>
<div class="tab-pane" id="tab2"></div>
<div class="tab-pane" id="tab3"></div>
</div>
</div>
</div>
</div>
jquery
<script type="text/javascript">
$(document).ready(function () {
if ('@Session["tab"]' == "tab1") {
activaTab('tab1');
}
if ('@Session["tab"]' == "tab2") {
activaTab('tab2');
}
if ('@Session["tab"]' == "tab3") {
activaTab('tab3');
}
});
function activaTab(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
$.ajax({
type: 'GET',
url: '@Url.Action("GetPartialView", "etraining")',
data: { 'id': tab },
dataType: "html",
success: function (data) {
if (tab == "tab1") {
$('#tab1').html(data);
}
if (tab == "tab2") {
$('#tab2').html(data);
}
if (tab == "tab3") {
$('#tab3').html(data);
}
}
});
}
$(function () {
$('.tab').click(function () {
var id = $(this).attr("data-id");
if (id == "tab1") {
$.ajax({
type: 'GET',
url: '@Url.Action("GetPartialView", "etraining")',
data: { 'id': id },
dataType: "html",
success: function (data) {
$('#tab1').html(data);
}
});
}
if (id == "tab2") {
$.ajax({
type: 'GET',
url: '@Url.Action("GetPartialView", "etraining")',
data: { 'id': id },
dataType: "html",
success: function (data) {
$('#tab2').html(data);
}
});
}
if (id == "tab3") {
$.ajax({
type: 'GET',
url: '@Url.Action("GetPartialView", "etraining")',
data: { 'id': id },
dataType: "html",
success: function (data) {
$('#tab3').html(data);
}
});
}
});
});
</script>
это однострочный код, который go возвращает на страницу вкладок и показывает страницу с текущим значением
@Html.ActionLink("Back to List", "View_All_SupportTickets")
Я благодарен за ваш ответ
спасибо