ASP. RadioButtonList Explanation of NET Control

  • 2021-08-16 23:33:44
  • OfStack

The "RadioButtonList" control represents a list control that encapsulates a set of radio button controls.

You can use two types of ASP. NET controls to add radio buttons to a Web page: individual "RadioButton" controls or one "RadioButtonList" control. Both types of controls allow users to choose from 1 group of mutually exclusive predefined options. Using 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
The RadioButtonList control provides Web page developers with a set of radio buttons that can be dynamically generated through data binding. The control contains an Items collection whose members correspond to items in the list. To determine which 1 item is selected, test the list's SelectedItem property.

You can use the RepeatLayout and RepeatDirection attributes to specify how the list is rendered. If RepeatLayout is set to RepeatLayout. Table (the default), the list is rendered in the table. If set to RepeatLayout. Flow, the list is not rendered as a table. By default, RepeatDirection is set to RepeatDirection. Vertical. When this property is set to RepeatDirection. Horizontal, the list is rendered 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 check


  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 medium and long-term contract is required! ");
  return false;
  }

2. RadioButtonList style adjustment

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

3. onselectedindexchanged Event

Like the drop-down dropdownlist control 1, it also has an onselectedindexchanged event, which is triggered when the option changes

Note that the AutoPostBack property 1 in the control is set to "True", so that the server will know that your option has changed and trigger the corresponding event

4. Add hints for ListItem

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

5. Bind a 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>

Backstage:


protected void rblIsLock_SelectedIndexChanged(object sender, EventArgs e) 

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

 } 

}

7. Dynamic addition of 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 Yes TableRow Adj. 1 Cells 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. The foreground changes the background color of the selected item


  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 = "";
  }
  }
 }


Three wonderful topics are attached to you:

ASP. NET Control User's Manual

ASP. NET data-bound control usage summary

ASP. NET Control Usage Summary


Related articles: