Question

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

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

@{
    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"));
    }

我尝试在视图razor页面上进行上述表格分页，但它没有用。

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

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

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

<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）时，我知道为什么我不能在表格中创建分页？我缺少什么？

提前谢谢。

Answer 1

捆绑包的想法是将常用的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文件在文件名中没有版本，我会将其重命名为包含版本。这使维护更容易：

e.g。将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的正确版本（并且能够调试到插件非常有用）。

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

1 个答案: