ASP.NET 初学者的 MVC5 和 DataTables：什么去哪里？

Question

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

我刚刚开始探索 ASP.NET MVC5，拥有 1995 年扎根的 Web 开发技能。经过一些努力，基本的 CRUD 应用程序可以运行，我正在着手修饰它一些。 DataTables 提供的功能似乎非常适合。

我对 JavaScript 的理解可以放在一个小评论块中，但我可以遵循格式正确的说明。因此，当我找到说明 "just add these three include lines and this one line of JS, and you're off and running," 的文档时，我认为这很简单。我按照我认为的说明做了，但没有任何改变。通过更多研究，我发现某人的项目为 MVC5 和 DataTables 1.10 创建绑定，但说明很少（"easy" 只有当你理解他们告诉你做什么时才容易）。

从 DataTables 指令 ("just add these three lines...") 开始，这是我所拥有的：

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

理论上，我只需要添加一行：

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

缺少的（这是我的初步理解）是在哪里添加它。我已经尝试了几个地方，但没有对 table 进行任何更改。我尝试的第一个位置是在第三个块的 script 标记内：

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

那个地方对吗？我是否正确识别了目标 table？我是否需要弄清楚如何实现 https://github.com/ALMMa/datatables.mvc 中的代码？在掌握 JavaScript 之前，我是否应该放弃所有希望？

感谢您能给我的帮助。

干杯。

京东

Answer 1

来自 W3C 脚本规范：

If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the 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>

注意：.dataTable(); 上的外壳。我必须检查一下，但我认为 .dataTable() 是创建方法，.DataTable() 一旦创建就访问数据表对象。

祝你数据表好运。我喜欢它，但是一旦你想做任何超出基本的事情，"just a few lines and it works!" 很快就会让位给复杂的 API。

编辑：另外，这合法吗？

src="//cdn.datatables.net.....

不需要"http:"吗？我以为你会，但也许不会。

Answer 2

这里有几个问题...

将脚本放入 script 标签时不要使用 src
Datatables 使用元素 tbody 和 thead 对事物进行正确的分组和样式化。所以那些需要在 table 元素中添加
您的 th 数量与 td 数量不同。这些需要匹配，所以所有 table 数据都有对应于
将所有脚本放在页面底部以加快明显的页面加载时间

这应该有效...

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

Answer 3

有效！！

所以，这是我必须做的：

在 _Layout.cshtml 中，我将以下内容添加到 head 标签中：

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

在 BundleConfig.cs 中我添加了以下几行：

        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"));

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

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

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

干杯。

京东

Answer 4

我也很难让 DataTables 在 MVC5 中运行。我试图在脚手架针对视图模型生成的标准索引视图中使用它。我能够构建一个小型原型，但不能针对 table.
的 FOREACH 生成器我从建议的示例中输入了许多不同的 JS 和 CSS 代码行，还修补了 BundleConfig。还是不开心。
索引会正确显示，但不会显示 sortable 列等功能。
最终，通过将 header 中的列数与显示的 table body 中的列数完全匹配来解决这个问题。请注意，Id 列不计入显示的列中。在我的示例中，有 6 个显示列和六个 header。但是模型中有七个隐藏了 Id 列。操作栏还有一个 header.

现在到处都是 JavaScript 和 css 片段。我想清理它以供重复使用。

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

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

请确保您在 <table> 行中指定的 Table Id 与底部 Javascript 中的值完全匹配，在 JS 中前面有一个 #。当我完成这项任务时，我的页面中没有剩余 CSS 行的 JS。尝试以下操作。

从 NuGet

修改AppStart文件夹中的RegisterBundles代码，添加

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

ASP.NET 初学者的 MVC5 和 DataTables：什么去哪里？

ASP.NET MVC5 and DataTables for a beginner: what goes where?

datatables

asp.net-mvc-5

有效！！