When radio button selection changes do not cause refresh?

Question

When the selection of the radio buttons change I would like to show/hide the panel in the next table cell. I have it hiding and showing fine but each time it causes the page to refresh to the top. Is their a way to stop that refresh? I would like to hide and show the panel dynamically.

<table>
<tr>
            <td>
                <asp:RadioButtonList runat="server" ID="rblPlayerStatus" AutoPostBack="true" >
                    <asp:ListItem>Free Agent</asp:ListItem>
                    <asp:ListItem>I have teammate</asp:ListItem>
                </asp:RadioButtonList>
            </td>
            <td>
                <asp:Panel runat="server" ID="pnlTeamMate">
                    <asp:Label runat="server" ID="lblTeamMate" Text="Choose Teammate" />
                </asp:Panel>
            </td>
        </tr>      
</table>

Answer 1

Use the AJAX.ASP.Net library - then you add a ScriptManager item, and an UpdatePanel. Anything within the UpdatePanel will update through AJAX, not a full page refresh.

Answer 2

Do you have any server side logic based on which show and hide the panel. If yes then you could use update panel control. If it is just client side logic such as

If Free Agent is select show FreeAgent Panel else Team Panel

use javascript or rather jquery to achieve the same.

Answer 3

From your code, I can't see where you hide and show the panel. You could use an updatepanel, but that is best used when you need to retrieve more information from the server.

If you simply want to show and hide the panel, you can do it better with Javascript, by adding some code to the OnClick event to set the panel's visibility css attribute. There are a few tutorials on google about how to do this. Something like this should be sufficient to get you started.

Answer 4

Solution would be either using AJAX (UpdatePanel and ScriptManager) or removing AutoPostback = true and using JavaScript to display/hide the panel