2

Ok I've been using jQuery for several years now and know how to write code using it. For years I would download the current minified scripts from jQuery and reference in my Master page or the like.

Well in VS.NET 2012 (and 2010 as well I believe), the web forms project template convienently provides a ton of the jQuery scripts and even CSS classes. Normally I don't have to add any additional references and intellisense works great.

Recently I wanted to use a jQuery Message Dialog which requires jquery-ui.css The site tutorial makes reference to the CDN location, so to get it working I added the following:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

The thing is the project by default already has this file under the following location:

~/Content/themes/base/jquery-ui.css

However, when I removed the CDN link reference to the css file the modal lost it's styling. I figured since those scripts are already in my application I didn't need to explicitly reference them. However, if I remove the CDN reference and explicitly reference the css file, it will work:

<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />

So I need an education here please. Is the ASP.NET webforms project just providing all the scripts and styling, but only referencing some of the files? I see the following (2) inside the ScriptManager reference:

<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />

Is that taking care of the reference to the main jquery-2.0.3.js files for me, since I have never had to reference it explicitly? Why did I have to explicitly add in the reference to jquery-ui.css even though it's a part of the project? I need to organize how VS.NET and ASP.NET are managing these files, so I'm not guessing and understand how they are being referenced or not referenced please.

MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
atconway
  • 20,624
  • 30
  • 159
  • 229
  • 1
    Just because the files are there, doesn't mean you are referencing them. You need to look in the `BundleConfig.cs` to see the different bundles it is creating, and then ensure you are referencing those bundles. – MikeSmithDev Oct 03 '13 at 18:23
  • @MikeSmithDev - Thank you, that appears to be what I was questioning. I needed some in depth explanation of how this is all organized and working. – atconway Oct 03 '13 at 18:41

1 Answers1

2

Visual Studio 2012 introduced Bundling and Minification, which is what you're asking about. The following articles will explain the features, and show you how to take advantage of them in a web forms project.

James Johnson
  • 45,496
  • 8
  • 73
  • 110
  • Those articles are great, thank you James. So my inclination that I will have to add these files explicitly to be bundled and minified via the 'BundleConfig.cs` file is required? – atconway Oct 03 '13 at 18:39
  • 1
    Yes, you will need to specify the files to be bundled, but you can use wildcards to match several files. – James Johnson Oct 03 '13 at 18:46
  • 1
    NOTE: if you want to use the cdn versions, you can just remove it from your project completely and add the CDN references to your master pages, or include links in your content pages if you have a head section... You should also avoid using jQuery 2.x and stick with the 1.9.x branch, unless you're ok with dropping IE8 and earlier support. – Erik Funkenbusch Oct 03 '13 at 18:57
  • @MystereMan - WOW! Inadvertently, you may have just answered another question of mine about IE8 acting funny. Didn't realize `jQuery 2.x` caused that. http://stackoverflow.com/questions/19007950/how-to-force-intranet-sites-browser-into-ie8-quirks-mode – atconway Oct 03 '13 at 19:03