Visual Studio 2013 Bootstrap + Footable

Hi

VS 2013 comes pre-configured with Bootstrap 3.0 - which is super good for me as I am committed to making all my forms and pages mobile friendly from the beginning.

Today, for an application, I wanted to use the excellent footable plugin Footable plugin. After messing around with VS2013, I found this excellent article on Stackoverflow thats tells you exactly how to add a jquery or another plugin to your project.

Two steps

In bundleconfig.vb (or .cs as the case may be), add the following lines.

ScriptManager.ScriptResourceMapping.AddDefinition("footable", New ScriptResourceDefinition() With {

        .Path = "~/Scripts/footable.js",

        .DebugPath = "~/Scripts/footable.js"})

In Site.Master, reference the Definition "name" you added in the previous step

                <asp:ScriptReference Name="footable" />

In Bundle.config, reference the .css files

    <include path="~/Content/footable.core.css" />

The next step was to add all the footable plugins.  Clearly, I did not want to add a ScriptManager.ScriptResourceMapping.AddDefinitions directive/command/function call for all of them.  Here is what I did, instead

In BundleConfig.vb, I added the following function call

        bundles.Add(New ScriptBundle("~/bundles/Footable").Include(
                    "~/Scripts/footable.js",
                    "~/Scripts/footable.bookmarkable.js",
                    "~/Scripts/footable.filter.js",
                    "~/Scripts/footable.grid.js",
                    "~/Scripts/footable.memory.js",
                    "~/Scripts/footable.paginate.js",
                    "~/Scripts/footable.plugin.template.js",
                    "~/Scripts/footable.sort.js",
                    "~/Scripts/footable.striping.js"
                    ))

And I deleted the previous line from BundleConfig.vb - that I added previously

Then, in Site.Master, at the very top, I added the second line to the asp:PlaceHolder directive

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
        <%: Scripts.Render("~/bundles/Footable") %>
    </asp:PlaceHolder>

That is it.  You can add any jQuery plugin to your ASP.Net project this way and have all your project elements in standard places for VS 2013.

Cheers