Implement jQuery Plugin in Visual Studio 2013 Project

Question

I created a new ASP.NET Web Forms project in Visual Studio 2013. This installed jquery-1.10.2.js by default.

I used the Package Manager Console to Install-Package jQuery -Version 1.11.2 because the Manage Nuget Packages only offered Nuget 2.1.3 by default. I needed the earlier jQuery.

I have been using VS 2010, and I'm completely not familiar with the new ASP.NET 4.5 ScriptManager. With VS 2010 for jQuery Plugins, you simply reference the .js and .css in the head section of the Master Page.

<head id="Head1" runat="server">
   <link href="css/colorpicker.css" rel="Stylesheet" type="text/css" />
   <script type="text/javascript" src="js/colorpicker.js"></script>
</head>

With ASP.NET 4.5 I'm a little unclear about how to add a 3rd party jQuery Plugin, because it appears that all of the .js files are implemented via the ScriptManager, not simply referenced within script tags in the head section.

My Google research: "install jquery plugin in visual studio 2013 web form" has found issues dealing with: the Nuget Package Manager, Installing jQuery, or Visual Studio Extensions.

I haven't found anything that clearly explains how to add 3rd party jQuery Plugins to the ASP.NET Web Forms application with Visual Studio 2013.

Here are the js references in my newly created Master Page in VS 2013:

     <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

This new VS 2013 Web Form Project also has: packages.config, references.js, BundleConfig.cs

I would really appreciate your guidance.

Benjamin Ray Benjamin Ray · Accepted Answer · 2015-03-16T19:59:14

I usually add custom scripts in their own bundle under BundleConfig.cs in the /App_Start folder as follows:

ScriptManager.ScriptResourceMapping.AddDefinition(
    "my-plugin", new ScriptResourceDefinition {
        Path = "~/Scripts/my-plugin.min.js",
        DebugPath = "~/Scripts/my-plugin.js",
    }
);

Then you can reference the bundle in the ScriptManager in your Master Page (after the jQuery ScriptReference) like this:

<asp:ScriptReference Name="my-plugin" />

This allows you to use different .js files for debugging vs production. If you only have one script version, then I believe you can simply omit the DebugPath line.

If the plugin requires the addition of any CSS files, they can be added to Bundle.config as follows:

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <!-- ...other files likely included here -->
    <include path="~/Content/my-plugin.css" />
  </styleBundle>
</bundles>

Implement jQuery Plugin in Visual Studio 2013 Project

1 Answers