Question

我是MVC 5的新手，如果这不是一个好问题，请道歉。我看到很多类似的问题，不一样，我没有解决方案。

我的主页（Index.cshtml）有一个MVC 5应用程序，它包含一个Bootstrap选项卡菜单。每个项目都是局部视图，所有项目都正确显示（大部分）。其中两个选项卡（计划概述和分析）使用相同的表进行导航，因此此导航侧栏会引用相同的局部视图。

加载应用程序时，默认选项卡选项是计划概览。有问题的两个DataTable对象（planGrid和assetGrid）正确加载和格式化（我正在更改列宽和标题文本）。当我选择“分析”选项卡（也引用相同的部分视图）时，我会收到未格式化的标题而没有数据。执行此操作的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>

MVC 5：不同选项卡中的相同PartialView对象 - DataTables无法呈现/填充

0 个答案: