Detailed Explanation of RadioButtonList Control in ASP.NET

'RadioButtonList' control represents a list control that encapsulates a group of radio button controls.　

Two types of ASP.NET controls can be used to add radio buttons to a webpage: individual 'RadioButton' controls or a 'RadioButtonList' control. Both types of controls allow users to select from a group of mutually exclusive predefined options. With these controls, you can define any number of labeled radio buttons and arrange them horizontally or vertically.　

Namespace:System.Web.UI.WebControls
Assembly:System.Web (in system.web.dll)　

[ValidationPropertyAttribute("SelectedItem")]
public class RadioButtonList : ListControl, IRepeatInfoUser, INamingContainer, IPostBackDataHandler
RadioButtonList controlProvides a set of radio buttons for web developers that can be dynamically generated through data binding. The control contains an Items collection, where the members correspond to the items in the list. To determine which item is selected, test the SelectedItem property of the list.　

The RepeatLayout and RepeatDirection properties can be used to specify how the list is displayed. If RepeatLayout is set to RepeatLayout.Table (the default setting), the list will be displayed in a table. If set to RepeatLayout.Flow, the list will not be displayed in a tabular form. By default, RepeatDirection is set to RepeatDirection.Vertical. When the property is set to RepeatDirection.Horizontal, the list will be displayed horizontally.　

RadioButtonList Usage:

　　　　　　　　　　　　　　　 <div class="rblStyle">
　　　　　　　　　　　　　　　 <asp:RadioButtonList ID="rblChangQHT" runat="server" RepeatDirection="Horizontal">
　　　　　　　　　　　　　　　 <asp:ListItem Text="Yes" Value="1></asp:ListItem>
　　　　　　　　　　　　　　　 <asp:ListItem Text="No" Value="0"></asp:ListItem>
　　　　　　　　　　　　　　　 </asp:RadioButtonList></div>　

1.RadioButtonList validation

  var rb_ChangQHT = document.getElementById("rblChangQHT");
  var ShiF = rb_ChangQHT.getElementsByTagName("INPUT");
  var result = false;
  for (var i = 0; i < ShiF.length; i++) {
  if (ShiF[i].checked) {
   result = true;
   break;
  }
  }
  if (!result) {
  alert("Whether it is a long-term contract is a required item!");
  return false;
  }

2.RadioButtonList style adjustment　

.rblStyle{width:100%;height:auto;}
.rblStyle input{border-style:none;}　

3.onselectedindexchanged event　

Like the dropdown control dropdownlist control, it also has the onselectedindexchanged event, which is triggered after the option changes　

Note: The AutoPostBack property of the control must be set to "True" so that the server knows that your option has changed and triggers the corresponding event

4.Add prompt to ListItem

RadioButtonList1.Items[0].Attributes.Add("title", "Prompt content");

5.Bind data source　　　　　　　　　　　　

string sql = "select * from province";
DataTable dt = SQLHelper.ExecuteDataTable(sql);
this.RadioButtonList1.DataSource = dt;
this.RadioButtonList1.DataTextField = "Provinces";
this.RadioButtonList1.DataValueField = "PId";
this.RadioButtonList1.DataBind();

6.Change the foreground color of the selected item

<asp:RadioButtonList ID="rblIsLock" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblIsLock_SelectedIndexChanged" RepeatDirection="Horizontal" RepeatLayout="Flow">   
<asp:ListItem Selected="True" Value="0">Enable </asp:ListItem>   
<asp:ListItem Value="}}1">Disable </asp:ListItem> 
</asp:RadioButtonList> 
<label>*Disabled users will not be able to log in</label>

Background:　　　

protected void rblIsLock_SelectedIndexChanged(object sender, EventArgs e) 
{ 
 var rbl = sender as RadioButtonList; 
 HighlightSelectedItem(rbl); 
}
private void HighlightSelectedItem(RadioButtonList rbl) 
{ 
 foreach (ListItem li in rbl.Items) 
 {  
 if (li.Selected)  
 {  
 li.Attributes.Add("style", "color: red;");  
 } 
 } 
}

7.dynamically adds RadioButtonList in the background　　　

 RadioButtonList rbl = new RadioButtonList();
   rbl.ID = "rbl" + (i + 1).ToString();
   rbl.BorderStyle = BorderStyle.None;
   rbl.RepeatLayout = RepeatLayout.Flow;
   rbl.RepeatDirection = RepeatDirection.Horizontal;
   rbl.TextAlign = TextAlign.Right;
   rbl.CellSpacing = 6;
   rbl.Attributes.Add("onclick", "CheckRbl('ctl00_ctl00_ctl00_ContentPlaceHolder1_cphBody_cphLower_" + rbl.ID + "')");
   rbl.DataSource = dtRating.DefaultView;
   rbl.DataTextField = "LevelID";
   rbl.DataValueField = "LevelID";
   rbl.DataBind();
   tc.Controls.Add(rbl); //tc is a cell of TableRow, named TableCell
   for (int k = 0; k < rbl.Items.Count; k++)
   {
   rbl.Items[k].Attributes.Add("title", dtRating.Rows[k][1].ToString());
   rbl.Items[k].Attributes.Add("style", "margin-left:10px;");
   }

8.Change the background color of the selected item on the front-end　

  window.onload = function () {
  var arr = document.getElementsByTagName("INPUT");
  for (var i = 0; i < arr.length; i++) {
  if (arr[i].checked) {
   if (arr[i].type == "radio") {
   arr[i].style.backgroundColor = "red";
   }
   else {
   arr[i].style.backgroundColor = "";
   }
  }
  else {
   arr[i].style.backgroundColor = "";
  }
  }
 }

Here is attached for everyone3A series of exciting topics:

ASP.NET Controls Manual

Summary of ASP.NET Data Binding Controls Usage

Summary of ASP.NET Controls Usage

That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yell Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)