Ajax button with no OnClick event is causing a postback - asp.net

Question

I am completely new to Ajax and have had no training. I'm just copying a co-worker's code. We have a page with two Ajax controls: one my co-worker wrote and one I wrote. Everything is working fine except for one item, and my co-worker's up to his eyeballs in another project, so I need to figure this out. The problem is that the Ajax control I wrote pops up a ListBox with two buttons: Close and Select. The Select button has an OnClick event and causes a postback, as is expected. However, the Close button does not have an OnClick event and still causes a postback. This is not the case with a very similar Ajax control that my co-worker wrote that sits on the same page. The code is below. My co-worker's code involves the Email Template; mine involves the Email(s) Lookup. For the life of me, I don't see any difference. Can anyone tell me why my Close button causes a PostBack and my co-worker's doesn't?
<!--my co-worker's control-->
<tr>
<td width="20%"><br /><div class="formtext">Email Template:</div></td>
<td colspan="3"><br />
<asp:Button ID="btn_ShowTemplate" runat="server"
Text="View/Edit Template" />
<ajax:ModalPopupExtender ID="mpTemplate" runat="server" PopupControlID="panelTemplate" TargetControlID="btn_ShowTemplate"
CancelControlID="BtnTemplateClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="panelTemplate" runat="server" CssClass="modalPopupTemplate" align="center">
<div class="formtext_modal">Litigation Hold Email Template <img src="images/v2/modal_email.png" alt="Email" /><br /></div>
<cc1:Editor ID="TemplateEditor" runat="server" Width="675px" Height="400px" />
<br />
<asp:Button ID="BtnTemplateClose" runat="server" Text="Close" CssClass="btnMatterClose" />
<asp:Button ID="btnTemplateSave" runat="server" Text="Save" CssClass="btnMatterSelect" OnClick="btnTemplateSave_Click" />
</asp:Panel></td>
</tr>
<!--my control-->
<tr>
<!-- email cc section -->
<td>Email CC:<br /></td>
<td colspan="3"><asp:Button ID="btnEmails" runat="server" Text="Lookup Email" /> <asp:TextBox
ID="tbEmails" runat="server" Width="80%" ReadOnly="true"></asp:TextBox><br />
<ajax:ModalPopupExtender ID="mpEmails" runat="server" PopupControlID="panelEmails" TargetControlID="btnEmails"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="panelEmails" runat="server" CssClass="modalPopupAttorneys" align="center">
<table align="center" width="100%">
<tr>
<td>
<div class="formtext_modal">Email(s) Lookup <img src="images/v2/modal_search.png" alt="Search" /></div><br />
<asp:Label ID="Label3" runat="server" Width="600px" CssClass="formtext"
Text="Add Employees to Email CC line"></asp:Label>
<div style="BORDER: thin solid; OVERFLOW: auto; WIDTH: 600px; HEIGHT: 140px">
<asp:CheckBoxList ID="cblEmails" runat="server" Width="600px" Height="140px" SelectionMode="Multiple">
</asp:CheckBoxList>
</div>
</td>
</tr>

Answer 1

Server side buttons always cause a post back. One way to get around it is to add a client click function that returns false.
OnClientClick="return false;"
Edit
Your co-worker has defined the CancelControlID="BtnTemplateClose" on the ModalPopupExtender. That is what is repressing the post back. You also have the CancelControlID defined, but I can't find the close button (btnClose) anywhere in the code you have posted. Where are the close buttons in your control? If you make sure your close button has the ID btnClose, it would most likely work like your co-worker's close button.