AJAX BalloonPopUp Causes Page Reload in ASP.NET

Question

I've been using Modal PopUp Extender for a long time now. I know that I need to put the PopUp Control Panel inside an Update Panel in order to avoid page reloading. This is my first time using a balloonpop-up. I used the same method I am using with ModalPopUp but clicking the target button still causes page reload.

This is my code for the popup extender and target ID:

<asp:ImageButton ID="B_HELP_SFtolerance" runat="server" BorderColor="Black" 
 BorderStyle="Solid" Height="21px" ImageUrl="~/Resources/1401344600_info6.png" 
 ToolTip="Scale Factor Tolerance Info." Width="25px" />


<ajaxToolkit:BalloonPopupExtender ID="B_HELP_SFtolerance_BalloonPopupExtender"
 runat="server"  BalloonPopupControlID="P_HELP_SFTolerance"
    Position="TopRight" 
    BalloonStyle="Rectangle"
    BalloonSize="Large"
    CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
    CustomClassName="oval"
    UseShadow="true" 
    ScrollBars="Auto"
    DisplayOnMouseOver="false"
    DisplayOnFocus="false"
    DisplayOnClick="true" TargetControlID="B_HELP_SFtolerance" >
    </ajaxToolkit:BalloonPopupExtender>

This is my code for the Panel PopUpControl ID:

 <asp:Panel ID="P_HELP_SFTolerance" runat="server" BackColor="#0000CC" 
    Height="218px" Width="404px">
 <asp:UpdatePanel ID="UP2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False" RenderMode="Inline">
  <ContentTemplate>

                Scale Factor Tolerance has a bandwidth of:<br />
                <br />
                <asp:Image ID="Image2" runat="server" Height="70px" 
                    ImageUrl="~/Resources/tolerance.png" Width="316px" />
                <br />
                <br />

                Lower Bound and Upper Bound can be changed using the textboxes 
        </ContentTemplate>
        </asp:UpdatePanel>
        </asp:Panel>

Unfortunately, even with update panel inside, the Page is still reloading after button click. Please advise. Thanks in advance.

Answer 1

From your code I can see that neither the BalloonPopupExtender nor the Button are inside the UpdatePanel. Shouldn't they be placed inside the UpdatePanel's ContentTemplate?

Try this...

<asp:UpdatePanel ID="UP2" runat="server" RenderMode="Inline">
  <ContentTemplate>

            Scale Factor Tolerance has a bandwidth of:<br />
            <br />
            <asp:Image ID="Image2" runat="server" Height="70px" 
                ImageUrl="~/Resources/tolerance.png" Width="316px" />
            <br />
            <br />

            Lower Bound and Upper Bound can be changed using the textboxes 

<asp:ImageButton ID="B_HELP_SFtolerance" runat="server" BorderColor="Black" 
 BorderStyle="Solid" Height="21px" ImageUrl="~/Resources/1401344600_info6.png" 
 ToolTip="Scale Factor Tolerance Info." Width="25px" />


<ajaxToolkit:BalloonPopupExtender ID="B_HELP_SFtolerance_BalloonPopupExtender"
 runat="server"  BalloonPopupControlID="P_HELP_SFTolerance"
    Position="TopRight" 
    BalloonStyle="Rectangle"
    BalloonSize="Large"
    CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
    CustomClassName="oval"
    UseShadow="true" 
    ScrollBars="Auto"
    DisplayOnMouseOver="false"
    DisplayOnFocus="false"
    DisplayOnClick="true" TargetControlID="B_HELP_SFtolerance" >
    </ajaxToolkit:BalloonPopupExtender>
    </ContentTemplate>
    </asp:UpdatePanel>