A Tale of Tabbed Pages

Posted by Phil Weber on November 20, 2002

The Design: In my ASP.NET content management system, I wanted to use a tab control to allow an author to edit individual pages of an article. I also decided to use Active­Up's HtmlTextBox control to enable rich-text editing: it's a full-featured control at a very reasonable price.

The Problem: I quickly discovered, however, that changes to the text box weren't being saved when I switched to a different tab. After another marathon session of cursing and semi-random code-tweaking (I tried changing viewstate settings, attaching code to various page and control events, etc.), I finally concluded that the postback triggered by a change of tabs was circumventing the text box's onblur event, which is where it persists its contents. (I should mention that in my desperation, I took advantage of ActiveUp's live chat tech support feature. Pierre, the control's author, was extremely cordial and helpful. Since he's in Belgium and I tend to work in the middle of the night, the arrangement proved to be convenient for both of us!)

The Solution: Now that I understood the source of the problem, the question was: How do I force the text box to persist its data before a postback? I tried a few things, and eventually found a solution by Googling for "intercept __doPostBack": The trick was to create my own function that does whatever I need to do before a postback, and then create a function pointer that redirects the default __doPostBack function to my custom function (JavaScript is awesome, by the way). Problem solved!

Footnote: Another problem I had with the HtmlTextBox was that I couldn't get a second control on the page to work correctly. Pierre assured me that this is supported, so I took a closer look at my code. Turns out that the ID I was assigning to the second control contained a space (I create the controls dynamically based on an XML form definition -- that's a subject for another article -- and I was assigning an ID equal to the name of the data field). Replacing the space with an underscore solved that problem.


Posted by Yaheya Quazi on December 4, 2002:

Will you be posting your tab based interface code in your site?

Posted by Dave Parker on December 5, 2002:

What tab control are you using?

Posted by Phil Weber on December 5, 2002:

Dave: I’m using Microsoft’s Tabstrip Web control. There’s a link to it in the opening paragraph of the article: click on the words “tab control.”

Posted by Phil Weber on December 5, 2002:

Yaheya: The code belongs to my employer, so I can’t post it here. I will, however, be discussing the content management system at the VSLive! conference in San Francisco next February; attendees will receive a copy of the source code.

If you’re not able to attend the conference, or you’re just interested in how to use Microsoft’s Tabstrip control, you can find examples on Microsoft’s MSDN site: simply click the words “tab control” in the opening paragraph of the article. Thanks!

Leave a comment