Install DataTable Jquery Plugin in Visual Studio

问题:

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

Is the best practice in Razor Views use BundleConfig?

Index view:

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

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

回答1:

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