快捷導(dǎo)航

通過RadioButton對(duì)DataList控件進(jìn)行單選實(shí)例說明

更新時(shí)間：2013年01月20日 10:45:47 作者：

本例實(shí)現(xiàn)通過RadioButton對(duì)DataList控件進(jìn)行單選,aspx拉一個(gè)DataList控件，把RadioButton置于DataList的ItemTemplate模版內(nèi);在.aspx.cs內(nèi)為DataList控件綁定數(shù)據(jù),很實(shí)用的功能，感興趣的朋友可以了解下啊

本例實(shí)現(xiàn)通過RadioButton對(duì)DataList控件進(jìn)行單選。你可以參考下面演示。

準(zhǔn)備好一個(gè)星座對(duì)象，并定義好一個(gè)泛型List來存儲(chǔ)每一個(gè)星座名稱。

復(fù)制代碼代碼如下:

 
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拉一個(gè)DataList控件，把RadioButton置于DataList的ItemTemplate模版內(nèi)。

復(fù)制代碼代碼如下:

 
<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內(nèi)為DataList控件綁定數(shù)據(jù)：

復(fù)制代碼代碼如下:

 
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來實(shí)現(xiàn)onclick事件

復(fù)制代碼代碼如下:

 
<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> 