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.

Improve this question
2
  • 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. Commented Oct 3, 2013 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. Commented Oct 3, 2013 at 18:41

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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?
Yes, you will need to specify the files to be bundled, but you can use wildcards to match several files.
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.
@MystereMan - WOW! Inadvertently, you may have just answered another question of mine about IE8 acting funny. Didn't realize jQuery 2.x caused that. stackoverflow.com/questions/19007950/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.