65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 多列下拉列表

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.32/5 (40投票s)

2004年9月22日

5分钟阅读

viewsIcon

417805

downloadIcon

7251

在 ASP.NET 中显示下拉列表中的多列。

引言

网络上有很多下拉列表控件,但我没有见过任何下拉列表控件可以像 VB 或 MS Access 那样显示多列,所以我自己构建了一个控件,它会根据 SQL 语句中的选择来显示列,例如“Select col1,col2,col3 from db”,但我建议最多选择两到三列。

控件是如何构建的

这不仅仅是一个控件,而是一个复合控件,意味着它是由多个控件组成的,最终形成一个超级控件。下图演示了控件的工作原理。使用的控件是 TextBoxLabelDataGrid 和一个包含所有控件的 Panel 控件。我还为 TextBoxDataGrid 设置了 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 方法,所有技巧都在这里完成。此控件的另一个功能是,当你将鼠标悬停在网格上时,你可以看到文本框中的文本在变化。

尽情享用!

© . All rights reserved.