Multiple levels of UserControls using UpdatePanels - asp.net

Question

Because we will have a bigish team of people working on various parts of pages etc I decided to break down as many of the sections of the pages into reusable Usercontrols.
I am however having an issue with one control.
Firstly, let me give you an idea of what is happening. You can also see this at http://www.elycity.co.uk/Business/BusinessNew2.aspx?businessid=24
We Firstly have the layout page: BusinessNew2.aspx
Each section has a webcontrol but the last section. The CompanyInformation Section has several other UserControls within.
All are working fine except the Contact (businesscontact.ascx)
On clicking the button, the Tabs.ascx is reset and it returns to the Information.ascx Tab.
BusinessContact.ascx
<%# Control Language="VB" AutoEventWireup="false" CodeFile="BusinessContact.ascx.vb" Inherits="BusinessListing.BusinessContact" %>
<asp:UpdatePanel ID="updMain" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlContactMain" runat="server" >
<h3>Send <asp:literal ID="litCompanyName" runat="server" /> a message</h3>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<asp:textbox type="text" id="txtName" placeholder="Name" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<asp:textbox id="txtEmail" placeholder="Email" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPhone">Telephone No</label>
<div class="controls">
<asp:textbox id="txtPhone" placeholder="Telephone" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputMessage">Message</label>
<div class="controls">
<asp:TextBox Height="40" TextMode="MultiLine" id="txtMessage" placeholder="Message" runat="server" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputMessage"></label>
<div class="controls">
<asp:Button ID="btnSendMessage" runat="server" Text="Send Message" />
</div>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlContactSent" runat="server" Visible="false">
<div class="hero-unit">
<h2>Email has been sent</h2>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Just while testing, the codebehind:
Namespace BusinessListing
Partial Class BusinessContact
Inherits System.Web.UI.UserControl
Protected Sub btnSendMessage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSendMessage.Click
pnlContactMain.Visible = False
pnlContactSent.Visible = True
End Sub
End Class
End Namespace
So what am i missing. Why is this doing full postback to parent controller and how can i prevent this?
Regards
Mark

Answer 1

You've not provided the code for tabs.ascx, but I would guess you've not defined which controls should trigger postbacks in the update panel.
That means all postbacks from controls within the UpdatePanel in tabs.ascx are causing the panel to update, including postbacks from child UserControls.
If you use:
<asp:UpdatePanel id="upanelInfo" runat="server" ... >
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonXXX" EventName="Click" />
....
</Triggers>
</asp:UpdatePanel>