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

Posted by Raghuldrag under C# on 3/25/2014 | Points: 10 | Views : 962 | Status : [Member] | Replies : 2
Hi Friends,


i m creating one application in that i made two radio buttons


button1 button2


when i choose button1 ll display the pannel1 and pannel2 is hided


when i choose button2 ll display pannel2 and hide the pannel1


Thanks & Regards

Rocky




Responses

Posted by: A2H on: 3/25/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
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

Posted by: A2H on: 3/25/2014 [Member] [MVP] Silver | Points: 25

Up
0
Down
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

Login to post response