Spontaneous Publicity
blogs are the new phone book

Microsoft Ajax Enabled Web Site Organization Patterns

August 1, 2007 03:12 by Luke

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.

Too Many Files

File Orginization 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.

Too many files!

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

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:

Is this better?

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.

Cleaner?

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.

Grouped Together

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?


Tags:
Categories:
Actions: E-mail | del.icio.us | Permalink | Comments (43) | Comment RSSRSS comment feed

Comments

August 1. 2007 06:11

Chad


          I tend to use a combination of the last example, as well as using just one "main" css and js file.  I say "main" because like you said... having everything in one file just doesn't make sense sometimes.  However, I've been starting to apply CSS styles to specific tags lately, rather than just creating tons of classes - which makes me put a little more thought into what tags I do use.  Do you have at least one "main" css file?  I would think that changing basic things like the font color or size for the whole site would be harder than it needed to be if you didn't.

          Anyway, I take the same approach for the JS file.  Usually, after a bit of refactoring, I can get my JS functions down to a few that are used a lot.  I put those in the main JS file that's included on every page - then the page specific ones either go inline on the page (if the script is small enough) - or in a separate file which then goes into the "scripts" folder.
        

Chad

August 9. 2007 06:35

Matt


          Why would you have one css file per page? That seems to really go against what css is about. If your pages share a common design and theme, they should share common stylesheets as well. That way you can update your styles in one place and the entire site updates with it, support themes, etc. I typically break my css up based on its function. something like structure.css, colors.css, tables.css, superCustomWidget.css, etc etc. If I want my entire site to gain a new color scheme, a quick edit of color.css and voila!

          Really the same thing can be said about javascript. I think it's better to have common and base functionality in one file that all pages reference and only specific js as needed.
        

Matt

August 9. 2007 07:11

Luke Foust


          Matt - I agree that css has mostly global consistency implications for a web site. On the other hand, if you have to position a specific element on a page and it is only applicable to that page, then it only clutters up the sites main css files IMO. Basically, you have 3 choices:

          1. embed the css into the page
          2. include it in its own css file
          3. include it in the global css files for the site

          Like I mentioned in my article, I still have not settled on a way to deal with this issue that I feel is the best way. I have tried keeping all my css in one place and I find that it becomes hard to maintain.

          What do you guys do with these "one off" css rules? What about javascript that is just used on one page (usually, to manage hiding and showing specific elements and wiring up events to callbacks)?
        

Luke Foust

August 9. 2007 16:22

Joel Ross

Personally, the first approach to me is the most logical. Keep the site organized the way you would ideally do it, and then "bend" the tool to make it easier for you. if the only complaint is how it looks in Visual Studio, then change how it displays the fiels. You can edit the project file and make Visual Studio treat all of your supporting files (.css, .js. asmx, etc.) appear as sub-nodes to the parent .aspx file. See here for details: mikehadlow.blogspot.com/.../...pendentupon-in.html

Joel Ross

August 10. 2007 06:27

Pete

I use the last example.   If I put the Javascript in a file, it is because I am going to use the JS on several pages.   For my css I like to have the same look and feel on most pages so again it is rare to have more that 2-4 css files.   I do have more ASMX files but again it is not a page to page relaionship.   For these three types of files,  the name is not base on the page name.   It is more related to the subject mater in the file.   Default.css,   MathUtils.js,  ImagePlayer.asmx

Pete

August 28. 2007 06:22

Martin H. Normark

Why don't you make your page implement the ICallbackEventHandler interface? That saves you from making a webservice/scriptservice for each page... You know what I mean?

Martin H. Normark

October 10. 2007 10:48

