Scott on Writing

Musings on technical writing...

Panel Weirdness

I recently responded to a newsgroup post on microsoft.public.dotnet.framework.aspnet.webcontrols that I thought warranted a follow-up comment here.  The posters question was:

I have a Panel control containing a few TextBox controls.  The Panel is originally enabled, I enter data into the TextBox controls.  When I submit, the Panel is disabled during the PostBack and the TextBox controls render greyed-out, and I can see the values in the TextBox controls....this is what I expected.

I submit again, the Panel is enabled during the PostBack.  All of the TextBox controls within the Panel are now enabled, however, the values are gone.  This doesn't happen with a TextBox control outside of the Panel that is also enabled/disabled.

The post then contained a sample ASP.NET Web page that illustrated the problem.  Namely, it had a Panel Web control with a TextBox Web control inside of it, along with a CheckBox and a Button outside of the Panel.  When the page was posted back, if the CheckBox was checked the Panel's Enabled property was set to False; if the CheckBox was unchcekd, the Enabled property was set to True.

I started by testing the poster's source code in Mozilla Firefox, my default browser.  When the Panel's Enabled property was set to False, the TextBox was still editable and not grayed out, nor did I lose the TextBox value when posting back after it was disabled.  Doing a view source illustrated why: the Panel renders as a <table> for downlevel browsers.  Setting the Enabled property to False created a table with the attribute disabled=”disabled”.

Switching to IE6, I reran the test and was able to replicate the poster's problem.  IE6 renders a Panel as a <div>.  When the Panel's Enabled property was set to False, the following HTML markup was generated:

<div id="panelID" disabled="disabled">
  <input type="text" name="textboxID" id="textboxID" value="valueEnteredOnLastPostback" />
</div>

