在Visual Studio中安装DataTable Jquery插件

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

@section PageScripts{   

我试过这种方式,表不会修改。 我在想,我没有考虑安装这个插件的明显事实。 我已经读过在App_Start文件夹中使用BundleConfig来引用Jquery脚本,然后从这样的视图中调用它们:

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

Razor Views中的最佳实践是使用BundleConfig吗?

索引视图:

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

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

Visual Studio捕获

添加如下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")