通過RadioButton對DataList控件進行單選實例說明

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> 

 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com