English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

ASP.NETのコントロールRadioButtonList詳細

「RadioButtonList」コントロールは、一組のオプションボックスコントロールをエンケードしたリストコントロールを表します。 

ウェブページにオプションボックスを追加するために、2種類のASP.NETコントロールを使用できます:個々の「RadioButton」コントロールまたは「RadioButtonList」コントロールです。これらの両方のコントロールは、ユーザーが一組の互いに排他的な事前に定義されたオプションから選択できるようにします。これらのコントロールを使用して、ラベル付きのオプションボックスの任意の数を定義し、水平または垂直に並べることができます。 

名前空間:System.Web.UI.WebControls
アセンブリ:System.Web(system.web.dll内) 

[ValidationPropertyAttribute("SelectedItem")]
public class RadioButtonList : ListControl, IRepeatInfoUser, INamingContainer, IPostBackDataHandler
RadioButtonListコントロールウェブ開発者に、データバインディングで動的に生成できる一組のラジオボタンを提供します。このコントロールにはItemsコレクションがあり、コレクションのメンバーはリストの各アイテムに対応しています。選択されたアイテムを特定するには、リストのSelectedItem属性をテストしてください。 

RepeatLayoutおよびRepeatDirection属性を使用してリストの表示方法を指定できます。RepeatLayoutをRepeatLayout.Table(デフォルト設定)に設定すると、リストはテーブルに表示されます。RepeatLayout.Flowに設定すると、リストはテーブル形式では表示されません。デフォルトでは、RepeatDirectionはRepeatDirection.Verticalに設定されています。この属性をRepeatDirection.Horizontalに設定すると、リストは水平に表示されます。 

RadioButtonListの使い方:

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

1.RadioButtonList 検証

  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("長期・中期契約の必須項目です!");
  return false;
  }

2.RadioButtonListのスタイル調整 

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

3.onselectedindexchangedイベント 

ドロップダウンコントロールのdropdownlistコントロールと同様に、onselectedindexchangedイベントも持ちます。オプションが変更された後にトリガーされます 

ポイントは、コントロール内のAutoPostBack属性が「True」に設定されていることです。これにより、サーバー側がオプションが変更されたことを知り、相应のイベントをトリガーします

4.ListItemにヒントを追加します

RadioButtonList1.Items[0].Attributes.Add("title", "ヒント内容");

5.データソースをバインドします            

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.変更された選択項の前景色を変更します

<asp:RadioButtonList ID="rblIsLock" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblIsLock_SelectedIndexChanged" RepeatDirection="Horizontal" RepeatLayout="Flow">   
<asp:ListItem Selected="True" Value="0">启用 </asp:ListItem>   
<asp:ListItem Value="}}1">無効 </asp:ListItem> 
</asp:RadioButtonList> 
<label>*無効なユーザーはログインできません</label>

バックグラウンド:   

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.バックグラウンドでRadioButtonListを動的に追加   

 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はTableRowのセル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.前台で選択項の背景色を変更 

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

以下に付3個の素晴らしい特集:

ASP.NET コントロールの使用マニュアル

ASP.NET データバインディング コントロールの使用まとめ

ASP.NET コントロールの使用まとめ

これで本文のすべてが終わり、皆様の学習に役立つことを願っています。また、ナイアラベンチャー教程を多くのサポートをお願いします。

声明:本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を持ちません。また、人間による編集は行われていません。著作権侵害を疑う内容があれば、メールを送信して:notice#oldtoolbag.com(メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害疑いのコンテンツを削除します。)

おすすめ