Saturday, March 24, 2012

A tale of two ListControls

I've got two custom server controls that extend ListControl and implement IPostBackEventHandler. Both override RenderContents and both render anchor tags. Both of them use Page.ClientScript.GetPostBackClientHyperlink in order to assign a string value to each anchor which I retrieve upon postback. The only real difference between the two is that one is a horizontal list and one is a vertical list.

I've placed each control within its own webcontrol. Each webcontrol contains an UpdatePanel, and that UpdatePanel's ContentTemplate contains the server conrol I've written. Each UpdatePanel's UpdateMode is set to Conditional.

Here's where it gets weird. When I render the page and click on a hyperlink in the vertical-displaying control, a partial postback occurrs as expected. Both controls update themselves and, when the partial postback returns, both are updated properly.

When I click on a hyperlink in the horizontally-displaying control, a full postback occurrs rather than the partial postback that should have happened. I cannot for the life of me figure out why this is happening.

Again, both controls are almost exactly the same. They render exactly the same, save one places each hyperlink in a div so they are arranged vertically rather than horizontally.

I've placed a button within the horizontally-displaying control's UpdatePanel and when I click on the button a partial postback occurrs as is expected. Still, clicking on one of the hyperlinks within the same UpdatePanel causes a full postback.

I don't even know where to start looking to find out why the full postback is occurring rather than a partial postback. Any help at this point will be greatly appreciated.

Funny how you figure out exactly what was going on right after you post your question...

The problem was that my web control's ID was "crumbs", but I was wrapping my anchor tags within a DIV with a different ID. The postback javascript was prepending that div's ID to the __DoPostBack argument, confusing the update panel. The control layout looked like this:

DIV id="crumbs_updatePanel" (the UpdatePanel's containing DIV)

DIV id="breadCrumbs" (this is where I was screwing up)

A href="http://links.10026.com/?link=javascript:__doPostBack('breadCrumbs$breadCrumbBar','')" (the UpdatePanel was confused by the div id before the $)

By making sure the containing DIV had the same ID as the web control, I made sure that the postback hyperlink had the correct div ID so that the UpdatePanel recognized it.

DIV id="crumbs_updatePanel" (the UpdatePanel's containing DIV)

DIV id="crumbs" (the containing div now has the correct ID)

A href="http://links.10026.com/?link=javascript:__doPostBack('crumbs$breadCrumbBar','')" (the UpdatePanel now recognizes this postback as coming from within itself, and does a partial postback.)

More information on this issue here: http://forums.asp.net/thread/1488508.aspx

No comments:

Post a Comment