HTML Mangling with Literal Controls in the <head> tag

October 20, 2008 • from Maui, Hawaii • 14 comments

On this page:

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…

The Voices of Reason

Lee
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I have had a similar experience with the designer. However i find writing in code view relatively straight forward as most the work i rely on is often copy and paste and some of the wizards in the designer don't generate the code i need. The formatting and intellisense in code view is enough for me but i'm sure that if i had a designer that worked i might make use of it.

jsaylor
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I'll second this. While the visual designer has made great strides in 2008 over 2005, the bottom line for me is that it's still only really usable in trivial examples. As a matter of fact, I've gotten to the point with real-world complex pages where I not only don't use the visual designer, I stay away from it for issues (real, perceived, or inferred from experience with vs2005 and before [all the way back to ) like what Rick pointed out here. Even to the point where if I accidentally switch to design mode, I'll not-save the page and re-load a copy from pre-visualized state.

Amazingly, I've come to think of the visual designer as an enemy in the ide, and we're talking a feature that MS has probably invested millions of dollars and thousands (tens of thousands?) of man-hours in.

Unfortunately, even between code-behind source and markup on complex pages, the ide can get lost. Example: new control on the markup, isn't recognized the code-behind. Answer: close the pagae and re-open, look it found it! How many times has this happened to you?

Maybe non-complex pages don't have this, maybe the third party controls that I'm using are impacting it, I just don't know and don't have time/effort to figure it out. The bottom line today is that I work around the problem by avoiding the visual designer at all costs and closing and re-opening lots of pages.

(all that said, I'm amazed that the ide handles the stuff that it does as much of the time as it does. It's probably 99%+ of the time, but that other 1% is a doozy and it's usually when I'm working on something the hardest)

Stephen
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I have a question related to the posted code

how the heck do you get

<script src="~/scripts/jquery.js" type="text/javascript"></script>

to work?

i can never get .NET to handle "~" for <script> and <link> tags

James Foster
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

Stephen - try adding runat="server" to the head tag.

Dean Thrasher
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I remember having to force all my coworkers' Visual Studio instances to open only in markup view to prevent weird HTML mangling problems. I vividly recall wrestling with VS configuration settings late at night...

A few posts ago, you asked why ASP.NET gets no respect. It's glitches like this that have driven people away from ASP.NET. Even though the .NET framework is solid, all the shiny Visual Studio designer tools and automation on top is buggy and difficult to use. I second your vote for Microsoft making it work properly.

Or better still, just ditch the WYSIWIG all together -- HTML's not that hard.

Barbaros Alp
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

Does it work ? adding runat="server" to head tag, i couldnt try it yet becase i am updating to sp1

Thanks :)

Steve from Pleasant Hill
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

The funny thing is, I never really took the time to get "good" at HTML until I used VS2003, and found it quicker to type the stuff in rather than fiddling with the designer and then tweaking that stuff.

But then it would still mess up my indentation when it felt like it...

Socrates470BC
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

When I started VS and .NET back in 2002, I was not a web developer or a .net developer. I did not know html and id all my work in the designer, which appeared to be pretty solid.

Today, like most experienced VS developers, I do most of my work in the code view and the designer just lets me check things look OK rather than doing a full browser preview. But on a more disturbing note the errors and code mangling features make us want to think again about using a tool that has got too complicated for the developers to maintain the required degree of quality.

It bothers me that the designer preview can differ significantly from Internet Explorer.
It bothers me that if I add a NavigateURL from the property window that it does not use
"~/mypage.aspx" but uses "mypage.aspx" (I reported this on connect).

When an ide starts to fail like this you end up thinking I should go back to a text editor and compiler.

Then I remember the good things I get from the ide. It is a pity that there are so many little niggly problems. These problems need to be fixed immediatly and developers notified about each fix as they come through. This way we can be re-assured that MS is keeping up with the game plan.

Rick Strahl
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

@Stepen - the ~ syntax doesn't work for actual script embedding, but it works for the Intellisense. Since the Intellisense link is never actually rendered this works out great.

Script tags must be relative because they are Html controls and the ~ is not resolved. In most other Html controls you can use runat="server" to get URL based reference to resolve (like the img control), but in <script> this doesn't work because the script tag will change meaning (code will try to load as server executed code).

Bottom line that doesn't work. The only way to get this to work is via the ScriptManager or another custom control (like I use with my ScriptReference control from the West Wind Ajax Toolkit) that CAN translate the paths.

Asheesh Soni
October 20, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I love Visual Studio because its pretty fast, has excellent debugging features, seamless integration with source safe, MS Sql blah blah blah...

But I hate the WYSIWYG Editor. I hardly ever use it. May be, only when I want to conveniently hook events (Because the properties window doesn't show the events tab unless you switch to the designer view).

I wish Microsoft provide an "Upgrade" to Visual Studio to completely get rid of the Design View and let us access the events tab when using the source view.

Regarding the ~ for script references, I have been using the ScriptManager. But as I continue to drift away from MS Ajax and embrace jQuery, very soon, I'll completely ditch the ScriptManager. Rick's tips and his ww Ajax Toolkit will come in handy then.

Pamela Thalacker
October 24, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

Another reason I never use the designer is that more often than not, what appears in the designer is very different than what appears in IE or Firefox. Occassionally I will use it when I am first learning a new object so that I can see what kind of markup should be generated, but from them on I will use markup.

Recently I am becoming enamoured of creating objects like AjaxControlToolkit controls completely in code-behind. It appears that you have to do that if you want to use LoadControl with a parameter and I actually find I have more control over communication with the object.

Yordan Georgiev
October 26, 2008

# re: HTML Mangling with Literal Controls in the <head> tag

I do not use the designer - never , ever - most of the content of the pages we have to code is dynamic .... Usually if it looks nice in Firefox it will look slightly better or uglier in IE . I consider redisigning only if Opera does not render the page the way it is intended ...

literal
December 08, 2008