管理资源吧首页>>>教程>>>编程>>>ASP.NET教程>>>

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

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

教程首页 更多教程