安装DataTable的jQuery插件在Visual Studio [英] Install DataTable Jquery Plugin in Visual Studio

问题描述

我下面讲剃刀查看相关jQuery的一个简短的教程，我试​​图安装数据表jQuery插件。我使用ASP.net MVC的，这是我第一次尝试安装一个jQuery插件。我有一个索引视图和我想改变使用表格中的数据表显示的插件，​​我已经下载了插件，接下来我试图复制整个插件中的脚本文件，并从我的索引视图引用jquery.dataTables，在Solution Explorer中的数据表插件文件具有色白，像展示的东西是错的。我在本教程读取使用这个插件正确的方法是使用从视图的引用，如：

I'm following a brief tutorial about Jquery associated with Razor Views, I'm trying to install the DataTables Jquery plugin. I'm using ASP.net MVC, it's the first time I try to install a Jquery plugin. I have an Index view and I want to change the table displayed using the DataTable plugin, I've downloaded the plugin already, next I've tried to copy the whole plugin in the Scripts file and reference jquery.dataTables from my Index View, in the Solution Explorer the DataTables plugin file has a color white, like showing that something is wrong with it. I read in the tutorial that the correct way to use this plugin is using a reference from the View, like:

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

我试图以这种方式和表没有修改。我想，我不是在计数明显的东西有关安装这个插件服用。

I've tried in that way and table doesn't modifies. I'm thinking that I'm not taking in count something obvious about the installation of this plugin. I've read about use BundleConfig in the App_Start folder to reference Jquery scripts and then call them from the views like this:

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

是在剃刀查看最佳实践使用BundleConfig？

Is the best practice in Razor Views use BundleConfig?

索引视图：

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

如果我手动复制目录中的文件的Visual Studio显示具有色白而不是与JavaScript的图标文件：

If I copy the files manually in the directory Visual Studio show the files with white color and not with the javascript icon:

推荐答案

添加捆绑配置如下图所示JS，

Add bundle config like below js,

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

和鉴于你使用哪一个参考添加

and add reference in view which one you use,

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

这篇关于安装DataTable的jQuery插件在Visual Studio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！