多列下拉组合框 ASP.NET 2.0服务器控件

分享于 

9分钟阅读

Web开发

  繁體

介绍

这个代码Fragment是smash和抓取系列的一部分。 如果你急于使用这个代码,你可以将该代码插入到你的应用程序中,不需要了解。 有时间( 对,对) 时,可能需要检查源代码。

背景

我提出了一个将访问单用户应用程序转换为基于web的多用户 SQL Server 应用程序的。 访问应用程序有许多多列下拉列表,我在互联网上找不到我需要的东西。 所以我自己写了。

对于本文,我在NorthWind数据库中使用了产品。供应商和类别 table。

使用代码

  • 下载该项目,将它的解压到硬盘上的某个位置。
  • 创建新的ASP.NET 项目。
  • 右键单击项目并选择添加现有项目。
  • 导航到解压缩到的文件夹,并选择. JS 和. GIF 文件。
  • 为项目创建一个bin文件夹。
  • 右键单击bin并选择添加现有项目。
  • 选择工具> 选择工具箱项。
  • 导航到解压文件夹并选择 DLL。
  • 这里新服务器控件现在出现在下面的工具箱中。
  • 将它的实例拖到 Default.aspx. 上
  • SqlDataSource的实例拖到 Default.aspx. 上
  • 将数据源配置为使用自定义SQL语句:
    SELECT Products.ProductID, Products.ProductName, 
     left(Products.ProductName+SPACE(40),40)+Suppliers.CompanyName as Name, 
     Categories.CategoryName FROM Products INNERJOIN Categories ON Products.CategoryID = Categories.CategoryID INNERJOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID orderby Categories.CategoryName, Products.ProductName

DropDownComboControl 上设置这些属性:

  • DropDownCssStyle: font-family: monospace,background-color: 黄色
  • DropDownCssClass:
  • DropDownMonospace: true
  • DropDownSize: 10
  • TextBoxCssStyle: background-color: 蓝色
  • TextBoxCssClass:
  • TextBoxColumns: 20
  • TextBoxMaxLength: 30
  • PickOnly: false
  • onchange: SetTextBox ( 这个,this.options [this.selectedIndex]. extra ) ;
  • DataExtraField: ProductName
  • DataOptGroup: 未分类
  • DataSourceID: sql cmd
  • DataTextField: 名称
  • DataValueField: ProductID
  • ImageFolder:。
  • ImageWidth: 26
  • ScriptFolder:。

除了 DataSourceIDDataTextFieldDataValueField 之外,列出的所有其他属性都是新的。 控件由一个文本框( <输入> 元素) 和一个 dropdownlist ( <选择> 元素)。

感兴趣的属性:

  • Border: ( 1px 实心 InactiveBorder ) 设置控件的边框。
  • DropDownCssClass: 设置 属性 <选择> 元素。
  • DropDownCssStyle: 设置应用程序的style 属性 <选择> 元素。
  • DropDownSize: 设置应用程序的size 属性 <选择> 元素。
  • TextBoxCssClass: 设置 属性 <输入> 元素。
  • TextBoxCssStyle: 设置应用程序的style 属性 <输入> 元素。
  • TextBoxColumns: 设置应用程序的size 属性 <输入> 元素。
  • TextBoxMaxLength: 设置应用程序的maxlength 属性 <输入> 元素。
  • PickOnly ( true / false ): 当设置为 true 你只能从列表中选择,不能输入自定义值。
  • DataOptGroup: 组合框可以实现 <optgroup> 功能(。查看上面的屏幕截图)。 这里属性告诉组合框哪个字段包含 optgroup 值。一个新 <optgroup> 每次指定值更改时都创建,因此在 上面 中 选择 语句,你可以看到 ORDER BY 子句首先设置为 CatagoryName
  • DataExtraField: 组合框可以将额外的信息放在 <选项> 标记。例如: <</选项> 选项 value=" 3"extra="Coffee"> Coffee 稍后你将看到如何使用。
  • ImageFolder: 这是下拉图像所在的文件夹(。 对于当前文件夹)。
  • ImageWidth: 下拉图像的宽度。 提供的图像为 26像素。
  • ScriptFolder: 这是JavaScript代码所在的文件夹(。 对于当前文件夹)。

你可以在屏幕快照 上面 中看到下拉列表比文本框宽很多。 这允许你向用户提供关于选择的更多信息,但一旦选择,就会消耗更少的房地产。

在屏幕快照中,我希望下拉列表是多列,第二列数据正确对齐。 为此,我需要选择固定宽度字体:

  • DropDownCssStyle: font-family:'信使新','monospace'

    我必须确保多个空格没有像HTML标准一样被折叠到一个空格中。 我是通过设置 DropDownCollapseSpaces: false 这里属性告诉控件用- 替换空间以保持间距。 默认情况下,控件将用选定的下拉条目填充文本框。

在本示例中,我不希望在文本框中使用公司 NAME,因这里我添加了一个 OnClick 事件处理程序:

ComboWithAdjustableDropDownWidth.SetTextBox(this, 
 this.options[this.selectedIndex].extra);

这将获取我们存储在的额外信息( 记住 DataExtraField ) <选项> 并把它放在文本框里。 你可以将 OnClick 处理程序设置为任何你想要的。

Points of interest

控件也可以与 GridView 一起使用,以便在中使用。

<cc1:combowithadjustabledropdownwidthid="ComboWithAdjustableDropDownWidth1"runat="server"...SelectedValue='<%# Bind("SupplierID") %></cc1:combowithadjustabledropdownwidth>

你必须把这个编辑到源代码中,因为,并不是为你做的。 在源zip文件中,我包含了一个小项目,它向 FormView 元素显示数据绑定。 项目还列出了一些其他固定间距字体。

结语

好了,一个便宜的( 免费) ASP.NET 2.0组合框,适合我的需要,希望你的。

smashgrab/redux系列

我最近在CodeProject上开始了两系列文章。 Smash和抓取是针对一个特定代码技术的一系列短文章。 ,作为一系列较长的文章,尝试将复杂的主题( 像 GridView ) 减少到它的基本组成部分。 要找到粉碎和抓取文章,搜索关键字 SmashGrab。 查找,文章,搜索关键字,。

我欢迎任何一个系列的任何贡献,但请按照提交文章时的指导。


COM  Server  控制  COL  asp  asp-net  
相关文章