5.7 列表控件(DropDownList,ListBox和BulletedList)

  在Web开发中,经常会需要使用列表控件,让用户的输入更加简单。例如在用户注册时,用户的所在地是有限的集合,而且用户不喜欢经常键入,这样就可以使用列表控件。同样列表控件还能够简化用户输入并且防止用户输入在实际中不存在的数据,如性别的选择等。

5.7.1 DropDownList列表控件
  列表控件能在一个控件中为用户提供多个选项,同时又能够避免用户输入错误的选项。例如,在用户注册时,可以选择性别是男,或者女,就可以使用DropDownList列表控件,同时又避免了用户输入其他的信息。因为性别除了男就是女,输入其他的信息说明这个信息是错误或者是无效的。下列语句声明了一个DropDownList列表控件,示例代码如下所示。
+展开
-HTML
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>6</asp:ListItem>
            <asp:ListItem>7</asp:ListItem>
        </asp:DropDownList>

  上述代码创建了一个DropDownList列表控件,并手动增加了列表项。同时DropDownList列表控件也可以绑定数据源控件。DropDownList列表控件最常用的事件是SelectedIndexChanged,当DropDownList列表控件选择项发生变化时,则会触发该事件,示例代码如下所示。
+展开
-C#
        protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
        {
            Label1.Text = "你选择了第" + DropDownList1.Text + "项";
        }

  上述代码中,当选择的项目发生变化时则会触发该事件,如图5-14所示。当用户再次进行选择时,系统会将更改标签1中的文本,如图5-15所示。
选择第三项
图5-14 选择第三项
选择第一项
5-15 选择第一项

  当用户选择相应的项目时,就会触发SelectedIndexChanged事件,开发人员可以通过捕捉相应的用户选中的控件进行编程处理,这里就捕捉了用户选择的数字进行字体大小的更改。

5.7.2 ListBox列表控件
  相对于DropDownList控件而言,ListBox控件可以指定用户是否允许多项选择。设置SelectionMode属性为Single时,表明只允许用户从列表框中选择一个项目,而当SelectionMode属性的值为Multiple时,用户可以按住Ctrl键或者使用Shift组合键从列表中选择多个数据项。当创建一个ListBox列表控件后,开发人员能够在控件中添加所需的项目,添加完成后示例代码如下所示。
+展开
-HTML
        <asp:ListBox ID="ListBox1" runat="server" Width="137px" AutoPostBack="True">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>6</asp:ListItem>
        </asp:ListBox>

  从结构上看,ListBox列表控件的HTML样式代码和DropDownList控件十分相似。同样,SelectedIndexChanged也是ListBox列表控件中最常用的事件,双击ListBox列表控件,系统会自动生成相应的代码。同样,开发人员可以为ListBox控件中的选项改变后的事件做编程处理,示例代码如下所示。
+展开
-C#
        protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Label1.Text = "你选择了第" + ListBox1.Text + "项";
        }

  上述代码中,当ListBox控件选择项发生改变后,该事件就会被触发并修改相应Label标签中文本,如图5-16所示。
上面的程序同样实现了DropDownList中程序的效果。不同的是,如果需要实现让用户选择多个ListBox项,只需要设置SelectionMode属性为“Multiple”即可,如图5-17所示。
 ListBox单选
图5-16 ListBox单选
SelectionMode属性
图5-17 SelectionMode属性

  当设置了SelectionMode属性后,用户可以按住Ctrl键或者使用Shift组合键选择多项。同样,开发人员也可以编写处理选择多项时的事件,示例代码如下所示。
+展开
-C#
        protected void ListBox1_SelectedIndexChanged1(object sender, EventArgs e)
        {
            Label1.Text += ",你选择了第" + ListBox1.Text + "项";
        }

  上述代码使用了“+=”运算符,在触发SelectedIndexChanged事件后,应用程序将为Label1标签赋值,如图5-18所示。当用户每选一项的时候,就会触发该事件,如图5-19所示。
单选效果
图5-18 单选效果
多选效果
图5-19 多选效果

  从运行结果可以看出,当单选时,选择项返回值和选择的项相同,而当选择多项的时候,返回值同第一项相同。所以,在选择多项时,也需要使用Item集合获取和遍历多个项目。

5.7.3 BulletedList列表控件
  BulletedList与上述列表控件不同的是,BulleteList控件可呈现项目符号或编号。对BulleteList属性的设置为呈现项目符号,则当BulletedList被呈现在页面时,列表前端会则会显式项目符号或者特殊符号,效果如图5-20所示。
BulletedList显式效果
图5-20 BulletedList显式效果
  BulletedList可以通过设置BulletStyle属性来编辑列表前的符号样式,常用的BulletStyle项目符号编号样式如下所示。
?1)Circle:项目符号设置为○。
?2)CustomImage:项目符号为自定义图片。
?3)Disc:项目符号设置为●。
?4)LowerAlpha:项目符号为小写字母格式,如a、b、c等。
?5)LowerRoman:项目符号为罗马数字格式,如i、ii等。
?6)NotSet:表示不设置,此时将以Disc样式为默认样式。
?7)Numbered:项目符号为1、2、3、4等。
?8)Square:项目符号为黑方块■。
?9)UpperAlpha:项目符号为大写字母格式,如A、B、C等。
?10)UpperRoman:项目符号为大写罗马数字格式如Ⅰ、Ⅱ、Ⅲ等。
  同样,BulletedList控件也同DropDownList以及ListBox相同,可以添加事件。不同的是生成的事件是Click事件,代码如下所示。
+展开
-C#
        protected void BulletedList1_Click(object sender, BulletedListEventArgs e)
        {
            Label1.Text += ",你选择了第" + BulletedList1.Items[e.Index].ToString() + "项";
        }

  DropDownList和ListBox生成的事件是SelectedIndexChanged,当其中的选择项被改变时,则触发该事件。而BulletedList控件生成的事件是Click,用于在其中提供逻辑以执行特定的应用程序任务。

加支付宝好友偷能量挖...


评论(0)网络
阅读(208)喜欢(0)Asp.Net/C#/WCF