RadioButtonList and radiobuttonlist of ASP. NET controls

RadioButtonList and radiobuttonlist of ASP. NET controls

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

You can use two types of ASP. NET controls to add single-choice buttons to a webpage: Each "RadioButton" control or a "RadioButtonList" control. Both controls allow users to select from predefined options that are mutually exclusive to each other. Using these controls, you can define any number of radio buttons with tags 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
RadioButtonListControls provide a set of radio buttons for Web developers. These buttons can be dynamically generated through data binding. This control contains an Items set. The members in the Set correspond to the Items in the list. To determine which item is selected, test the SelectedItem attribute of the list.

You can use the RepeatLayout and RepeatDirection attributes to specify how the list is displayed. IfRepeatLayoutSetRepeatLayout. Table(Default). The list is displayed in the table. If it is setRepeatLayout. FlowThe list is not displayed as a table. By default,RepeatDirectionSetRepeatDirection. Vertical. Set this attributeRepeatDirection. HorizontalThe list is 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 Verification

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

2. RadioButtonList style Adjustment

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

3. onselectedindexchanged event

Like the dropdownlist control, the drop-down control also has the onselectedindexchanged event, which is triggered when the option is changed.

Note: The AutoPostBack attribute in the control must be set to "True", so that the server knows that your options have changed and the corresponding event is triggered.

4. Add a prompt for ListItem

RadioButtonList1.Items [0]. Attributes. Add ("title", "prompt content ");
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 = "inline" RepeatDirection = "Horizontal" RepeatLayout = "Flow">

<Asp: ListItem Selected = "True" Value = "0"> enabled </asp: ListItem>

<Asp: ListItem Value = "1"> disable </asp: ListItem>

</Asp: RadioButtonList>

<Label> * disabled users cannot log on </label>

Background:

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. Add RadioButtonList dynamically 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 table cell of TableRow.

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