无法使用 jquery 在剃刀视图页面中创建分页答案

【问题标题】：Can't create paging in razor view page using jquery无法使用 jquery 在剃刀视图页面中创建分页
【发布时间】：2014-08-23 11:27:48
【问题描述】：

我尝试在我的 MVC4 项目中创建分页：

这里是razor视图页面中的代码：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<!DOCTYPE html>
<html>
<head>
</head>
<body class="wide comments example">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Position
                </th>
                <th>
                    Office
                </th>
                <th>
                    Age
                </th>
                <th>
                    Start date
                </th>
                <th>
                    Salary
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Tiger Nixon
                </td>
                <td>
                    System Architect
                </td>
                <td>
                    Edinburgh
                </td>
                <td>
                    61
                </td>
                <td>
                    2011/04/25
                </td>
                <td>
                    $320,800
                </td>
            </tr>
            <tr>
                <td>
                    Garrett Winters
                </td>
                <td>
                    Accountant
                </td>
                <td>
                    Tokyo
                </td>
                <td>
                    63
                </td>
                <td>
                    2011/07/25
                </td>
                <td>
                    $170,750
                </td>
            </tr>
            <tr>
                <td>
                    Ashton Cox
                </td>
                <td>
                    Junior Technical Author
                </td>
                <td>
                    San Francisco
                </td>
                <td>
                    66
                </td>
                <td>
                    2009/01/12
                </td>
                <td>
                    $86,000
                </td>
          </tbody>
    </table>
    @section Scripts {
        <script type="text/javascript">

            $(document).ready(function () {
                $('#example').dataTable();
            });

        </script>
    }
</body>
</html>

这是布局页面中的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

这里是 Bundle BundleConfig：

 public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }

我尝试在视图剃刀页面中对上述表格进行分页，但它不起作用。

仅当我从布局页面中删除此行时才有效：

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

并在 razor 视图页面中添加此行：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').dataTable();
    });
</script>

插入此行：

    @section Scripts {
        <script type="text/javascript">

            $(document).ready(function () {
                $('#example').dataTable();
            });

        </script>

知道为什么我在布局页面中使用 @scripts.render( /bundles/jquery ) 时无法在表格中创建分页吗？我错过了什么？

提前谢谢你。

【问题讨论】：

任何控制台错误？？？
您的捆绑包中似乎没有包含jquery.dataTables.js
删除<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>并将所有其他脚本标签放入@section Scripts {}
@Ex，没有控制台错误
@Michael...当您在布局中包含 datatable.js 而不是视图本身时，会出现任何控制台错误？？？？

标签： jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

bundle 的想法是将常用的 JS 文件打包成一个单独的下载文件（自动最小化等）。这允许浏览器更有效的加载时间和更好的缓存。

您需要使用捆绑包而不是反对它们。为此，您应该下载相关的脚本文件并将它们放在您的脚本文件夹中。然后在一个包中引用它们（在本例中，为了简单起见，我将它添加到 jQuery 包中）：

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.dataTables.min.js"
                ));

任何特定于页面的脚本通常会进入页面上的脚本部分：

@section Scripts {
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').dataTable();
        });

    </script>
}

通常，如果下载的 JS 文件在文件名中没有版本，我将重命名它以包含该版本。这使维护更容易：

例如将jquery.dataTables.min.js重命名为jquery.dataTables-1.10.2.js

并将捆绑包更改为：

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.dataTables-{version}.js"
                ));

在调试时，您通常会在 BundleConfig.cs 文件的末尾添加以下内容：

 BundleTable.EnableOptimizations = false;

这将确保所有 JS 文件都在没有缩小的情况下注入并且作为单独的文件。

如果可能，请尝试获取加载项的完整 JS 文件以及 .min 版本。捆绑会根据BundleTable.EnableOptimizations 自动选择正确的版本（并且能够调试到插件中非常很有用）。

【讨论】：