ajax update panel - imagebutton and button behaving differently?

Question

I have an ajax panel (actually it' a Rad Ajax Panel - the behavior is similar to an Ajax Update Panel with everything in the ContentTemplate section and no Triggers), with an image button (asp:ImageButton) and a button (asp:Button).

I notice that they behave differently - the image button advances to postback (Page_Load and Button_Click server functions), when the button doesn't!

How can I achieve this behavior with the Button too? (Replacing the Button with an ImageButton solved the problem... Is there a way to maintain the Button and have the ImageButton's behavior?)

This is what my code looks like (two buttons, two click functions, and two client click functions):

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>

<div style="width: 800px;">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function validateSave() {
                // ...
                return true;                    
            }

            function validateAdd() {
                // ...
                return true; 
            }                                       
         </script>
    </telerik:RadScriptBlock>

    <asp:Panel ID="Panel1" runat="server" Visible="false">
    <fieldset>
        <legend>New item</legend>
        <%--..........--%>
        <asp:ImageButton ID="Button4" runat="server" 
        ImageUrl="~/App_Themes/ThemeDefault/images/add.gif"
        OnClientClick="return validateAdd();" 
        OnClick="Button4_Click" />
    </fieldset>


    <%--..........--%>
    <asp:Button ID="Button2" runat="server"                                
    OnClientClick="return validateSave();" 
    Text="Save" ToolTip="Save" OnClick="Button2_Click" />
</asp:Panel>


</telerik:RadAjaxPanel>                

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>        

</div>

Well, yes! Is that why? I added on my question the basic structure of the code (the panel with the two buttons... didn't know the two javascript functions were relevant). — naruu
In that case... I can use a Custom Validator for the Button (for the ImageButton I have to maintain the javascript function), it does seem to solve the problem, thank you! (But why the different behavior?...) — naruu

rlb.usa rlb.usa · Accepted Answer · 2010-11-09T15:45:53

UpdatePanels can often be problematic with Buttons. An easy thing that you can do is move the Button out of the UpdatePanel. After all, the more contents in your UpdatePanel, the slower the asynch postback will be.

ajax update panel - imagebutton and button behaving differently?

1 Answers