ListBox Web 服务器控件使用户能够从预定义的列表中选择一项或多项。
一、方案
若要一次显示多个项并使用户能够从预定义列表中选择一个或多个项,请使用 ListBox Web 服务器控件。ListBox 控件与 DropDownList 控件的不同之处在于,它可以一次显示多个项并使用户能够选择多个项(可选)。
二、功能
可以使用 ListBox 控件执行下列操作:
·设置控件以显示特定数目的项。
·设置控件的大小(以像素为单位)。
·使用数据绑定来指定要显示的项的列表。
·确定选定了哪个项或哪些项。
·以编程方式指定选定的一个或多个项。
三、背景
ListBox 控件通常用于一次显示一个以上的项。您可以在以下几个方面控制列表的外观:
·显示的行数。可将该控件设置为显示特定的项数。如果该控件包含比设置的项数更多的项,则显示一个垂直滚动条。
·高度和宽度。可以以像素为单位设置控件的大小。在这种情况下,控件将忽略已设置的行数,而是显示足够多的行直至填满控件的高度。有些浏览器不支持以像素为单位设置高度和宽度,而使用行数设置。
与其他 Web 服务器控件一样,您可以使用样式对象来指定控件的外观。
1、列表项
ListBox 控件是一个或多个列表项的容器。每个列表项都是一个具有各自的属性的 ListItem 类型的对象。下表说明了这些属性。
属性 | 说明 |
指定在列表中显示的文本。 | |
包含与某个项相关联的值。设置此属性使您可以将该值与特定的项关联而不显示该值。例如,可以将 Text 属性设置为某种颜色的名称,并将 Value 属性设置为其十六进制表示形式。 | |
指示当前是否已选定此项。 |
若要以编程方式处理项,请使用 ListBox 控件的 Items 集合。Items 集合是一个标准集合,您可以向它添加项对象,也可以从中删除项或清除集合等。
当前所选项可在 ListBox 控件的 SelectedItem 属性中得到。如果将控件设置为单选模式,则此属性将返回一个选定的项。如果将控件设置为多选模式,则通过循环遍历整个 Items 集合并检查每个项的 Selected 属性来获取选定的项。
2、单选与多选
通常,用户可以通过单击列表中的单个项来选择它。如果将 ListBox 控件设置为允许进行多重选择,则用户可以在按住 Ctrl 或 Shift 键的同时,单击以选择多个项。
3、将数据绑定到控件
可以使用 ListBox Web 服务器控件列出使用数据源控件的页可使用的选项。ListBox 控件中的每个项分别对应于数据源中的一个项(通常是单个数据记录)。
控件显示来自数据源的一个字段。(可选)可将控件绑定到另一个字段以设置某个项的值(该值不显示)。
与其他服务器控件一样,您可以将任何控件属性(例如控件的颜色或大小)绑定到数据。
4、ListBox 事件
当用户选择一项时,ListBox 控件将引发 SelectedIndexChanged 事件。默认情况下,此事件不会导致将页发送到服务器,但可以通过将 AutoPostBack 属性设置为 true 使此控件强制立即回发。
说明: 自动回发功能要求浏览器支持 ECMAScript(Jscript 或 JavaScript),并且用户的浏览器上已启用脚本撰写。
四、如何:向 Web 窗体页添加 ListBox Web 服务器控件
1、从工具箱的“标准”选项卡中,将 ListBox 控件拖到页面上。
2、在“属性”窗口中,设置下列属性:
属性 | 说明 | ||
Rows | 设置该属性以指定一次显示多少项。
| ||
SelectionMode | 设置为 Single 或 Multiple 以指定用户可以选择多少项。 |
3、按照以下方法之一为该控件创建项:
·分别创建每一项。
·将数据绑定到控件。
五、ListBox 类
表示允许单项或多项选择的列表框控件。
使用 ListBox 控件创建允许单项或多项选择的列表控件。使用 Rows 属性指定控件的高度。若要启用多项选择,请将 SelectionMode 属性设置为 ListSelectionMode.Multiple。
可以使用 Items 集合检查 ListBox 控件中包含的 ListItem 对象。例如,可以通过枚举 Items 集合并测试每个 ListItem 元素的 Selected 值来确定 ListBox 控件中的选定项。
警告: 此控件可用来显示用户输入,而该输入可能包含恶意的客户端脚本。在应用程序中显示从客户端发送来的任何信息之前,先检查这些信息中是否含有可执行脚本、SQL 语句或其他代码。在用控件显示输入文本之前,可以使用验证控件验证用户输入。ASP.NET 提供了输入请求验证功能,用于阻止用户输入中的脚本和 HTML。
示例
1、下面的示例说明如何创建 ListBox 控件
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>ListBox Example</title>
<script language="C#" runat="server">
void SubmitBtn_Click(Object sender, EventArgs e)
{
if (ListBox1.SelectedIndex > -1)
Label1.Text="You chose: " + ListBox1.SelectedItem.Text;
}
</script>
</head>
<body>
<h3>ListBox Example</h3>
<form id="form1" runat="server">
<asp:ListBox id="ListBox1"
Rows="6"
Width="100px"
SelectionMode="Single"
runat="server">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
<asp:ListItem>Item 4</asp:ListItem>
<asp:ListItem>Item 5</asp:ListItem>
<asp:ListItem>Item 6</asp:ListItem>
</asp:ListBox>
<asp:button id="Button1"
Text="Submit"
OnClick="SubmitBtn_Click"
runat="server" />
<asp:Label id="Label1"
Font-Names="Verdana"
Font-Size="10pt"
runat="server"/>
</form>
</body>
</html>
2、下面的示例说明如何通过数据绑定创建 ListBox 控件。
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Data Binding ListBox</title>
<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList values = new ArrayList();
values.Add ("Item 1");
values.Add ("Item 2");
values.Add ("Item 3");
values.Add ("Item 4");
values.Add ("Item 5");
values.Add ("Item 6");
ListBox1.DataSource = values;
ListBox1.DataBind();
}
}
void SubmitBtn_Click(Object sender, EventArgs e)
{
if ( ListBox1.SelectedIndex > -1 )
Label1.Text = "You chose: " + ListBox1.SelectedItem.Text;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>Data Binding ListBox</h3>
<asp:ListBox id="ListBox1"
Width="100px"
runat="server"/>
<asp:button id="Button1"
Text="Submit"
OnClick="SubmitBtn_Click"
runat="server" />
<asp:Label id="Label1"
Font-Names="Verdana"
font-size="10pt"
runat="server"/>
</form>
</body>
</html>