Add an ASP.NET script server to basically static .JS / .CSS files without losing IntelliSense?

Question

Using VS2008 and ASP.NET 3.5 (or VS 2010 / .NET 4.0?), How can I add some dynamic server-side code to ASP.NET in mostly static JavaScript and CSS files?

I want to do this in order to avoid cloning all JS or CSS files, so that only a small fraction of their multi-tenant sites will vary. Later I want to expand the solution for handling localization inside javascript / CSS, support for dynamic debugging / tracing and other interesting things that you can get by dynamically injecting stuff into JavaScript and CSS.

The tough part is that I don't want to lose all the cool stuff you get with static files, like this:

• JS / CSS code and intellisense coloring
• CSS "go to definition" CSS class support in the IDE
• automatic HTTP caching headers based on main file date
• automatic compression using IIS

The reliability of static files on the server side (for example, headers / compression) can be falsified through HttpHandler, but maintaining IDE support (intellisense / coloring / etc) causes me a dead end.

The ideal solution meets the following requirements:

• VS IDE provides JS / CSS intellisense and code coloring. Failure to intellisense server code is fine, as server code is usually simple in these files.
• "go to defintion" still works for CSS classes (as in static CSS files)
• send HTTP caching headers, varying by the date the base file was modified.
• HTTP compression support, like other static files
• support for <% =%> and <script runat = server> code blocks
• URL paths (at least those seen by HTTP clients) end in .JS or .CSS (not.ASPX). If desired, I can use querystring or PathInfo for parameterization (for example, choosing a locale), although in most cases I will use vdirs for this. Caching should be different for different requests.

So far, the best (hacker) solution I came up with is the following:

• Switch the basic CSS or JS files to .ASPX files (e.g. foo.css.aspx or foo.js.aspx). Paste basic static content into the STYLE element (for CSS) or the SCRIPT element (for JS). This allows you to use JS / CSS intellisense, and also allow inline or runat = blocks of server code.
• Write an HttpHandler that:
  • looks at the url and adds the .aspx parameter to find out how to use ASPX correctly to call
  • uses System.Net.HttpWebRequest to call this URL
  • removes STYLE or SCRIPT tags, leaving only CSS or JS
  • Adds appropriate headers (caching, content type, etc.).
  • compresses the response if the client supports compression
• Map * .CSS and * .JS for my handler.
• (if IIS6) Verify that the .JS and .CSS file extensions are associated with ASP.NET

I already use a modified version of the Darick_c HttpCompression Module , which handles almost all of the above for me, so modifying it to support the solution above will not be too complicated.

But my decision is hacky. I was wondering if anyone has an easier approach to this problem that will not lose Visual Studio Q-factor.

I know that I can also hack a client-side solution in which I separate all JS and CSS into files “different” and “will not change”, but there is performance and maintenance overhead of such a solution I would like to avoid. I really want a server solution here, so I can support one file on the server, not N + 1 files.

I have not tried VS10 / .NET 4.0 yet, but I am open to Dev10 / .net4 if this is the best way to get this script to work.

Thanks!

Answer 1

I dealt with a similar problem if the main page displays a dynamically generated JSON object in the footer of each page.

I need my js popup login dialog to support localization. Therefore, using JSON.NET for serialization, I created a property of the public key / value of the collection of the main page, access to which the page could get as key / location values, for example, key-phrase / localized phrase pairs. The main page then displays a dynamic JSON object that contains these values ​​so that static js files can reference these dynamic values.

For the js input window, I have a main page setting localized values. This made sense because the main page also contains the login.js file.

Answer 2

I thank you for your concern about the number of HTTP requests made from the client and the payload returned. Too many people I know and work with do not notice these simple optimizations. However, at any time when I come across the same question that you have (which is actually quite common), I find that I usually either made a mistake or try to solve the problem incorrectly.

As for your JS question, I think Frank Schwieterman in the comments above is correct. I would look at ways to expose the dynamic parts of your JS through setters. In fact, the main example might be if you want to display a customized welcome message to users when they log in. In your JS file, you can open the setMessage (message) method. This method will then be called on the page, including the script. As a result, you will have something like:

<body onLoad="setMessage('Welcome' + <%= user.FirstName %>);"> 

This, obviously, can be expanded by passing objects or methods to a static JS file so that you can perform the necessary functions.

In response to the CSS question, I think you can get a lot from Sean Steward's approach from the comments, which gives a good rating. You can define specific static parts of your CSS in a base file, and then override the parts you want to change in other files. As a result, you can dictate the look of your site with which you include files. In addition, since you do not want to use hits for additional HTTP requests (keep in mind that if you install these files for caching for a week, a month, etc., this is a one-time request), you can do something like Combining CSS files into one file at compile time or at run time.

Something like the following links might help you point in the right direction:

http://geekswithblogs.net/rashid/archive/2007/07/25/Combine-Multiple-JavaScript-and-CSS-Files-and-Remove-Overheads.aspx

http://www.asp.net/learn/3.5-SP1/video-296.aspx?wwwaspnetrdirset=1

http://dimebrain.com/2008/04/resourceful-asp.html

Using a combination at runtime or compilation, you can get the best out of the world by allowing you to logically separate CSS and JS files, but also by reducing the payload and queries associated with compressing and combining files.