Javascript MVC 5:不同选项卡中的相同PartialView对象-数据表未呈现/填充_Javascript_Asp.net Mvc

Javascript MVC 5:不同选项卡中的相同PartialView对象-数据表未呈现/填充

javascript asp.net-mvc

Javascript MVC 5:不同选项卡中的相同PartialView对象-数据表未呈现/填充,javascript,asp.net-mvc,Javascript,Asp.net Mvc,我是MVC5新手，如果这不是一个好问题，我深表歉意。我看到了很多类似的问题，不是完全相同的，我没有解决办法我有一个MVC 5应用程序，其主页Index.cshtml包含一个引导选项卡菜单。每个项目都是一个局部视图，在大多数情况下都能正确显示。其中两个选项卡Plan Overview和Analytics使用相同的表进行导航，因此此导航侧栏引用相同的局部视图加载应用程序时，默认选项卡选择为“计划概述”。planGrid和assetGrid中的两个DataTable对象正确加载和格式化我正在更改列

我是MVC5新手，如果这不是一个好问题，我深表歉意。我看到了很多类似的问题，不是完全相同的，我没有解决办法

我有一个MVC 5应用程序，其主页Index.cshtml包含一个引导选项卡菜单。每个项目都是一个局部视图，在大多数情况下都能正确显示。其中两个选项卡Plan Overview和Analytics使用相同的表进行导航，因此此导航侧栏引用相同的局部视图

加载应用程序时，默认选项卡选择为“计划概述”。planGrid和assetGrid中的两个DataTable对象正确加载和格式化我正在更改列宽和标题文本。当我选择Analytics选项卡（它也引用相同的局部视图）时，我会得到未格式化的标题，并且没有数据。执行此操作的JS文件没有执行，即使它的初始执行应该加载并填充此对象

我肯定我有几件事要做。我从哪里开始

预计到达时间：代码：

_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>

_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>

在您的问题中向我们展示您的代码，然后我们可以帮助您。但是，从您的描述中，JS不执行意味着您的部分视图在标签的中间部分呈现JS或某些东西，我认为问题是因为重复的DATABATID ID，您有2个具有相同ID的实例，它不这样工作，我建议您通过创建2个不同的部分视图开始，并为tables@Munzer实际上我已经试过了。对“分析”选项卡使用单独的控件时，这些控件会显示并填充数据，但不会进行格式化。列名以下划线显示，列宽未设置。也就是说，它更进一步了，但仍然不正确。我无法读取url路由-请尝试下载fiddler并检查http ajax get请求，以查看tabId是否正确地传递到方法中。否则，必须使用名为tabId的id参数设置路由。

<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>