VS.NET - Designer's "Best" Friend

With the advent of Visual Studio.NET the landscape of developer tools has changed significantly. The bar for quality of these tools has been raised. Web developers have been empowered with a powerful addition to their toolset. I have yet to meet someone who misses the old Interdev with its clumsiness and many corks. Nevertheless, as any evolving product, VS.NET 2003 (the latest version as of the time of this writing) has several features that make no sense. They can truly give you a hair-pulling experience. Here they are...

Beware Of The CSS Source Editor

VS.NET provides what seems at first sight a helpful feature—CSS Source Editor. Simply add a CSS file to a web project and double click it. Unless you change the defaults the file will be displayed in the built-in CSS Source Editor. Compared to other professional tools out there, such as Dreamweaver, TopStyle and the like, it offers very little: a CSS outline panel with elements, classes, element IDs grouped for your convenience, and the ubiquitous IntelliSense (whose accuracy I question).

So what’s the problem? Let’s walk through an exercise. Add a bogus definition:

p {
   border: 1px solid #000;
}

This declaration adds a 1px black border around every paragraph tag. Now right click on the border definition and select "Build Style...". Nice! A dialog box with a multitude of options to visually tweak the style declaration! With or without changing anything click Ok. Voilà! VS.NET gives you a hand by formatting the border declaration for you:

p
{
  border-right: #000 1px solid;
  border-top: #000 1px solid;
  border-left: #000 1px solid;
  border-bottom: #000 1px solid;
}

Now, this is where a nagging question comes to my mind: who in sane mind would want to expand a compact shortcut property into full property definitions? Unless you want to change the border color or width you wouldn’t do it.

The moral of this story is use the Property Builder at your own risk as it has the tendency to destroy your CSS. I’ve looked through all settings related to it and couldn’t find a way to stop the CSS Source Editor from messing up my stylesheet.

There’s a way out though. If you own a copy of Dreamweaver, TopStyle or any other CSS editor you may want to associate CSS files with it. Right click any CSS file, select "Open With...", click "Add...", locate an appropriate executable, and give the association a friendly name. Once you’re done select it in the "Select a program to open:" list and click "Set as Default". Now every time you open up a CSS file from within VS.NET your own CSS editor will pick it up.

Beware Of The HTML Designer View

This one is outrageous. If you use VS.NET much I’m sure you’ve run into it. Add a web form to a web project. Switch to the HTML view, add some controls by hand. Then switch into the Design mode. Aaaaaaah. You fell for it too! Now switch back to the HTML view and behold the crippled HTML. This is especially aggravating if you have a large page with a bunch of controls and you spent so much time carefully indenting them and making sure all tags were lower case. But instead you get "smart formatting" applied for you. This is twice is aggravating if you’re laying out XHTML because VS.NET capitalizes tags (WHY???) and replaces inline styles with element attributes:

<asp:Label id="lblTest" Runat="server" style="width:100px;" />

becomes

<asp:Label id="lblTest" Runat="server" Width="100"/>

This is a very simple example but you get the point.

I can’t even count how many times people in user groups would cry for help asking how to turn this feature off. You rush to Tools->Options->HTML/XTML and disable everything under "Apply Automatic Formatting". Still no dice. The bad news you can’t turn this feature off. It just doesn’t work. The only solution that I know of is to select Undo, or press CTRL-Z, right after you switch from the design view to the HTML view. It almost seem like VS.NET executes this extra step that messes up the markup. Better yet, if you were lucky enough to have the page in VSS, roll back the changes.

I don’t understand why there has never been a service pack for VS.NET to address this bug. It’s such an essential feature but you are forced to resort to copying your markup into Textpad and then back to preserve formatting if you need to switch to the designer for a second. Absurd.

The good news the upcoming reincarnation of VS.NET code-named "Whidbey" will be void of this bug. Both Scott Guthrie and Scott Louvau said so.

I remember hearing back in 2000, at the beginnig of days of ASP.NET, that VS.NET allowed to separate the jobs of developers and designers thanks to the code-behind feature. Code-behind is really great, but if you are a web designer and you do use VS.NET for layout in your line of work drop me a line, please.

