ASP.NET学习系列（七）开始控件之旅之列表和选项控件

checkbox控件用于显示一个复选框，而RadioButton用于显示一个单选项，一般成组出现。主

要属性：
checked：获取或设置按钮是否被选中。
GroupName：用于组合RadioButton控件。
事件：
CheckedChanged：选中情况发生变化时引发。

简单的两个示例：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxDemo.aspx.cs" Inherits="CheckBox_CheckBoxDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label">This is a Demo of CheckBox</asp:Label>
        <br />
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"
         Text="UnderLine" OnCheckedChanged="UnderLineChanged" />
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true"
         Text="OverLine" OnCheckedChanged="OverLineChanged" />
        <br />
        <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true"
         Text="StrikeOut" OnCheckedChanged="StrikeOutChanged" />
        <hr />
        <br />

    </div>
    </form>
</body>
</html>

后台代码：

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class CheckBox_CheckBoxDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void UnderLineChanged(object sender, EventArgs e)
    {
        Label1.Font.Underline = CheckBox1.Checked;
    }

    protected void OverLineChanged(object sender, EventArgs e)
    {
        Label1.Font.Overline = CheckBox2.Checked;
    }

    protected void StrikeOutChanged(object sender, EventArgs e)
    {
        Label1.Font.Strikeout = CheckBox3.Checked;
    }
}

RadioButton示例：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioButtonDemo.aspx.cs" Inherits="RadioButton_RadioButtonDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Label ID="Label1" runat="server" Text="Label">This is a Demo of CheckBox</asp:Label>
        <br />
        <hr />
        <asp:RadioButton ID="CheckBox1" runat="server" AutoPostBack="true"
         Text="UnderLine" OnCheckedChanged="UnderLineChanged" GroupName="fontGroup" />
        <br />
        <asp:RadioButton ID="CheckBox2" runat="server" AutoPostBack="true"
         Text="OverLine" OnCheckedChanged="OverLineChanged" GroupName="fontGroup" />
        <br />
        <asp:RadioButton ID="CheckBox3" runat="server" AutoPostBack="true"
         Text="StrikeOut" OnCheckedChanged="StrikeOutChanged" GroupName="fontGroup" />
        <br />
    </div>
    </form>
</body>
</html>

后台代码：

代码

代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class RadioButton_RadioButtonDemo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void UnderLineChanged(object sender, EventArgs e)
    {
        Label1.Font.Underline = CheckBox1.Checked;
        Label1.Font.Overline = CheckBox2.Checked;
        Label1.Font.Strikeout = CheckBox3.Checked;
    }

    protected void OverLineChanged(object sender, EventArgs e)
    {
        Label1.Font.Underline = CheckBox1.Checked;
        Label1.Font.Overline = CheckBox2.Checked;
        Label1.Font.Strikeout = CheckBox3.Checked;
    }

    protected void StrikeOutChanged(object sender, EventArgs e)
    {
        Label1.Font.Underline = CheckBox1.Checked;
        Label1.Font.Overline = CheckBox2.Checked;
        Label1.Font.Strikeout = CheckBox3.Checked;
    }
}

CheckBox的Ajax扩展主要有两个：
1、ToggleButtonExtender：可以用自己定义的表示选中与否的图片替换checkBoxk控件的原有

图片。
2、MutuallyExclusiveCheckBoxExtender：可以指定一组CheckBox控件，在任何时候只能有一

个被选中。

示例：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxWithAjax.aspx.cs" Inherits="CheckBox_CheckBoxWithAjax" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

      function pageLoad() {
      }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <asp:Label ID="Label1" runat="server" Text="Label">This is a Demo of CheckBox</asp:Label>
        <br />
        <hr />
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"
         Text="UnderLine" OnCheckedChanged="UnderLineChanged" />
        <cc1:ToggleButtonExtender ID="CheckBox1_ToggleButtonExtender" runat="server"
            Enabled="True" TargetControlID="CheckBox1" ImageHeight="20" ImageWidth="20"
             CheckedImageUrl="~/Image/ToggleButton_Checked.gif" UncheckedImageUrl="~/Image/ToggleButton_Unchecked.gif">
        </cc1:ToggleButtonExtender>
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true"
         Text="OverLine" OnCheckedChanged="OverLineChanged" />
        <cc1:MutuallyExclusiveCheckBoxExtender ID="CheckBox2_MutuallyExclusiveCheckBoxExtender"
            runat="server" Enabled="True" Key="key" TargetControlID="CheckBox2">
        </cc1:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true"
         Text="StrikeOut" OnCheckedChanged="StrikeOutChanged" />

        <cc1:MutuallyExclusiveCheckBoxExtender ID="CheckBox3_MutuallyExclusiveCheckBoxExtender"
            runat="server" Enabled="True" Key="key" TargetControlID="CheckBox3">
        </cc1:MutuallyExclusiveCheckBoxExtender>

        <br />
    </div>
    </form>