Joshua Barker


          I always try to build and group my resources (javascript, css, services) based on scope and functionality.

          So, each application under a web-site contains css, javascript and services folders specific to itself, while the root contains versions of these folders for files that are common to all.

          Within each resource folder, I try to group the actual code into files based on common functionality and use filenames that clearly state each files purpose (ie: AjaxManagement.js, Popups.css, ReportingServices.asmx, etc...).

          I find that over time, as the web-site grows and evolves, that two or more applications will invaribly end duplicating each other's functionality.  This means that I have to periodically review my design and identify the common aspects that can be refactored and moved to the root level.

          Ex:
          Root Folder
          |
          |-javascript
          |    |- g_AjaxFunctions.js
          |    |- g_ValidationFunctions.js
          |
          |-css
          |    |- g_Headers.css
          |    |- g_Popups.css
          |    |- g_Grids.css
          |
          |-services
          |    |- g_Transactions.asmx
          |    |- g_Reporting.asmx
          |
          |-Application_1
          |    |
          |    |-javascript
          |    |    |- app1_Build_Forms.js
          |    |    |- app1_JSON_Controls.js
          |    |
          |    |-css
          |    |    |- app1_Wizbang.css
          |    |    |- app1_Examples.css
          |    |
          |    |-services
          |    |    |- app1_SlowServices.asmx
          |
          |-Application_2
          |    |
          |    |-javascript
          |    |    |- app2_XmlUtilities.js
          |    |
          |    |-css
          |    |    |- app2_Financials.css
          |    |
          |    |-services
          |    |    |- app2_FastServices.asmx

          ... etc
        

Joshua Barker

July 16. 2010 02:16

laser eye surgery

I’m going to bookmark this as inspiration and send visitors from my website. I’ve just put up additional new ideas too, so I will add a link to your post (if OK) on my site?

laser eye surgery

July 17. 2010 14:09

How To Get Rid Of Cellulite

Hey ...cheers for the well written article.I'm really happy I found it on bingKeep up the great work because I for sure will visit for updates

How To Get Rid Of Cellulite

July 20. 2010 08:33

sex webcams

I do not think I can pronounce in any way now, waiting for someone else to comment before me

sex webcams

July 25. 2010 23:33

warning labels

Child custody  cases hairstyles  http://carlos676wilkins.hpage.com    are frequently complicated . hairstyles http://www.frackdesigns.com As a  family lawyer , I frequently see other  collegues  hairstyles http://www.frackdesign.com  billing  concerned parents tens of thousands of dollars which destroys marital assets. My minimum retainer for a  custody fight  is hairstyles http://joico-hairstyles-tips.blog.friendster.com  $30,000  because hairstyles http://www.smartmarklabels.com  of the insane delaying tactics practiced by others .  Almost always , hairstyles http://carlos676wilkins752.webs.com one  parent hairstyles http://joico-hairstyle-tips.wetpaint.com  will  start  allegations of  http://joicohairstyletips5244.shutterfly.com  in order to hairstyles http://carlos676wilkins.bravejournal.com  win .  Recently, I hairstyles http://www.rfidsmartmark.com have been  recommending that  my clients try mediationhairstyles http://carlos676wilkin.insanejournal.com    which typically only costs hundreds of dollars .  Many local judges have been hairstyles http://www.williamfrick.com  agreeing with  my efforts as well.  If  there is   anyone  would like to  see  more about other, like-minded, localhairstyles http://joico-hair-advice.ning.com , please see this website.

warning labels

July 28. 2010 21:06

natural cures for bacterial vaginosis

Brilliant article, a bunch of useful information and facts.

natural cures for bacterial vaginosis

August 6. 2010 14:38

sex cams

Good topic. Your blog provided me with valuable information to help me get started my own blog in this branch. I will continue to watch. Thanks!<a href="http://www.naughtywebcamsex.com" title="Webcam Girls">Webcam Girls</a>

sex cams

August 6. 2010 17:45

Naughty Webcam

I am a new visitor of this blog, I like the information found here. I watch your topics every day. <a href="http://www.naughtywebcamsex.com" title="Webcam Girls">Webcam Girls</a>

Naughty Webcam

August 10. 2010 16:06

Dawna Sally

Impressive article, a lot of superior material.  I'm going to point out to my girlftriend and ask them the things they think.

Dawna Sally

August 15. 2010 14:39

Carmella Balaski

Hi, possibly i’m being a bit off topic here, but I was browsing your site and it looks exceptional. I’m making a blog and trying to make it look clean, but everytime I touch it I mess something up. Did you design the blog yourself? Could someone with little experience do it, and add updates without messing it up? Anyways, good information on here, very informative.

Carmella Balaski

August 17. 2010 04:20

clicks money

Thanks for the terrific details.

clicks money

August 17. 2010 22:52

usb data transfer cable

Pretty good post. I just stumbled upon your blog and wanted to say that I have really
enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you
post again soon.?

usb data transfer cable

August 21. 2010 00:19

chanel shoulder bag

  For these three types of files,  the name is not base on the page name.

chanel shoulder bag

August 22. 2010 16:37

Dane Nylander

Good story! I have been looking for this information all around. This is was I looking for.