There's a reason that there hasn't been a service pack to fix this. It's a ton of work because of the shortcuts that MS used. There's a ms blog somewhere where they describe the problem and what it would take to fix.

This ordinarily isn't a problem for me

I typically build the page in Dreamweaver (MX 2004... although I daren't touch their "Server Behaviours") then just copy the XHTML1.1 into VS.Net and add all the controls and functionality by hand

Granted, there are one or two occassions where I need to use the "Design View", but I get around this by creating a dummy file and getting VS to generate the code for that, before copying it over to the final XHTML version

Besides, any serious web developer shouldn't use any Microsoft IDE for web-development... if my experiences with FrontPage and InterDev are anything to go by, why else did Microsoft introduce the concept of "codebehind"? ;)

MS is aim is to force people to buy vs 2005.... we paid alots of money in the past for vs 2003. why should we pay more for vs 2005.
i know vs 2005 has great new feature but M$ should not force anyone to imgrate from vs 2003 to vs 2005 because of this silly bug.(Apply Automatic Formatting doesn't work and it won't work in the future because M$ is wants you to pay more money to get this bug fixed.)

so the solution is to buy vs 2005, which is very silly thing

interesting to learn in competition.

Easy way to get rid of HTML Designer when developing ASP pages: normally you inherit your classes from Page or UserControl or something like that. That allows designer to open your files and mess with your code. But there is an easy way to "crash" designer in such a way that it cannot open and display your as?x files and opens normal editor instead. In shortcut: derive your codebehind classes from abstract class. That's how:
1. Use codebehind. This splits your page/control into 2 files: first with presentation layer (tags) and second with logic (code). We want to avoid designer messing with first file containing tags.
2. File with logic contains class declaration. In case of aspx file this class inherits from Page, ascx - from UserControl, and so on.
3. Create class DummyPage: abstract class DummyPage : Page { /*blah*/ }. Instead of inheriting from Page, inherit from DummyPage. In case of control inherit from UserControl or something.
4. Voila! Try to open your file in designer. It spits "Type Abstract" error, and opens your file in editor. No unwanted formatting!

Jfk - that was amazing. I spent all last night looking for a solution to this issue which I assumed must be something that gets experienced by everyone sooner or later.

I had just restructured the page templates to make them inherit the re-usable bits from a base class etc. and found that design view was automatically redeclaring the user control variables again in the subclass (the aspx.cs) and, of course, this means that the solution would not build. Removing the automatic declarations means the project would build and work - but what a pain to have to keep removing the declarations after each design view switch (whether accidental of intended).

Anyway, making the base class abstract did exactly as you said it would and although it will still open the aspx in design view it no longer messes up the aspx.cs.

I imagine care must now be taken when using the design view on the aspx since I imagine it won't work correctly (I don't want to test that just yet!).

Thanks again :)

Regarding "Beware Of The HTML Designer View"
I use the CTRL+S "solution"

I have no problem whatsoever with typing without VS changing:

This feven fixes the indenting (auto-"fix"-problem)

IF (big if); IF I save the file before switching between HTML- / Design- view

So without even looking at the link with MS stating that it would be difficult to "fix"; a very very simple solution pherhaps? would be to autosave the actual file when users switch between HTML / Design view.

===================

I find it amusing although that the VS-environment produces different attributes depending if you write it yourself, or drag n drop it.

Consider the following:

By hand:


By drag n drop:
Label

Notice the ID / id; Runat / runat *lol*

I hope this was helpfull to you!

I do HTML, CSS and JavaScript. You can imagine my delight when I discovered this "feature" of Visual Studio.NET back in 2003.

I'm now trying to learn more about ASP.NET, so that I be more useful trying to make .NET sites more standards-y instead of just yelling at C# programmers. I'm glad I'll be working on Visual Studio.NET 2005. That is, assuming, it's changed this "feature" :)

Very nice to have this summary of the issue, and suggested workarounds.