Full postback even with UpdatePanels

Sep 5, 2009 at 9:29 PM

Great control! I love the simplicity yet high level of control it provides.I have been able to use it to create a great mash-up of neighborhood businesses and other information. I am also trying to use a lot of AJAX to reduce full postbacks. I have a TreeView that has a list of filters, each filter representing a group of business with markers on the map. When a user un-checks a CheckBox in the TreeView, markers from that filter group ought to disappear from the map without an apparent postback. Unfortunately, I'm getting a full postback any time a user changes a CheckBox. I'm hoping someone can help. I apologize in advance for the large amount of code. It is neccessary to tell the whole story.

I have the following ASP.NET mark-up for the map inside an UpdatePanel and TabContainer (AJAX Control Toolkit):

<asp:UpdatePanel ID="updateNeighborhood" runat="server">
<ContentTemplate>
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="tabMap" runat="server" HeaderText="Map View">
<ContentTemplate>
<artem:GoogleMap ID="gmap" runat="server" Width="460px" Height="400px"
EnableContinuousZoom="true"
EnableDoubleClickZoom="true"
EnableViewState="true"
EnableScrollWheelZoom="true"
ZoomPanType="Large3D"
/>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tabList" runat="server" HeaderText="List View">
<ContentTemplate>
<div id='divList' runat='server'></div>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<asp:Timer ID="loadVendors" Interval="1" OnTick="loadVendors_Tick" runat="server">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>

The above Timer control, "loadVendors", is used to load markers into "gmap" from code-behind after page_load. This works very well without a full postback (as expected). I have a TreeView ("treeNeighborhood") in another UpdatePanel ("updateFilters"). I use the following code to add a trigger event to the first UpdatePanel, "updateNeighborhood":

protected void Page_Init()
{
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.EventName = "TreeNodeCheckChanged";
trigger.ControlID = treeNeighborhood.UniqueID.ToString();
updateNeighborhood.Triggers.Add(trigger);
}

I use the above code to add the trigger because I use MasterPages and both UpdatePanels reside in different ContentPlaceHolders.

Also, I use the following javascript code to force a postback when a TreeView checkbox is checked or unchecked:

function CheckboxClicked(chkevent)
{
// Tested on IE7 and Firefox 3
var obj;
try
{
obj = window.event.srcElement;
}
catch (Error)
{
//Using a browser that cannot retrieve srcElement i.e. Firefox 3
//obj will not have been set, obj = null
}

if (obj != null)
{
//obj is not null, probably using IE
if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
__doPostBack("", "");
}
}
else
{
//obj is null, probably using Firefox
if (chkevent != null)
{
if (chkevent.target.toString() == "[object HTMLInputElement]")
{
__doPostBack("", "");
}
}
}
}

And finally, I use the following code to set the initial coordinates for "gmap" AND add an "onclick" attribute to "treeNeighborhood":

protected void Page_Load(object sender, EventArgs e)
{
//set treeview to postback on checkchanged
treeNeighborhood.Attributes.Add("onclick", "CheckboxClicked(event)");

//get user profile, which includes lat and long values
Profile p = new Profile();
p.getViewerProfile();

//set map for user
gmap.Latitude = p.geoLat;
gmap.Longitude = p.geoLong;
gmap.Zoom = 15;
}

If I've left something out, please let me know. :) I'm hoping someone can help me out.

 

Best Regards,
Byron Sommardahl