Last week I was doing 2 days of training for my West Wind Web Connection product. The tool is a continuation of a long running FoxPro Web development tool that also integrates with Visual Studio and uses the same designer layout and markup features that ASP.NET uses. So although the product is based on FoxPro, the design time process is essentially similar to ASP.NET in that I use Visual Studio for layout of HTML and controls.
During the course of the two days of training I was having major, major problems with the Visual Studio ASP.NET Visual Designer which – gulp – actually came as a bit of a surprise to me. Normally when I do my own development I tend to use only the markup editor as opposed the visual designer. But during training for new developers a visual approach and using the designer is easier to understand and much more visual to follow when working through samples for two days straight. Unfortunately this backfired for me this time and I ended up doing most of my coding in markup anyway because the designer just kept on mangling my code.
Needless to say this was an embarrassing experience and these non-.NET developers walked out of the training less than enthused about Visual Studio 2008. In fact many of the VS 2008 designer enhancements I've been pointing out where just lost under the mountain of problems. I ended up doing most of my demos with only markup which is the way I usually work but saying that "this is a better way anyway" doesn't really go over so well <s>.
The Mangler
After I got back tonight I sat down and tried to isolate the particular problem that appears to cause the problem with HTML mangling and I think I have isolated the issue which is due to some tag content I use in my <head> tag – specifically <asp:Literal> (actually a custom Literal control <ww:wwWebLiteral>) control.
The problem is actually quite easy to duplicate at least for me with the following page code:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="westwind.css" rel="stylesheet" type="text/css" />
<asp:Literal ID="WwWebLiteral1" runat="server" Visible="false">
<script src="~/scripts/jquery.js" type="text/javascript"></script>
<script src="~/scripts/ww.jquery.js" type="text/javascript"></script>
</asp:Literal>
</head>
<body>
<form id="form1" runat="server">
<h1>Hello World</h1>
<div class="containercontent">
<asp:Label ID="lblName" runat="server" ControlSourceMode="OneWay" />
<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnSubmit" runat="server" width="80" Text="Say Hello" />
<hr />
<asp:Label ID="wwWebLabel2" runat="server" />
</div>
</form>
</body>
</html>
which is unceremoniously turned into the following mess after activating the designer making a few changes and saving with the designer active:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="westwind.css" rel="stylesheet" type="text/css" />
<asp:Literal ID="WwWebLiteral1" runat="server" Visible="false">
<script src="~/scripts/jquery.js" type="text/javascript"></script> <script src="~/scripts/ww.jquery.js" type="text/javascript"></script> </asp:Literal>
</head>
<body>
<form id="form1" runat="seHello World</h1>
<div class="containercontent">
<asp:Label ID="lblName" runat="server" ControlSourceMode="OneWay" />
<asp:TextBox ID="txtName" runat="server" />
<asp:Button ID="btnSubmit" runat="server" width="80" Text="Say Hell" />
<hr />
<asp:Label ID="wwWebLabel2" runat="server" />
</div>
</form>
</body>
</html>
There are two problems: The literal content is flattened into a single line and some content in the content area seems to get overwritten.
This problem occurred to me on a number of pages, but because the header is generated as part of my standard page template every page had this header and so exhibits this funky problem. The content mangling would take different forms at times, although the manglage always seemed to occur pretty close to the top of the document although not always in the <form runat="server"> tag.
I can repeat this scenario reliably with the following steps:
- Create a new form without code behind and paste the layout above
- Go into the Button and its Text property in the Property Sheet
- Change the value. Press Ctrl-S to save the document
- Switch into Markup View
- Boom – Page is broken as shown above.
I’ve posted this bug on Connect:
https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=376528
This is a very peculiar bug in that it appears to happen only when there’s an <asp:Literal> control in the <head> section. Remove the Literal and the problem goes away.
There are a couple of workarounds for this particular scenario:
- Use a PlaceHolder Control (gives a designer warning but runs)
- Use <% if false { %> <% } %> block
both of which are actually reasonable.
For West Wind Web Connection (which uses the ww:wwWebControl) the solution is actually a little bit easier yet: I changed the implementation of the wwWebLiteral control which is only used for designer purposes to inherit of Control rather than Literal and implemented a custom Render() method. This also fixed the problem…
This seems to point strongly to some sort of specific problem with the ASP.NET Literal control in the ASP.NET designer since other controls like PlaceHolder or even my rebased wwWebLiteral control don’t expose the problem.
Another Problems – Designer Control Focus and the Property Window
Another big issue I had during training is that control focus does not easily sync with the Properties. Man this problem has been my nemesis for some time and I really wish that Microsoft will fix this problem sometime this century. The issue is that when selecting a control in the designer when the property window is active, the Property Sheet will either show the last control or some random document control or in some cases just a white empty property sheet. Any thing but the active control.
In the past I’ve been able to force an update by using Context Menu | Properties and then waiting for a second or two. But that no longer seems to work reliably. What’s really frustrating about this is that when the form loads at first and I switch into the designer it actually works fine and focus is properly managed. But the long a form is open it seems the more difficult it becomes to get it to focus in the Property Sheet.
Scott Mitchell (via ASP.NET Insiders List) had a great suggestion that saved my butt on the third day: You can flip into Split Design/Markup view and switch to source code briefly then back into the designer and your control and that seems to bring focus to the control properly and promptly and property sheet focus seems to work Ok then for a while again. This is worthwhile to remember.
Scary Problems
These kinds of problems have driven me to give up the visual ASP.NET designer in Visual Studio some time ago, so that I now live almost entirely in markup view with manual HTML, Intellisense and a bunch of CodeRush HTML Templates. I use the designer rarely and then only to sometimes drop controls or to set some of the more complex properties. This wasn’t really a voluntary choice at the time, although by now I’m not unhappy with the forced decision that made me end up here.
Nevertheless this is frustrating especially since I support a tool that relies on Visual Studio. It’s extremely frustrating trying to get people to update to the latest version of Visual Studio to get a number of the new features that will make their lives easier (especially in regards to CSS usage and cleaner rendering) and then be stymied by odd editor behavior and rendering fuck ups.
The problem is that the visual designer in VS 2008 has some really killer features, but it’s been a royal pig in terms of performance in complex pages and the focus issues are driving me crazy. I see my users often walk away excited from training only to get back to their office to play with the stuff and getting really frustrated with Visual Studio.
It also bothers me that after the initial promise from Visual Studio 2005 that the designer would not touch any markup you didn’t directly modify via the active control or element would not be compromised. But yet you can see in the above bug that that’s exactly what’s happening – after this problem had been gone for quite some time.
Frankly I’m tired of Microsoft continuing to race forward with new features and continually throwing more crap at the wall seeing what sticks and not taking care of the core features of the product. I don’t need any more features in visual studio – what I do need is a more stable environment that is faster and more responsive and gets the core features right.
Yeah good luck with that, eh? Instead we’ll get WPF integrated IDE features. Oh goodie…
Other Posts you might also like