Organising JavaScript files in ASP.NET applications.

Last night I was playing around with the new Virtual Earth V6 map control. I haven’t done a lot of work with Virtual Earth before but I really want to get familiar with it because – well, basically it is cool.

I enlisted Darren’s help to steer me in the right direction if I had any problems and he suggested splitting my JavaScript code out into a separate file, for example in the ~/js/default.aspx.js file for JavaScript associated with Default.aspx.

It was a good idea, but I kinda wanted symmetry with the server-side code behind experience so that I could take this:

image

And turn it into this:

image

The first step is to move the Default.aspx.js file into the same folder as the Default.aspx file, then right mouse click on the web project and select "Unload" (note that this technique only applies to Web Application Projects – but why would you use anything else?).

image

Once the file is unloaded you can directly edit the *.csproj (or *.vbproj) file by right mouse clicking on it in the IDE (a lot of people don’t know about this little trick actually.

image

Once the file is cracked open scroll down to the ItemGroup containing the Default.aspx.js file:

image

You need to modify the text here so that the IDE knows to nest the file under the Default.aspx file. You do this by adding a child DependentUpon element:

image

Once that is done, reload the profile file using the context menu and you should be away!

image 

I think that this technique will lead to a more obvious file structure, and hopefully the ASP.NET team will adopt something similar in future versions of Visual Studio. I have been using Visual Studio 2008 for some time now and love it! Can’t wait until the end of the month.

5 thoughts on “Organising JavaScript files in ASP.NET applications.

  1. Eber Irigoyen

    this is funny, just a couple hours ago a co-worker asked me if it was possible to do exactly what you just blogged, I told him I was sure it was possible but hadn’t seen anything like that, now I know how

  2. Jamal

    There is a simpler method by editing the registry which will save you the hassle of unloading the project every time you add a .js file. Save the following text in a .reg file and import. These 3 values effect C#/VB/Web projects respectively.

    Windows Registry Editor Version 5.00

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Projects\{FAE04EC0-301F-11d3-BF4B-00C04F79EFBC}\RelatedFiles\.aspx]
    “.js”=dword:00000002

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Projects\{F184B08F-C81C-45f6-A57F-5ABD9991F28F}\RelatedFiles\.aspx]
    “.js”=dword:00000002

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
    @=””

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s