1

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.

Paul
  • 974
  • 2
  • 13
  • 37

1 Answers1

0

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>
Benjamin Ray
  • 1,855
  • 1
  • 14
  • 32
  • do I need to make any changes to: packages.config or references.js ? Does this get updated with the plugin.js that I added? – Paul Mar 16 '15 at 20:17
  • No, you don't have to update either file. _references.js is updated automatically, and packages.config contains information about NuGet packages, which this is not. – Benjamin Ray Mar 16 '15 at 20:21
  • this would be Name="mycustom" correct? – Paul Mar 16 '15 at 20:23
  • Yes, it should match the name assigned to the bundle in BundleConfig.cs. I missed that line when I changed the name in my example from "mycustom" to "my-plugin". Fixed now. – Benjamin Ray Mar 16 '15 at 20:26
  • this seems pretty straight. I'm going to be using jQuery 1.11.2 instead of jQuery 1.8.2 that is in my .NET 2.0 application. Chances are that some of the previous plugins may not run with the updated jQuery. The order that these .js were declared was important. If I need to re-order these, is this done in BundleConfig.cs or the order that it's referenced in the MasterPage? – Paul Mar 16 '15 at 20:34
  • Control the order on the master page. The order in which you add them to BundleConfig.cs shouldn't matter. Good luck with the jQuery update - I usually have good luck with older stuff on 1.11. – Benjamin Ray Mar 16 '15 at 21:38
  • You had referenced the Scripts in the Master Page via the ScriptReference. How is the CSS linked in the Master Page? – Paul Mar 17 '15 at 21:53
  • Correct, that controls where the CSS is dumped into the Master Page. In the default Master page it falls just before the favicon.ico is added. – Benjamin Ray Mar 17 '15 at 22:37
  • This was a very good question. I struggled with this exact same issue for a little while, and like you, did not find any obvious answers out there. I eventually came up with this solution and haven't found a better one yet, although I wouldn't be surprised if someone posts one here sooner or later. – Benjamin Ray Mar 17 '15 at 22:47
  • One of my CSS is importing other CSS: import url(ie8.css); import url(blocks.css); That being said, would I need to include those imported scripts within Bundle.config as well? – Paul Mar 17 '15 at 23:16
  • No need to bundle them if they're being imported, although if you have the option, I would remove the import statements from the CSS files and link them through Bundle.config. You're probably already aware of potential performance issues with import. If not, this is a good quick read: http://stackoverflow.com/questions/7199364/import-vs-link – Benjamin Ray Mar 17 '15 at 23:25
  • I definitely have that option and I did not know about the performance issue with "import" Thanks! – Paul Mar 17 '15 at 23:44
  • I have a similar question to this, if you wouldn't mind looking at it,,, regarding utilizing the minified version of bootstrap.min.js – Paul May 24 '15 at 12:43
  • I see there is already a decent answer on that other question. I have added a comment on that answer with a bit more detail. – Benjamin Ray May 25 '15 at 20:09