saw that this question is asked on a regular basis so I decided to create a simple code snippet that shows the possibilities. The most important thing to remember is to set the Autopostback property of the radiobuttonlist to true so when someone clicks on
a another radiobutton from the list the webform does postback automatically. This causes the server side SelectedIndexChanged event of the radiobuttonlist to be handled.
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel1</asp:ListItem>
<asp:ListItem Value="Panel2">Panel2</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
VB.NET version:
<%@ Page Language="VB" %>
<script runat="server">
Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Select RadioButtonList1.SelectedItem.Text
Case "Panel1"
Panel1.Visible = True
Panel2.Visible = False
Case "Panel2"
Panel1.Visible = False
Panel2.Visible = True
End Select
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel1</asp:ListItem>
<asp:ListItem Value="Panel2">Panel2</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
Read my blog | Twitter Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
I wast trying to create the radiobuttonlist which stores a hexodecimal values of the colours in each
listitem.
I would like to allow user to change the background colour - depends on his/her visual needs (that could be used targeting accessibility issues). With the time
listitems could be replaced with the cells containing the colours itself (divs or table cells). User could click the colour and the background colour would change to suits their needs. The same option could be used for font colour.
Anyway - values could be stored in database in future, rather then hard coding its values into the list we could create some kind of loop which would retrieve the data from the database - you know the idea.
Now, how to process the code from the radiobuttonlist which keeps the hexodecimal values of the colours to change the background colour upon the chosen radiobutton?
The beginning of the code looks like this (it's C#):
I did exactly as the example says. And made selected="true" for one of the radio buttons. But it doesnt fire during the first time the page opens. The radiobutton appear selected, but the function doesnt fire.
But it does when I manually select each one of them by clicking. Does anyone know why?
I wast trying to create the radiobuttonlist which stores a hexodecimal values of the colours in each
listitem.
I would like to allow user to change the background colour - depends on his/her visual needs (that could be used targeting accessibility issues). With the time
listitems could be replaced with the cells containing the colours itself (divs or table cells). User could click the colour and the background colour would change to suits their needs. The same option could be used for font colour.
Anyway - values could be stored in database in future, rather then hard coding its values into the list we could create some kind of loop which would retrieve the data from the database - you know the idea.
Now, how to process the code from the radiobuttonlist which keeps the hexodecimal values of the colours to change the background colour upon the chosen radiobutton?
Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Select RadioButtonList1.SelectedItem.Text
Case "Panel One"
Panel1.Visible = True
Panel2.Visible = False
Case "Panel Two"
Panel1.Visible = False
Panel2.Visible = True
End Select
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel One</asp:ListItem>
<asp:ListItem Value="Panel2">Panel Two</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
Select RadioButtonList1.SelectedItem.Text
Case "Panel One"
Panel1.Visible = True
Panel2.Visible = False
Case "Panel Two"
Panel1.Visible = False
Panel2.Visible = True
End Select
End Sub
Thanks for your help regarding this issue. I have managed to sort a similar issue that I was having with a ListBox.
The one thing I was wondering, is why does Visual Studio insert this 'wrong' code. I would have thought it would add the event handler code automatically. (OnSelectedIndexChanged="ListBox1_SelectedIndexChanged")
I added this bit of text in and then got another error. It said it couldn't access the method because it was automatically set to private. So I changed it to public and hey presto! It works....
Am I missing something... Is there another way that Microsoft wants us to do it or is this just a Micro-Bug?
XIII
All-Star
182674 Points
23445 Posts
ASPInsiders
Moderator
MVP
Show or hide a panel depending on a radiobuttonlist
Apr 10, 2005 09:23 AM|LINK
Hi,
saw that this question is asked on a regular basis so I decided to create a simple code snippet that shows the possibilities. The most important thing to remember is to set the Autopostback property of the radiobuttonlist to true so when someone clicks on a another radiobutton from the list the webform does postback automatically. This causes the server side SelectedIndexChanged event of the radiobuttonlist to be handled.
This example is done with server side code but I also created a client side solution a while ago: Setting display mode or visibility client side for a panel with domscripting
Grz, Kris.
C# version:
<%@ Page Language="C#" %>
<script runat="server">
void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
switch(RadioButtonList1.SelectedItem.Text)
{
case "Panel1":
Panel1.Visible = true;
Panel2.Visible = false;
break;
case "Panel2":
Panel1.Visible = false;
Panel2.Visible = true;
break;
}
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel1</asp:ListItem>
<asp:ListItem Value="Panel2">Panel2</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
VB.NET version:
<%@ Page Language="VB" %>
<script runat="server">
Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Select RadioButtonList1.SelectedItem.Text
Case "Panel1"
Panel1.Visible = True
Panel2.Visible = False
Case "Panel2"
Panel1.Visible = False
Panel2.Visible = True
End Select
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel1</asp:ListItem>
<asp:ListItem Value="Panel2">Panel2</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
Scabro
Member
5 Points
1 Post
Re: Show or hide a panel depending on a radiobuttonlist
Dec 06, 2005 10:29 AM|LINK
Hi,
I wast trying to create the radiobuttonlist which stores a hexodecimal values of the colours in each listitem.
I would like to allow user to change the background colour - depends on his/her visual needs (that could be used targeting accessibility issues). With the time listitems could be replaced with the cells containing the colours itself (divs or table cells). User could click the colour and the background colour would change to suits their needs. The same option could be used for font colour.
Anyway - values could be stored in database in future, rather then hard coding its values into the list we could create some kind of loop which would retrieve the data from the database - you know the idea.
Now, how to process the code from the radiobuttonlist which keeps the hexodecimal values of the colours to change the background colour upon the chosen radiobutton?
The beginning of the code looks like this (it's C#):
---------------------------------------------------------------------
<%/@ Page Language="C#" Debug="True" %>
<script runat="server">
void optCol(object sender, EventArgs e)
{
}
</script>
<html>
<head> </head>
<body id="prb" bgcolor="#dedb04" runat="server">
<form runat="server">
<asp:radiobuttonlist id="radbtn" runat="server" OnSelectedIndexChanged="optCol" autopostback="true">
<asp:ListItem value="#CCCCCC">Colour 1</asp:ListItem>
<asp:ListItem value="#dedb04">Colour 2</asp:ListItem>
<asp:ListItem value="#c8c8c8">Colour 3</asp:ListItem>
<asp:ListItem value="#fefefe">Colour 4</asp:ListItem>
<asp:ListItem value="#0055qq">Colour 5</asp:ListItem>
<asp:ListItem value="#dadafe">Colour 6</asp:ListItem>
</asp:radiobuttonlist>
</form>
</body>
</html>
-------------------------------------------------------
Any idea how the code should looks like?
Take care,
Scabro
DevGirl
Member
95 Points
19 Posts
Re: Show or hide a panel depending on a radiobuttonlist= Not working initially
Feb 22, 2006 01:19 PM|LINK
Hi,
I did exactly as the example says. And made selected="true" for one of the radio buttons. But it doesnt fire during the first time the page opens. The radiobutton appear selected, but the function doesnt fire.
But it does when I manually select each one of them by clicking. Does anyone know why?
XIII
All-Star
182674 Points
23445 Posts
ASPInsiders
Moderator
MVP
Re: Show or hide a panel depending on a radiobuttonlist= Not working initially
Feb 22, 2006 05:46 PM|LINK
Hi Devgirl,
can you show the relevant pieces of your code?
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
XIII
All-Star
182674 Points
23445 Posts
ASPInsiders
Moderator
MVP
Re: Show or hide a panel depending on a radiobuttonlist
Feb 22, 2006 06:05 PM|LINK
Hi,
are you looking for something like this?
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
webformBody.Style.Add("background-color", "#cccccc");
}
}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
webformBody.Style.Add("background-color", RadioButtonList1.SelectedItem.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body runat="server" id="webformBody">
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="#ff0000"></asp:ListItem>
<asp:ListItem Text="#00ff00"></asp:ListItem>
</asp:RadioButtonList>
</div>
</form>
</body>
</html>
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
DevGirl
Member
95 Points
19 Posts
Re: Show or hide a panel depending on a radiobuttonlist
Mar 10, 2006 01:27 PM|LINK
This is my code
Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Select RadioButtonList1.SelectedItem.Text
Case "Panel One"
Panel1.Visible = True
Panel2.Visible = False
Case "Panel Two"
Panel1.Visible = False
Panel2.Visible = True
End Select
End Sub
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:RadioButtonList id="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="Panel1" Selected="True">Panel One</asp:ListItem>
<asp:ListItem Value="Panel2">Panel Two</asp:ListItem>
</asp:RadioButtonList>
</p>
<p>
<asp:Panel id="Panel1" runat="server">This is my first panel</asp:Panel>
<asp:Panel id="Panel2" runat="server" Visible="False">This is my second
panel...</asp:Panel>
</p>
</form>
</body>
</html>
pcdanno
Participant
1932 Points
399 Posts
Re: Show or hide a panel depending on a radiobuttonlist
Mar 10, 2006 02:46 PM|LINK
DevGirl
Member
95 Points
19 Posts
Re: Show or hide a panel depending on a radiobuttonlist
Mar 10, 2006 03:07 PM|LINK
XIII
All-Star
182674 Points
23445 Posts
ASPInsiders
Moderator
MVP
Re: Show or hide a panel depending on a radiobuttonlist
Mar 10, 2006 06:18 PM|LINK
Hi,
I would rather use the SelectedValue property.
Select RadioButtonList1.SelectedValue
Case "Panel1"
...
Grz, Kris.
Interested in Azure, ASP.NET (MVC), jQuery, WCF, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
Daryl_tt
Member
5 Points
1 Post
Re: Show or hide a panel depending on a radiobuttonlist
Apr 19, 2006 08:01 AM|LINK
Hi guys.
Thanks for your help regarding this issue. I have managed to sort a similar issue that I was having with a ListBox.
The one thing I was wondering, is why does Visual Studio insert this 'wrong' code. I would have thought it would add the event handler code automatically. (OnSelectedIndexChanged="ListBox1_SelectedIndexChanged")
I added this bit of text in and then got another error. It said it couldn't access the method because it was automatically set to private. So I changed it to public and hey presto! It works....
Am I missing something... Is there another way that Microsoft wants us to do it or is this just a Micro-Bug?
Cheers
Daryl