ASP 4.0 – RadioButton Control

Table of Contents

ASP 4.0 RadioButton Control

ASP 4.0 RadioButton Control allows you to pick one of many values. Radio buttons are a group of controls. For example, if there are 4 radio buttons, a user can keep only one radio button in a checked state within a group. If there are two groups, the user can keep two buttons in checked state. Means, one button in each group can be in a selected state. In this Lab, we will create a Radio Button group and mention which one is in checked state.

1: Design ASP.40 Form with Radio Buttons

In this step, we will design the form with Radio Buttons. Open the Website from our previous Lab and add a new WebForm called: 05_RadioButtonControl.aspx then follow the steps below:

Step 1 Design ASP 4.0 Form with RadioButton Controls

1) Create a Free Text as shown.
2) Note, we divide the Free Text into two lines using the <br/> tag.
3) Create three RadioButton Control in the WebForm
4) Use the source view shown here to set the properties via Properties Window or edit the attribute in the source window.
5) Add a Button control to the Form. When the user clicks this button, it will report the selected radio button.
6) Marker six shows the Properties of the button control.

2: Group Radio Button & Report Selected One

In this section, we will group all three radio buttons so that the user can check only one button at a time. Follow the steps below:

Step 2 - Radio Button State GroupName Property — Step 2 – Radio Button State GroupName Property

1) Select all three radio buttons and set GroupName property as ProductItem. Now, all three radio buttons are grouped into ProductName.
2) Drag & Drop a Label control to the Web Form. We will use it to report the selected radio button item.
3) The Label Control’s properties are shown here.
4) Handle the Click event of the Save button.
5) In the Click Event handler, we test the Checked Property of the Radio Button and assign the Label text.

3: Run the ASP 4.0 RadioButton Example

In this section, we will test our sample application. Follow the steps below:

Step 3 - Running the Lab Example — Step 3 – Running the Lab Example

1) Run the WebForm and the default Web Server will show web form with Radio Buttons.
2) Pick the radio button Item 3. You can see the check mark added to the selected item. The label is not changed because we handled only the Save Button’s click event. Form data is also not posted to the server as we do not set AutoPostBack property for any of the Radio Buttons.
3) Select Item 2 radio button. You can notice the web browser removes the check mark from Item 3 and places it on item 2. This is because we group all the radio buttons via the GroupName property.
4) Click on the Save button. This action will submit the data to the server and run all the event routines on the server.
5) Save button handler runs on the server & the label control reports the selected radio button.

Code Reference

05_RadioButtonControl.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="05_RadioButtonControl.aspx.cs" 
  Inherits="_05_RadioButtonControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            font-family: Verdana;
            font-size: large;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="style1">
    
        Radio Button Control Example.<br />
        Pick an Item:<br />
    
    </div>
    <asp:RadioButton ID="radItem1" runat="server" Font-Names="Verdana" 
        GroupName="ProductItem" Text="Item 1" />
    <br />
    <br />
    <asp:RadioButton ID="radItem2" runat="server" Font-Names="Verdana" 
        GroupName="ProductItem" Text="Item 2" />
    <br />
    <br />
    <asp:RadioButton ID="radItem3" runat="server" Font-Names="Verdana" 
        Font-Size="Medium" GroupName="ProductItem" Text="Item 3" />
    <br />
    <br />
    <asp:Button ID="btnSave" runat="server" Font-Names="Cambria" 
        Font-Size="X-Large" onclick="btnSave_Click" Text="Save" />
    <br />
    <br />
    <asp:Label ID="lblInfo" runat="server" Font-Size="Large" ForeColor="Blue" 
        Text="Label"></asp:Label>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="05_RadioButtonControl.aspx.cs"

Inherits="_05_RadioButtonControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.style1

{

font-family: Verdana;

font-size: large;

}

</style>

</head>

<body>

Radio Button Control Example.<br />

Pick an Item:<br />

</div>

<asp:RadioButton ID="radItem1" runat="server" Font-Names="Verdana"

GroupName="ProductItem" Text="Item 1" />

<br />

<asp:RadioButton ID="radItem2" runat="server" Font-Names="Verdana"

GroupName="ProductItem" Text="Item 2" />

<br />

<asp:RadioButton ID="radItem3" runat="server" Font-Names="Verdana"

Font-Size="Medium" GroupName="ProductItem" Text="Item 3" />

<br />

<asp:Button ID="btnSave" runat="server" Font-Names="Cambria"

Font-Size="X-Large" onclick="btnSave_Click" Text="Save" />

<br />

<asp:Label ID="lblInfo" runat="server" Font-Size="Large" ForeColor="Blue"

Text="Label"></asp:Label>

</form>

</body>

</html>

05_RadioButtonControl.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _05_RadioButtonControl : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
        //Sample 01: Check the Radio State and update the Label
        if (radItem1.Checked == true)
        {
            lblInfo.Text = "Item 1 Selected";
        }
        else if (radItem2.Checked == true)
        {
            lblInfo.Text = "Item 2 Selected";
        }
        else
        {
            lblInfo.Text = "Item 3 Selected";
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _05_RadioButtonControl : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnSave_Click(object sender, EventArgs e)

{

//Sample 01: Check the Radio State and update the Label

if (radItem1.Checked == true)

{

lblInfo.Text = "Item 1 Selected";

}

else if (radItem2.Checked == true)

{

lblInfo.Text = "Item 2 Selected";

}

else

{

lblInfo.Text = "Item 3 Selected";

}

Categories: ASP 4.0

Do you like this Example? Please comment about it for others!!Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

ASP 4.0 – RadioButton Control – Lab #009