Dane Nylander

August 22. 2010 17:28

gfx forum

Great post for us coders, thank you for posting it! Cheers!

gfx forum

August 24. 2010 02:56

Rapidshare Downloads

Appreciate for the wonderful information.

Rapidshare Downloads

August 25. 2010 03:57

NFL Football Jerseys

If I speak in the Cheap Authentic NFL Jerseys tongues of men and of angels, but have not love, I am only a resounding gong or a clanging cymbal. If I have the gift of prophecy and can fathom all mysteries and all Official NFL Jerseys knowledge, and if I have a faith that can move mountains, but have not love, I am nothing. If I give all I possess to the poor and surrender my USA Jerseys Shop body to the flames,but have not love, I gain nothing.Love is patient, NFL Jerseys love is kind. It does not envy, it does not boast, it is not proud. It is not rude, it is not self-seeking, it is not easily angered, it NHL Jerseys keeps no record of wrongs. Love does not delight in evil but rejoices with the truth. It always protects, always trusts, always MLB Jerseys hopes, always perseveres.Love never NHL Hockey Jerseys fails. But where there are prophecies, they will cease; where there are tongues, they will be stilled; where there is knowledge, it will pass away. For we know in part and we prophesy in MLB Baseball Jerseys part, but when perfection comes, the imperfect disappea. When I was a child, I talked like a child, I thought like a child, I reasoned like a child. When I became NBA Basketball Jerseys man, I put childish ways behind me. Now we see but a poor reflection as in a mirror; then we shall see face to face. Now I know in part; then I shall know fully, even as I am fully known.And now these three remain: faith, hope and NFL Football Jerseys love. But the greatest of these is love. http://www.jersey-usa.com/sitemap.html LIJ

NFL Football Jerseys

August 28. 2010 03:18

Elsy Dembo

why not posting more?

Elsy Dembo

August 28. 2010 04:11

Karly Hirshberg

nice blog... why don't you post more?

Karly Hirshberg

August 28. 2010 22:15

Desmond Brandstetter

do you have an rss feed? I want to add it to my reader but I can't find it...

Desmond Brandstetter

August 29. 2010 00:12

dating affiliates

hey, with so many comments you should add an affiliate program to your blog and make some money...

dating affiliates

August 30. 2010 03:02

seduction affiliates

you may make some money if you add an affiliate program to your blog...

seduction affiliates

August 30. 2010 09:51

funny blonde jokes

how can I advertise on your blog?

funny blonde jokes

August 31. 2010 04:16

blonde joke

nice blog! keep the good work!

blonde joke

September 1. 2010 03:17

st petersburg

Watsup,    I totally coincide with your article. Mine and my wife's PC run so much better with it done. It's unbelievable how much such a small task can make such a huge differance. At first I was hesitant about trying it out, but thanks to your post my worries was put to bed. donkishire (germany for thanks)

st petersburg

September 1. 2010 17:46

hair extensions

great blog thanks for this information

hair extensions

September 2. 2010 06:37

ETF newsletters

it will be great if you post more...

ETF newsletters

September 2. 2010 16:53

Elton Tailor

i'm adding your blog rss feed so that i can see your new posts.  keep up the good work!

Elton Tailor

September 2. 2010 19:21

Corporate Clothing

I must say that mens corporate clothing needs are very different, but who is to say a man wearing a blouse is wrong?

Corporate Clothing

September 3. 2010 11:51

gift ideas

try to change your template, there are some great ones...

gift ideas

September 3. 2010 15:10

seduction tips

do you have a xml feed for your blog?

seduction tips

September 4. 2010 17:26

dating tips

how old is this post?

dating tips

September 5. 2010 03:58

Fat Loss 4 Idiots Review

I just found this cool blog post and I should say to you thank you very much for giving this one to us.

Fat Loss 4 Idiots Review

September 5. 2010 07:42

bentonite clay uk

Extremely inspiring. It's amazing what can be done when we put our minds to it.

bentonite clay uk

September 7. 2010 02:47

electronic cigarette

Come on guys, let's keep it clean. This is a good blog. Good info mate.

electronic cigarette

September 7. 2010 04:26

Carpet Cleaning Philadelphia

I really enjoy the blog.Really looking forward to read more. Much obliged.

Carpet Cleaning Philadelphia

September 8. 2010 23:16

Kim Kardashian

are you a Kim fan?

Kim Kardashian

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading