How to make code for radio button selection to display pannel in c#?

Hi,
You can achieve your requirement by using OnCheckedChanged event of radio button like given below

/// <summary>

        /// Handles the CheckChanged event of the ShowPanels control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

        protected void ShowPanels_CheckChanged(object sender, System.EventArgs e)

        {

            //Get the radio button object from sender

            RadioButton radioButton = (RadioButton)sender;

            //Check the id of Radion button

            if (((RadioButton)sender).ClientID == "ShowPanel1")

            {

                //Show the Panel 1

                panel1.Visible = true;

                //Hide the Panel 2

                panel2.Visible = false;

            }

            else if (((RadioButton)sender).ClientID == "ShowPanel2")

            {

                //Show the Panel 2

                panel2.Visible = true;

                //Hide the Panel 1

                panel1.Visible = false;

            }

        }

Complete Code:
HTML:

<asp:RadioButton ID="ShowPanel1" runat="server" AutoPostBack="true" GroupName="ShowPanels"

            OnCheckedChanged="ShowPanels_CheckChanged" Text="Show Panel1" />

        <asp:RadioButton ID="ShowPanel2" runat="server" AutoPostBack="true" GroupName="ShowPanels"

            OnCheckedChanged="ShowPanels_CheckChanged" Text="Show Panel2" />

        <asp:Panel runat="server" Visible="false" ID="panel1">

        Panel1

        </asp:Panel>

        <asp:Panel runat="server" Visible="false" ID="panel2">

        Panel2

        </asp:Panel>

C#:

/// <summary>

        /// Handles the CheckChanged event of the ShowPanels control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

        protected void ShowPanels_CheckChanged(object sender, System.EventArgs e)

        {

            //Get the radio button object from sender

            RadioButton radioButton = (RadioButton)sender;

            //Check the id of Radion button

            if (((RadioButton)sender).ClientID == "ShowPanel1")

            {

                //Show the Panel 1

                panel1.Visible = true;

                //Hide the Panel 2

                panel2.Visible = false;

            }

            else if (((RadioButton)sender).ClientID == "ShowPanel2")

            {

                //Show the Panel 2

                panel2.Visible = true;

                //Hide the Panel 1

                panel1.Visible = false;

            }

        }

Please Mark as Answer if it solves your question

Thanks,
A2H
My Blog

Raghuldrag, if this helps please login to Mark As Answer. | Alert Moderator

Hi,
You can also achieve the same functionality using Jquery. Advantage for this approach is that this will be faster since its a client side implementation and more over you can show nice animation effects when you hide and show the panel.
Please see the implementation given below
JQuery function

//One pagel oad hide both the panels
        $(document).ready(function () {
            $("#<%= panel1.ClientID %>").hide();
            $("#<%= panel2.ClientID %>").hide();
        });

        function showhidepanels() {
            if ($('input[name=ShowPanels]:checked').val() == "ShowPanel1") {
                //Show the Panel
                $('#<%= panel1.ClientID %>').fadeIn('slow');
                //Hide the Panel 1
                $('#<%= panel2.ClientID %>').fadeOut('slow'); 
               
            }
            else if ($('input[name=ShowPanels]:checked').val() == "ShowPanel2") {
                //Show the Panel
                $('#<%= panel2.ClientID %>').fadeIn('slow');
                //Hide the Panel 1
                $('#<%= panel1.ClientID %>').fadeOut('slow'); 

            }
        }

Also you need to ensure that you have referenced the necessary Jquery Js file prior to calling this function like given below

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Complete Code:
Jquery function:

   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
        //One pagel oad hide both the panels
        $(document).ready(function () {
            $("#<%= panel1.ClientID %>").hide();
            $("#<%= panel2.ClientID %>").hide();
        });

        function showhidepanels() {
            if ($('input[name=ShowPanels]:checked').val() == "ShowPanel1") {
                //Show the Panel
                $('#<%= panel1.ClientID %>').fadeIn('slow');
                //Hide the Panel 1
                $('#<%= panel2.ClientID %>').fadeOut('slow'); 
               
            }
            else if ($('input[name=ShowPanels]:checked').val() == "ShowPanel2") {
                //Show the Panel
                $('#<%= panel2.ClientID %>').fadeIn('slow');
                //Hide the Panel 1
                $('#<%= panel1.ClientID %>').fadeOut('slow'); 

            }
        }
    </script>

HTML Mark Up:

<asp:RadioButton ID="ShowPanel1" runat="server" GroupName="ShowPanels" onclick="showhidepanels()"
            Text="Show Panel1" />
        <asp:RadioButton ID="ShowPanel2" runat="server" GroupName="ShowPanels" onclick="showhidepanels()"
            Text="Show Panel2" />
        <asp:Panel runat="server" ID="panel1">
            Panel1
        </asp:Panel>
        <asp:Panel runat="server" ID="panel2">
            Panel2
        </asp:Panel>

Please Mark as Answer if it solves your question

Thanks,
A2H
My Blog

Raghuldrag, if this helps please login to Mark As Answer. | Alert Moderator