RadioButton inside Update Panel causing postback

Question

I am putting the following controls inside an update panel so that the whole page does not refresh. When clicking the button, the page does not refresh but when I try to change the radio button, the page refreshes and causes a full postback. Here is my code:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager" runat="Server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="updatePanelToggle" runat="server">
    <ContentTemplate>
        <asp:RadioButton ID="radioOn" AutoPostBack="true" runat="server" GroupName="toggle" Text="On" OnCheckedChanged="radioOn_CheckedChanged" />
        <asp:RadioButton ID="radioOff" AutoPostBack="true" runat="server" GroupName="toggle" Text="Off" OnCheckedChanged="radioOff_CheckedChanged" />
        <asp:Button ID="testButton" runat="server" OnClick="mybutton_click"/>
    </ContentTemplate>
</asp:UpdatePanel>

Solution

Depending on your requirement you can control post backs by adding triggers. Use AsyncPostBackTrigger when you want to update only the update panel content. If you need full post back use PostBackTrigger.

<asp:UpdatePanel ID="updatePanelToggle" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:RadioButton ID="radioOn" AutoPostBack="true" runat="server" GroupName="toggle" Text="On" OnCheckedChanged="radioOn_CheckedChanged" />
        <asp:RadioButton ID="radioOff" AutoPostBack="true" runat="server" GroupName="toggle" Text="Off" OnCheckedChanged="radioOff_CheckedChanged" />
        <asp:Button ID="testButton" runat="server" OnClick="mybutton_click"/>
    </ContentTemplate>
   <Triggers>
        <asp:AsyncPostBackTrigger ControlID="radioOn" />
        <asp:AsyncPostBackTrigger ControlID="radioOff" />
        <asp:PostBackTrigger ControlID="testButton" />
    </Triggers>
</asp:UpdatePanel>