在 Visual Studio 中安装 DataTable Jquery 插件答案

【问题标题】：Install DataTable Jquery Plugin in Visual Studio在 Visual Studio 中安装 DataTable Jquery 插件
【发布时间】：2016-04-05 06:30:57
【问题描述】：

我正在关注与 Razor 视图相关的 Jquery 的简短教程，我正在尝试安装 DataTables Jquery 插件。我正在使用 ASP.net MVC，这是我第一次尝试安装 Jquery 插件。我有一个索引视图，我想更改使用 DataTable 插件显示的表，我已经下载了该插件，接下来我尝试将整个插件复制到脚本文件中并从我的索引视图中引用 jquery.dataTables，在解决方案资源管理器中，DataTables 插件文件的颜色为白色，就像表明它有问题一样。我在教程中读到使用这个插件的正确方法是使用视图中的引用，例如：

   @section PageScripts{
<link href="/Content/css/jquery.dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.dataTables.js" type="text/javascript"></script>

我已经尝试过这种方式并且表格没有修改。我在想我没有考虑安装这个插件的一些明显的东西。我已经阅读过在 App_Start 文件夹中使用 BundleConfig 来引用 Jquery 脚本，然后从这样的视图中调用它们：

@section Scripts {
    @Scripts.Render("~/bundles/jquerydatatable")
    }

Razor 视图中的最佳实践是使用 BundleConfig 吗？

索引视图：

@model IEnumerable<AlexMusicStore.Models.Student>
@{
    ViewBag.Title = "Index";
}
<table>
//some other content here...
</table>
@section Scripts {
    @Scripts.Render("~/bundles/jquerydatatable")
    }

如果我在 Visual Studio 目录中手动复制文件，则将文件显示为白色而不是 javascript 图标：

【问题讨论】：

那些带有白色图标的文件不包含在您的解决方案中，只需右键单击并选择“包含在解决方案中”

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

添加如下 js 的 bundle 配置，

 bundles.Add(new ScriptBundle("~/bundles/gridresponsive").Include(
                     "~/Scripts/GridResponsive/jquery.dataTables.js",
                     "~/Scripts/GridResponsive/dataTables.bootstrap.js",
                     "~/Scripts/GridResponsive/dataTables.responsive.js",
                     "~/Scripts/GridResponsive/responsive.bootstrap.js"));

CSS，

bundles.Add(new StyleBundle("~/Content/gridcss").Include(
                      "~/Content/GridResponsive/dataTables.bootstrap.css",
                      "~/Content/GridResponsive/responsive.bootstrap.css"));

并添加参考以查看您使用的是哪一个，

@Scripts.Render("~/bundles/gridresponsive")
@Styles.Render("~/Content/gridcss")

【讨论】：