ASP.NET 多列下拉列表






3.32/5 (40投票s)
2004年9月22日
5分钟阅读

417805

7251
在 ASP.NET 中显示下拉列表中的多列。
引言
网络上有很多下拉列表控件,但我没有见过任何下拉列表控件可以像 VB 或 MS Access 那样显示多列,所以我自己构建了一个控件,它会根据 SQL 语句中的选择来显示列,例如“Select col1,col2,col3 from db
”,但我建议最多选择两到三列。
控件是如何构建的
这不仅仅是一个控件,而是一个复合控件,意味着它是由多个控件组成的,最终形成一个超级控件。下图演示了控件的工作原理。使用的控件是 TextBox
、Label
、DataGrid
和一个包含所有控件的 Panel
控件。我还为 TextBox
和 DataGrid
设置了 ID
属性为“txt
”和“DDL
”,因为由于 INamingContainer
接口的实现(用于维护控件的唯一名称),如果没有设置 ID 值,控件可能会生成“:CTL1”。
使用代码
使用代码非常简单,我展示的是 VB.NET 示例,但您也可以在 C# 中使用它。下载此控件的 DLL 文件,然后只需将控件添加到工具箱,从解压缩文件的位置选择 DLL 即可。一旦将控件拖放到 aspx 页面上,您就可以通过属性窗口或从 HTML 页面设置属性。
控件的属性
这个控件有很多属性,它们都是不言自明的,但有些属性需要一些解释,例如:
GridRowColor
- 当鼠标悬停在网格上时,设置网格的行颜色,默认颜色为 LightGray。GridTextColor
- 当鼠标悬停在网格上时,设置网格中文本的颜色,默认颜色为 Red。ViewColID
- 这是此控件的一个很酷的功能。想象一下你的“Select
”语句(或任何其他填充网格的方式)包含两列或更多列,而你只需要在文本显示中显示第 2、3 或第 4 列。你可以设置此属性的值来显示你喜欢的列,默认值为 0,表示显示第一列。如果你需要显示第三列,将此属性值设置为 2。如果你设置的值大于列数,将会显示一个错误,如下图所示。根据你为该属性选择的值,当你将鼠标悬停在网格上时,文本中的值会发生变化。
CssClass
- 复制此样式并将其粘贴到你的 aspx 页面的head
部分下方。<style lang="text/css" media="screen"> .general { FONT-SIZE: 8pt; COLOR: navy; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } </style>.
Height
- 不要通过属性窗口或 HTML 页面设置Height
属性,而是在你的代码隐藏页面中设置此属性。即:MultiColDD_List1.Height = Unit.Pixel(200)
ToolTip
- Tooltip 值可以更改为任何文本。
还有一点,这个控件有一个方法,“retTotRows
”,你必须使用这个方法,否则控件可能无法正常工作。实际上,这个方法返回要填充到下拉列表中的行数,并生成 Click 事件。
如何使用此方法
MultiColDD_List1.retTotRows(DS_P.Tables(0).Rows.Count)
或者,如果你从其他方式生成项目,请确保将总行数传递给此方法。
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
MultiColDD_List1.Width = Unit.Pixel(300)
MultiColDD_List1.Height = Unit.Pixel(200) ' make sure you set
'the height property, else there will be no scroll bar.
MultiColDD_List1.DataSource = CreateDataSources()
' this function returns the dataset to bind to the control
MultiColDD_List1.DataBind()
End If
End Sub
Function CreateDataSources() As DataSet
Try
Dim DS_P As DataSet
Dim cn As SqlConnection
Dim cmdP As SqlDataAdapter
Dim sqlStr As String =
"select au_Lname,Phone from authors " ' you could add more cols
'Change the SQL Server name {Data Source = <your server name>}
cn = New SqlConnection("Integrated Security=SSPI;Persist Security
Info=False;Initial Catalog=Pubs;Data Source=NJ5Mail")
cmdP = New SqlDataAdapter(sqlStr, cn)
DS_P = New DataSet
cmdP.Fill(DS_P, "Policies")
MultiColDD_List1.retTotRows(DS_P.Tables(0).Rows.Count)
' make sure you use this method
Return DS_P
DS_P.Dispose()
cmdP.Dispose()
cn.Close()
Catch ex As Exception
End Try
End Function
检索控件值
选择项目后,可以通过 JavaScript 将下拉列表的值发送到另一个页面,或者直接在代码隐藏中检索。假设我们有一个 HTML 按钮。在该按钮的 onClick
事件中,可以将下拉列表的值发送到另一个页面,下面的代码演示了这一点。
<script language="javascript">
function Show(){
window.open("anotherPage.aspx?ddValue=" +
document.getElementById('MultiColDD_List1_txt').value);
}
</script>
<input id="Shows" onclick="Show();" type="button" value="HTML BUTTON">
请确保控件的名称以“_txt”结尾。要在同一页面中使用,请直接调用控件的值,例如:MultiColDD_List1.Text
。
使用 Intellisense
有很多自定义控件,当你在 aspx 页面中使用它们时,你看不到控件的属性,这让你很难找到控件的属性。那么如何让 intellisense 工作呢?首先,你需要为这个控件生成模式文件,即“.xsd”,ZIP 文件包含此控件的 .xsd。将此 .xsd 文件复制到以下文件夹:
- C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Packages\schemas\xml
并在你的 aspx 页面的 body
标签中添加以下代码:
<body xmlns:ksj1="urn:http://schemas.ksjControls.com/ASPNET"
MS_POSITIONING="GridLayout">
下图显示了 intellisense。
关注点
此控件实现了 INamingContainer
接口。如果你查看 ASP.NET 页面的 HTML 输出,控件的客户端名称并不总是与你在服务器代码中给它们起的名称匹配。这是因为 ASP.NET 会自动重命名它们以保持组织性,并确保没有两个控件具有相同的客户端 ID。通过实现 INamingContainer
接口,自定义控件被识别为子控件的容器。它还确保所有子控件在输出中具有相似的名称。这对于在客户端代码中引用控件很重要。这就是为什么当你点击“Show”按钮时,控件的值是从 MultiColDD_List1_txt.value
获取的,而不是从你在 aspx 页面中指定的 ID
,即 MultiColDD_List1
。因为这是一个复合控件,所以我重写了 CreateChildControls
方法,而不是使用 Render
方法,所有技巧都在这里完成。此控件的另一个功能是,当你将鼠标悬停在网格上时,你可以看到文本框中的文本在变化。
尽情享用!