Note that the disabled attribute only applies to the <div>, and not the <input>.  (This was the case in Firefox, too, except instead of a <div> it was a <table>.)  Interestingly, with this HTML markup, IE displays the TextBoxes as grayed out - however, I could edit them!  What's really interesting, though, is that when the form is submitted, IE doesn't send back the values of the TextBoxes in the HTTP POST header.  I guess it hits the <div>, sees that it is disabled, and then doesn't bother processing the <div>'s inner children. (Firefox always posts back the TextBox value, regardless of the value of the enclosing <table>'s disabled attribute.)  Since the TextBox value is not posted back when the Panel is disabled, the TextBox loses its Text property value, resulting in an empty TextBox on postback.  The solution to this problem is to explicitly set the TextBox's Enabled property to False - not just the Panel's.

The reason the problem exists is because when a visitor enters a value into a TextBox, and posts back the form, that value is not persisted into the TextBox's view state.  Yes, the value is saved to the TextBox's ViewState property, but the view state for the TextBox is only saved if the TextBox's TrackViewState property is set to True.  I'm going to gloss over the sticky internal details, but realize that the TextBox does not record its Text property value in its view state if the TextBox is a Password TextBox or if there is not an event handler wired up to the TextBox's TextChanged event.  If the Text property is the only property set after the Initialization stage, then the TextBox won't record any view state information.  The means by which TextBox's persist their Text values across postback is by having the TextBox value continually posted back in the HTTP POST headers... but when using a disabled <div>, the TextBox value is not posted back.

An astute reader might then counter, “Well, if what you say is true, then why does explicitly setting the TextBox's Enabled property to False make everything work?  After all, when the Panel is disabled, the TextBox's value is not being posted back, right?”  Right you are, but when you set the Enabled property to False explicitly, that has the side-effect of setting the TextBox's TrackViewState property to True, so both the TextBox's Enabled and Text properties will be persisted to view state, and hence be used to repopulate the TextBox.

A final question readers might have is, “How in the world did you find out all this stuff?”  Through the book Developing Microsoft ASP.NET Server Controls; using Reflector to look at the decompiled source code of the System.Web.UI.Control, System.Web.UI.Page, System.Web.UI.WebControls.TextBox, and System.Web.UI.WebControls.WebControl; and using a view state parser (specifically, I used one I will be presenting in an upcoming article on ASP.NET View State on MSDN, but you could use Paul Wilson's View State Parser, or Fritz Onion's ViewState Decoder).

posted on Wednesday, April 28, 2004 12:14 PM

Feedback

# re: Panel Weirdness 4/28/2004 12:33 PM Milan Negovan

Scott, I've run into the same issue with the Panel control. I don't understand why it renders as a div in IE and a as table in Mozilla (btw, my primary browser is Firefox, too). Makes it difficult to style this control with CSS because it's that flaky. Time to poke around with Reflector and try to understand the differences in rendering. I'm VERY curious.

# re: Panel Weirdness 4/28/2004 12:50 PM Scott Mitchell

Milan, the <browserCaps> section in the machine.config file spells out what HtmlTextWriter class each browser uses. IE is configured to use HtmlTextWriter, which emits HTML 4.0. Mozilla and its non-Microsoft kin use the Html32TextWriter, which emits HTML 3.2. This is why different browsers get different HTML markup. It's one of ASP.NET's features - an adaptive rendering model. (The adaptivity of Whidbey will be much more powerful and developer-configurable...)

# re: Panel Weirdness 4/28/2004 12:55 PM Kwame

Mr. Roboto (Original Poster),

Don't hate the panel hate the Browser. It is what it is. Mr. Roboto should know this.

Kwame

# re: Panel Weirdness 4/28/2004 1:57 PM Brian R. James

Better yet, ditch that <asp:panel> mumbo jumbo and just place a <div> on your page. If you absolutely must control that div element on the server, use <div runat="server">.

# re: Panel Weirdness 4/28/2004 3:28 PM Milan Negovan

That's exacly what I ended up doing + banking heavily on HtmlGenericControl when I need to build something.

# re: Panel Weirdness 4/28/2004 3:35 PM Milan Negovan

Scott, Gareth Brown had an interesting post (http://weblogs.asp.net/garethbrown/archive/2004/04/14/112690.aspx) where I explained my observations of some weirdness with the HtmlTextWriter class. I crawled all over HtmlTextWriter and beyond with Reflector but still couldn't figure out where it swaps div for table. Any clues?

# re: Panel Weirdness 4/28/2004 6:35 PM Scott Mitchell

Milan, the Html32TextWriter class is derived from the HtmlTextWriter class. If you check out the GetTagName(HtmlTextWriterTag) method in HtmlTextWriter, you'll see that it consults its internal Hashtable (_tagNameLookupArray) to get the string representation of the passed-in tag.

Now, Html32TextWriter overrides this method and checks to see if the passed-in HtmlTextWriterTag is a DIV. If it is, it blindly returns "table". Else it delegates the responsibility to its base class's GetTagName() method.

# re: Panel Weirdness 4/28/2004 6:57 PM Milan Negovan

You're the man! I totally overlooked browserCaps in machine.config. I did see the hashtable with all kinds of tags and followed every line that referred to it... in HtmlTextWriter. Hey, I learned a ton about the class itself though. Thanks again!

P.S. I still don't get Kwame's innuendo about Mr Roboto. :)

# re: Panel Weirdness 4/28/2004 11:06 PM Justin Lovell

Don't blame the browser, blame the standards. In the standards, it specifically states that if an element is disabled then it and/or it's children may not be able to post back (via the HTTP headers) of any value(s) of form elements.

The reason: if they are disabled, then there were no changes to the elements. If there were no changes from the elements, you should know what they are from "wherever".

I found out that the hardway back in the ASP3 days. I checked up the standards and that is what it said. My workaround was to detect the post back happening and quickly enable the certain elements. That was a hack because... well... there was no view state back then. But over here, we have just discovered that ASP.NET hacks away its way without even knowing about it.

# re: Panel Weirdness 4/29/2004 8:06 AM Oskar Austegard

If I remember correctly, the same thing happens when you disable a dropdownlist - it doesn't post the selected value back to the server.

But then it's been 7 months since I switched to Windows Forms - so my memory may be wrong...

# re: Panel Weirdness 4/29/2004 8:38 AM Justin Lovell

Yes, the DropDownList will do the same thing. It is a form element by definition which obeys the standard.

# Adaptive Rendering 4/29/2004 12:19 PM Scott on Writing

# Html 4.0 Rendering for Mozilla 5.0 5/5/2004 9:23 PM Pingback/TrackBack

# re: Panel Weirdness 9/16/2004 1:47 PM Payton Byrd

The whole purpose of the asp:panel is to allow dynamically created html to support the browser. As the other reader posted, update your Machine.config to support Firefox as an uplevel browser, as Microsoft intended. Forcing the <div> on the user could have unforseen effects with a browser that doesn't support that tag.

# re: Panel Weirdness 9/21/2004 1:40 PM Eric

Has anyone tried putting a DropDownList and a button in a panel. When you click the button, the DropDownList will lose its state. If you put the button outside the panel(and click it), the state of the DropDownList is maintained.

Anybody ran into that?

# re: Panel Weirdness 10/1/2004 1:47 PM skowronek

The idea of using hard coded DIV tags is all great and good except when you have your DIV tags as part of a repeater object (or ther server side .NET object.) Doesn't appear to matter if you user an asp:panel or a div ran from server, they both get converted to a table. Seems like this might be a good thing to add to the default machine.config file as Mozilla is slowly taking over NS as competitor to M$.

# re: Panel Weirdness 12/8/2004 4:53 AM papillon

How do you change machine.config so that Firefox is considered uplevel?
ie. what entries do you make?

# re: Panel Weirdness 12/8/2004 8:00 AM Scott Mitchell

Papillon, see this article for more information w.r.t. making FireFox & other browsers "uplevel":

A Look at ASP.NET's Adaptive Rendering
http://aspnet.4guysfromrolla.com/articles/050504-1.aspx

Cheers!

# re: Panel Weirdness--->Forgotten Controls 1/11/2005 10:03 AM Alexander

On the Panel as Div issue:
Everyone seems to have forgotten the HtmlGenericControl. You can create a new control for each div based on the template of the following:

Dim divWhatever As New HtmlGenericControl
divWhatever.TagName = "div"
divWhatever.ID = "divWhatever"
WhateverContainer.Controls.Add(divWhatever)

Now, you can add other controls inside your div. Cool.

You can do the same with HR and BR and the rest. I've even added Fieldsets and Legends with this method.

There are some caveats to doing this, and some ways for enhancing this method, but the idea is there.

On the Uplevel issue:
Microsoft denotes their own browser as "uplevel," despite it not following current w3c and css standards. ASP.NET is utterly NON-compliant with HTML 4.0 or XHTML standards. Trying to make the built in stuff compliant requires sophisticated re-rendering, which in turn raises ugly flags for runtime and viewstate.

# re: Panel Weirdness 4/25/2005 4:51 AM shay r

hi,
i am using a panel control to disaply dynamic data, i have noticed that the same control sometimes use div and somtimes use table using the same browser. anybody ever seen this thing ?

# re: Panel Weirdness 5/13/2005 7:15 AM Pete

Which browser is causing this issue? Could it be that you are using some Mozilla based browser that some of the time or with a certain instance you have it configured to identify itself as IE?

That would cause the problem that you described.

# re: Panel Weirdness 6/28/2005 3:12 AM Andrew Johnson

Excellent help people!
I was wondering why the Panel created a table in IE and a div in FF. This blog told me why, how, and what to do - thnx.

# re: Panel Weirdness 8/9/2005 12:09 AM Luke

I have a different weird <div> problem. I have a few div's in a repeater control and in the ItemTemplate I have a textbox for data entry. The textbox renders fine but you can't actually focus on the control unless you use the tab key. Clicking on the control does nothing - the same happens if a button is contained within a div.
Any ideas?

# re: Panel Weirdness 10/19/2005 11:11 AM Paul

I'm having the same problem as Luke above. I have a whole control full of textboxes that can't be selected. If you click on the far left edge, you can focus on the textbox, but otherwise it won't work. I can't seem to find any explanation why.

# re: Panel Weirdness 10/28/2005 7:11 PM bruce

I have a similar issue, but I'm not trying to hide the panel. Simply put, fields within the <DIV> do not have their values posted back to the server. The <DIV> was generated from a <PANEL>. Is their something to know about how form fields are handled within a <DIV>

# re: Panel Weirdness 11/11/2005 3:14 PM Eric Liprandi

For people hosting applications with a hosting service, you can simply add the following to your web.config file(s) to force the default rendring to be 4.0 compliant.
<system.web>
<browserCaps>
tagwriter=System.Web.UI.HtmlTextWriter
preferredRenderingType = "html"
</browserCaps>
</system.web>

maybe one of those entries is enough. I have not verified.

Eric.

# re: Panel Weirdness 11/30/2005 10:07 AM Tim McCarley

Does anyone know how to force Firefox to render the correct width for an ASPNET Textbox or ASPLABEL control

# re: Panel Weirdness 1/1/2006 12:23 PM Josh

I am using an asp.net datalist with a div that has an auto scroll style to allow my datalist to scroll when too much content comes into the control.

This is not working at all in Firefox. I even added the browerCaps entries to the web.config file to use HTML 4.0 for Mozilla.

Any suggestions? This is the only way to get the datalist to scroll that I know of.

Thanks in advance,

Josh

# re: Panel Weirdness 1/1/2006 12:24 PM Josh

I am using an asp.net datalist with a div that has an auto scroll style to allow my datalist to scroll when too much content comes into the control.

This is not working at all in Firefox. I even added the browerCaps entries to the web.config file to use HTML 4.0 for Mozilla.

Any suggestions? This is the only way to get the datalist to scroll that I know of.

Thanks in advance,

Josh

Title:  
Name:  
Url:
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments   

My Links

Ads Via DevMavens

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<July 2009>
SMTWTFS
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

Comment Stats

DayTotal% of Total
Sunday 2046.9%
Monday 42314.3%
Tuesday 50116.9%
Wednesday 54518.4%
Thursday 57219.3%
Friday 53618.1%
Saturday 1856.2%
Total 2966100.0%

Hour1Total% of Total
12:00 AM 752.5%
1:00 AM 802.7%
2:00 AM 672.3%
3:00 AM 812.7%
4:00 AM 642.2%
5:00 AM 1234.1%
6:00 AM 1153.9%
7:00 AM 1755.9%
8:00 AM 1876.3%
9:00 AM 1565.3%
10:00 AM 1866.3%
11:00 AM 1926.5%
12:00 PM 1996.7%
1:00 PM 1846.2%
2:00 PM 1675.6%
3:00 PM 1344.5%
4:00 PM 1153.9%
5:00 PM 1063.6%
6:00 PM 993.3%
7:00 PM 1063.6%
8:00 PM 903.0%
9:00 PM 842.8%
10:00 PM 893.0%
11:00 PM 923.1%
Total 2966100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 4.91157
Monday 4.92379
Tuesday 4.21471
Wednesday 7.42668
Thursday 6.53666
Friday 5.17450
Saturday 4.73175
Total 5.522966

Hour1 Entry MadeAvg.Total
12:00 AM 5.2937
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 4.0048
8:00 AM 4.29133
9:00 AM 6.04290
10:00 AM 5.83274
11:00 AM 4.36192
12:00 PM 6.44348
1:00 PM 3.14132
2:00 PM 5.04227
3:00 PM 7.97303
4:00 PM 3.8199
5:00 PM 6.00168
6:00 PM 4.56114
7:00 PM 8.95188
8:00 PM 8.58163
9:00 PM 5.00115
10:00 PM 6.31101
11:00 PM 4.5732
Total 5.522966

Learn More About Comment Stats
1 - All times GMT -8...


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles