Asp.net mvc 5 面向初学者的ASP.NET MVC5和DataTables：什么去哪里？

我在DataTables论坛上问过这个问题，但为了快速获得反馈，我愿意忍受一些滥用，所以我在这里交叉发帖

---

我刚刚开始进入ASP.NETMVC5的冒险之旅，并在1995年牢固地掌握了web开发技能。经过一些努力，基本的CRUD应用程序正在运行，我将继续对它进行一些修饰。DataTables提供的功能似乎非常适合

我对JavaScript的理解可以放在一个小的注释块中，但我可以遵循格式良好的说明。所以当我发现文档中说，“只需添加这三行include和这一行JS，您就可以开始运行了，”我想这会很简单。我按照指示做了，什么也没变。做了更多的研究，我发现有人的项目为MVC5和DataTables 1.10创建绑定，但说明很少（“简单”只是在你理解他们告诉你做什么的情况下才容易）

从DataTables说明（“只需添加这三行…”）开始，我有以下内容：

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products" >
    <tr>
        <th> @Html.DisplayName("Code")</th>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.Category)</th>
        <th>@Html.DisplayName("Active")</th>
        <th>@Html.DisplayName("Published")</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
        <td>@Html.DisplayFor(modelItem => item.Name)</td>
        <td>@Html.DisplayFor(modelItem => item.Category)</td>
        <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
        <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
        <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
    </tr>
}
</table>

缺少的（这是我的基本理解）是在哪里添加它。我试过好几个地方，桌子没有改变。我尝试的第一个位置是在第三个块的

脚本
标记中：

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
$(document).ready( function () {
    $('#products').DataTable();
} );</script>


$（文档）.ready（函数（）{
$（“#产品”）.DataTable（）；
} );

那是正确的地方吗？我是否正确标识了目标表？我是否需要找出如何实现在中找到的代码？在掌握JavaScript之前，我应该放弃所有希望吗

谢谢你能给我的一切帮助

干杯

来自W3C脚本规范的JD
：

如果src有一个URI值，那么用户代理必须忽略元素的内容，并通过URI检索脚本

你想要的是：

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $('#products').dataTable();
    } );
</script>


$（文档）.ready（函数（）{
$（“#产品”）.dataTable（）；
} );

注意：
.dataTable（）上的外壳。我必须检查，但我认为
.dataTable（）
是创建方法，并且
.dataTable（）
在创建后访问datatables对象

祝你在数据表方面好运。我喜欢它，但“只要几行就行了！”一旦你想做一些超出基本功能的事情，就会很快让位于复杂的API

编辑：还有，这合法吗

src=“//cdn.datatables.net

您不需要“http:”吗？我本以为您需要，但可能不需要。
这里有几个问题

将脚本放入
script
标记时，不要使用
src
Datatables使用元素
tbody
和
thead
来正确地对事物进行分组和样式化。因此需要将这些元素添加到
表
元素中
与
td
的数量相比，
th
的数量不同。这些需要匹配，以便所有表数据都有一个对应的列
将所有脚本分组到页面底部，以加快明显的页面加载时间
这应该有用

<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="products">
    <thead>
        <tr>
            <th> @Html.DisplayName("Code")</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.Category)</th>
            <th>@Html.DisplayName("Active")</th>
            <th>@Html.DisplayName("Published")</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) 
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.ProductCode)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Category)</td>
                <td>@Html.DisplayFor(modelItem => item.Active.Value)</td>
                <td>@Html.DisplayFor(modelItem => item.Published.Value)</td>
                <td>@Html.ActionLink("Details", "Details", new { id=item.ID })</td>
           </tr>
        }
     </tbody>
</table>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>

索引

@ActionLink（“新建”、“创建”）

@Html.DisplayName（“代码”）
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Category）
@Html.DisplayName（“活动”）
@Html.DisplayName（“已发布”）
细节
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.ProductCode）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Category）
@DisplayFor（modelItem=>item.Active.Value）
@DisplayFor（modelItem=>item.Published.Value）
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）
}
$（文档）.ready（函数（）{
$（“#产品”）.DataTable（）；
} );
它正在工作！！
所以，我要做的是：

在
\u Layout.cshtml
中，我将以下内容添加到
标题
标记中：

<link href="~/Content/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="~/Scripts/jquery.dataTables.js"></script>

最后，
Index.cshtml
的底部是对脚本的调用：

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>


$（文档）.ready（函数（）{
$（“#产品”）.DataTable（）；
} );

我怀疑
BundleConfig.cs
位是冗余的，但它正在工作，所以我不想现在就尝试优化它

干杯

JD
我也很难让数据表在MVC5中运行。我试图在脚手架根据视图模型生成的标准索引视图中使用它。我能够构建一个小型原型，但不能针对表的FOREACH生成器。

我从建议的示例中输入了许多不同的JS和CSS代码行，并修补了BundleConfig。仍然没有乐趣。

索引将正确显示，但不会显示可排序列等功能。

通过将标题中的列数与显示的表体中的列数精确匹配，最终解决了这一问题。请注意，显示的列中不计算Id列。在我的示例中，有6个显示列和6个标题。但是模型中有7个隐藏了Id列。Action列也有一个标题呃

现在到处都是JavaScript和css片段，我想把它们清理干净以便重用

我能够部分更正捆绑包。然后，一位技术熟练的同事向我展示了如何正确地将捆绑包引用单独部署在索引页面中，而不是部署在布局页面上，因为布局页面会不必要地加载到每个页面上

您还将看到，在任何路径中都没有版本号。这是为了在不更改源代码的情况下允许JS、CSS和DataTable更新

确保你的表
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                    "~/Scripts/jquery.dataTables.js"));

<script type="text/javascript" charset="utf8">
    $(document).ready( function () {
        $('#products').DataTable();
    } );
</script>

//
    //  These are the DataTables bundles
    //  Be sure to activate them on the Page where they are needed or on _Layout 
    //
    bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
              "~/Scripts/DataTables/jquery.dataTables.js",
              "~/Scripts/DataTables/dataTables.bootstrap.js"));

    bundles.Add(new StyleBundle("~/Content/dataTables").Include(
              "~/Content/DataTables/css/jquery.dataTables.css",
              "~/Content/DataTables/css/jquery.dataTables.min.css"));

 @model IEnumerable<"Your Own Model">.PriceList>

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @Styles.Render("~/Content/dataTables")


<h2>Price List</h2>
        <table id="table_id" class="table table table-striped table-hover">
            <thead>
                <tr>                        
                    <th>
                        Product Ptr
                    </th>                        
                    <th>
                        Product Class
                    </th>
                    <th>
                        Ver
                    </th>
                    <th>
                        Year
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>  
                            @Html.HiddenFor(modelItem => item.PriceList_Id)

                        <td>
                            @Html.DisplayFor(modelItem => item.Product_Pt)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductClass_Pt)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Version)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Year)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ProductDesc)
                        </td>

                        <td>
                            @Html.ActionLink("Edit", "Edit", new { id=item.PriceList_Id }) |
                            @Html.ActionLink("Details", "Details", new { id = item.PriceList_Id }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.PriceList_Id })
                        </td>

                    </tr>
                }
            </tbody>
        </table>
@section scripts {

@Scripts.Render("~/bundles/dataTables")

<script type="text/javascript">

    $(document).ready(function () {
        $('#table_id').DataTable();
    });

</script>
}