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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本例实现通过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> 