Я новичок в MVC 5, поэтому извиняюсь, если это не хороший вопрос. Я видел много похожих вопросов, не идентичных, и у меня нет решения.
У меня есть приложение MVC 5 с моей главной страницей (Index.cshtml), содержащей меню вкладки Bootstrap. Каждый элемент является частичным представлением, все из которых отображаются правильно (по большей части). На двух вкладках («Обзор плана» и «Аналитика») для навигации используются одни и те же таблицы, поэтому эта боковая панель навигации ссылается на одно и то же частичное представление.
При загрузке приложения выбором вкладки по умолчанию является Обзор плана. Два рассматриваемых объекта DataTable (planGrid и assetGrid) загружаются и форматируются правильно (я изменяю ширину столбца и текст заголовка). Когда я выбираю вкладку Analytics, которая также ссылается на тот же частичный вид, я получаю неформатированные заголовки и никаких данных. Файл JS, который делает это, не выполняется, хотя его первоначальное выполнение должно загрузить и заполнить этот объект.
Я уверен, что у меня есть несколько вещей, на которых я здесь. С чего начать?
ETA: код:
_MainLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - SNOWMAN v0.3</title>
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/DataTables/datatables.js")
@Scripts.Render("~/Scripts/SNOWMAN.js")
@Styles.Render("~/Content/css")
@RenderSection("scripts", required: false)
</head>
<body>
@RenderBody()
Index.cshtml
@{
ViewBag.Title = "SNOWMAN Launch";
}
<div class="titleBar">
<b>SNOWMAN</b>
</div>
<div class="titleBarBorder"> </div>
<div class="tabMenu">
<ul id="tabStrip" class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#_PlanOverviewTab" role="tab" data-toggle="pill">Plan Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#_AnalyticsTab" role="tab" data-toggle="pill">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#_HelpTab" role="tab" data-toggle="pill">Help</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade show active" id="_PlanOverviewTab">@Html.Partial("_PlanOverviewTab")</div>
<div class="tab-pane fade" id="_AnalyticsTab">@Html.Partial("_AnalyticsTab")</div>
<div class="tab-pane fade" id="_HelpTab">@Html.Partial("_HelpTab")</div>
</div>
@section scripts {
<script>
$('#tabStrip a').click(function (e) {
e.preventDefault()
var tabID = $(this).attr("href").substr(1);
$(".tab-pane").each(function () {
$(this).empty();
});
$.ajax({
url: "/@ViewContext.RouteData.Values["controller"]/" + tabID,
cache: false,
type: "get",
dataType: "html",
success: function (result) {
$("#" + tabID).html(result);
}
})
$(this).tab('show')
});
</script>
}
_PlanOverViewTab.cshtml
@{
ViewBag.Title = "_PlanOverviewTab";
}
<div class="subContainer">
<div class="planSidebar">
@Html.Partial("_PlanSidebar")
</div>
<div class="planDetails">
</div>
_PlanSidebar.cshtml
<table id="planGrid" class="table table-striped table-bordered">
<thead>
<tr>
<th>Plan_ID</th>
<th>Plan_Description</th>
<th>Asset_IDs</th>
<th>Assets</th>
</tr>
</thead>
</table>
<table id="assetGrid" class="table table-striped table-bordered">
<thead>
<tr>
<th>Asset_ID</th>
<th>Asset</th>
</tr>
</thead>
</table>