Microsoft Ajax Enabled Web Site Organization Patterns

Lately I have been writing a lot of code utilizing the Microsoft Ajax framework. This means that I am writing "Ajax Services" to handle my asynchronous callbacks. Ajax Services is a term I heard from Rob Bagby which emphasizes the fact that while these services are generally in a .asmx file and the methods are decorated with the [WebMethod] attribute, they are not really web services. They are a special form of service made just for Ajax callbacks. This additional file has got me thinking lately about how I can organize the files in my web site so that it doesn't get too cluttered.

Let me start off by saying that this post is just a diary of my thoughts and I don't really think I have found the best solution yet. That is why I am putting this out there to see how others are approaching this situation.

In extreme cases, I can have four different separate files (6 if you count the code behind file) for just one page. Typically, you have one javascript file and one css file per website but I have found this to just be too cumbersome lately. I find that my css and js files just become too cluttered and hard to maintain. So I end up with:

• .asmx - Contains the WebMethods for my ajax callbacks
• .aspx - Contains the layout for my page in typically Asp.Net fasion
• .css - Contains the style definitions for the page layout
• .js - Contains the javascript methods which typically respond to events on my page and make callbacks to my ajax services.

So now lets look at a folder on the website which has 3 different pages - a very typical scenario.

This layout quickly becomes unwieldy in its own way. All of the sudden your solution explorer view of your site becomes very hard to navigate and it becomes difficult to maintain the references to all those files. Now if I have a very simple page which has no need for any ajax callbacks or custom css mixed in there, It sort of gets lost in the shuffle

See how your eye can easily miss the 'MyPage2-Simple.aspx' page?

A Better Way?

Another idea I had was to have one folder per page which would look like:

This is a little better but it is still cluttered. Just for completeness, lets look at our site with only one js, css, and asmx file.

While this definitely looks a lot cleaner, it also has a code smell of it's own. Imagine what our common files (js, css, asmx) must look like. They have the code from 3 separate pages all thrown in together.

The last idea I will throw out there is to put each file type in its own folder.

I also like this better than most but it breaks down pretty quickly when you have your web site organized into many folders. Do you keep the script, service, and style files in the root folders or do you have a Script, Services, and Style folder for each sub folder?

Like I said earlier, I haven't really found a solution that I think is best. Currently, I am trying to organize my project by having each action in its own folder and within these folders I put all the extra files (style, script, or callbacks).

How do you organize your web sites? How do you non Asp.Net people organize yours?