</body>
</html>

列表选择控件：
CheckBoxList是一个可以被动态创建且绑定到一个数据源上的CheckBox控件组。
RadioButtonList：是一个RadioButton控件组。
ListBox：可以从一个预定义列表中选择一项或多项。
DropDownList：类似ListBox，不过仅能做单项选择。
BulletedList：已经格式化的项目列表，可做简单文本或链接。

这些控件全部派生自ListControl类，并有很多共同点。
Items属性包含了ListItem对象的集合，其中，ListItem对象包括Enable、Selected、Text(要

显示的值)和Value(与对象相关，但不显示)等属性。
SelectedIndex和SelectedItem都指向最小索引值的选中项。
SelectedValue属性可以获取或指定选中项的值。
AppendDataBoundItems属性允许通过数据绑定向Items中添加列表项而不是替换Items。
这五个控件都会引发SelectedIndexChanged事件。
其中，ListBox和DropDownList呈现给用户的像一个单一的控件而不是一个集合。

以CheckBoxList为例讲述用法。
它的ListItem项可以静态添加也可以动态添加。也可以绑定到数据源。但绑定到数据源时，要注意它默认是用数据源的数据取代预先定义的数据。而如果不想这样，需要把CheckListBox的AppendDataBindItems属性设置为true，即将数据源作为添加项加入。其他几个控件也比较类似。

示例代码：

静态的代码

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxList.aspx.cs" Inherits="List控件_CheckBoxList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="the Selected Item is :"></asp:Label>
        <hr />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server"
         RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Flow"
          OnSelectedIndexChanged="OnSelectedChanged" AutoPostBack="true">
           <asp:ListItem Text="item 1" Value="1" />
           <asp:ListItem Text="item 2" Value="2" />
           <asp:ListItem Text="item 3" Value="3" />
           <asp:ListItem Text="item 4" Value="4" />
           <asp:ListItem Text="item 5" Value="5" />
           <asp:ListItem Text="item 6" Value="6" />
            <asp:ListItem Value="7">item7</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    </form>
</body>
</html>

动态添加代码：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxListArrayItems.aspx.cs" Inherits="List控件_CheckBoxListArrayItems" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="the Selected Item is :"></asp:Label>
        <hr />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server"
         RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Flow"
          OnSelectedIndexChanged="OnSelectedChanged" AutoPostBack="true"
           OnInit="OnListInit">
           <asp:ListItem Text="Item 0" Value="0" />
        </asp:CheckBoxList>
    </div>
    </form>
</body>
</html>

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class List控件_CheckBoxListArrayItems : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void OnSelectedChanged(object sender, EventArgs e)
    {
        if(CheckBoxList1.SelectedItem!=null)
           Label1.Text = "the Selected Item is :" + CheckBoxList1.SelectedItem.Text;
    }

    protected void OnListInit(object sender, EventArgs e)
    {
        string[] categories = { "item1", "item2", "item3", "item4" };
        foreach (string category in categories)
        {
            CheckBoxList1.Items.Add(new ListItem(category));
        }
    }
}

绑定到数据源代码：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxListDataBind.aspx.cs" Inherits="List控件_CheckBoxListDataBind" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:Label ID="Label1" runat="server" Text="the Selected Item is :"></asp:Label>
        <hr />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server"
         RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Flow"
          OnSelectedIndexChanged="OnSelectedChanged" AutoPostBack="true"
           OnInit="OnListInit" AppendDataBoundItems="true">
           <asp:ListItem Text="Item 0" Value="0" />
        </asp:CheckBoxList>
    </div>
    </form>
</body>
</html>

后台代码：

代码

代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class List控件_CheckBoxListDataBind : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void OnSelectedChanged(object sender, EventArgs e)
    {
        Label1.Text = "the Selected Item is :" + CheckBoxList1.SelectedItem.Text;
    }

    protected void OnListInit(object sender, EventArgs e)
    {
        string[] categories = { "item1", "item2", "item3", "item4" };
        CheckBoxList1.DataSource = categories;
        CheckBoxList1.DataBind();
    }
}

posted on 2010-03-23 23:00 缠中说禅阅读(474) 评论(0) 收藏举报