通过RadioButton对DataList控件进行单选实例说明

时间:2022-02-01 07:54:52

本例实现通过RadioButton对DataList控件进行单选。你可以参考下面演示。 
通过RadioButton对DataList控件进行单选实例说明 
准备好一个星座对象,并定义好一个泛型List来存储每一个星座名称。 

复制代码代码如下:


Constelltion.cs 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
/// <summary> 
/// Summary description for Constellation 
/// </summary> 
namespace Insus.NET 

public class Constellation 

private int _ID; 
private string _Name; 
public int ID 

get { return _ID; } 
set { _ID = value; } 

public string Name 

get { return _Name; } 
set { _Name = value; } 

public Constellation() 

// 
// TODO: Add constructor logic here 
// 

public Constellation(int id, string name) 

this._ID = id; 
this._Name = name; 

public List<Constellation> GetConstellation() 

List<Constellation> constellation = new List<Constellation>(); 
Constellation c = new Constellation(1, " 白羊座"); 
constellation.Add(c); 
c = new Constellation(2, "金牛座"); 
constellation.Add(c); 
c = new Constellation(3, "双子座"); 
constellation.Add(c); 
c = new Constellation(4, "巨蟹座"); 
constellation.Add(c); 
c = new Constellation(5, "狮子座"); 
constellation.Add(c); 
c = new Constellation(6, "处女座"); 
constellation.Add(c); 
c = new Constellation(7, "天秤座 "); 
constellation.Add(c); 
c = new Constellation(8, "天蝎座"); 
constellation.Add(c); 
c = new Constellation(9, "射手座"); 
constellation.Add(c); 
c = new Constellation(10, "摩羯座"); 
constellation.Add(c); 
c = new Constellation(11, "水瓶座"); 
constellation.Add(c); 
c = new Constellation(12, "双鱼座"); 
constellation.Add(c); 
return constellation; 



在.aspx拉一个DataList控件,把RadioButton置于DataList的ItemTemplate模版内。 

复制代码代码如下:


<asp:DataList ID="DataListConstellation" runat="server" Width="100" CellPadding="0" CellSpacing="0"> 
<ItemStyle BorderWidth="1" /> 
<ItemTemplate> 
<table> 
<tr> 
<td> 
<asp:RadioButton ID="RadioButtonSelect" runat="server" onclick="SelectedRadio(this);" /></td> 
<td><%# Eval("ID") %></td> 
<td><%# Eval("Name") %></td> 
</tr> 
</table> 
</ItemTemplate> 
</asp:DataList> 


在.aspx.cs内为DataList控件绑定数据: 

复制代码代码如下:


using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Insus.NET; 
public partial class _Default : System.Web.UI.Page 

Constellation objConstellation = new Constellation(); 
protected void Page_Load(object sender, EventArgs e) 

if (!IsPostBack) 
Data_Binding(); 

private void Data_Binding() 

this.DataListConstellation.DataSource = objConstellation.GetConstellation(); 
this.DataListConstellation.DataBind(); 


最后,我们写一段Javascript来实现onclick事件 

复制代码代码如下:


<script type="text/javascript"> 
function SelectedRadio(rb) { 
var gv = document.getElementById("<%=DataListConstellation.ClientID%>"); 
var rbs = gv.getElementsByTagName("input"); 
var row = rb.parentNode.parentNode; 
for (var i = 0; i < rbs.length; i++) { 
if (rbs[i].type == "radio") { 
if (rbs[i].checked && rbs[i] != rb) { 
rbs[i].checked = false; 
break; 




</script>