【让原控件见鬼去吧】之打造可编辑的DropdownList

源码下载

介绍

我们可以用ASP.NET提供的DropDownList控件非常简单的去展现一系列的选项，不过如果你想要允许用户输入信息，那么很是可惜啊，答案是不能，非得想要，你就得写javascript或者是jquery什么的。现在我将分享一个我觉得不错的DLL控件，你可以非常容易的集成到你的asp.net页面中。

源码所运用到的知识：

  • ASP.NET 4.0 / Webforms
  • C#
  • jQuery / JavaScript
  • CSS

例子

【让原控件见鬼去吧】之打造可编辑的DropdownList

背景

使用这个控件，你完全不需要懂jQuery,JavaScript,和CSS。唯一需要的是，你得在需要的页面引用它，还有正确的包含所用到的CSS和javascript文件，当然得写在引用控件的上面。OK，去下源码吧，里面有所有源码包括测试的。

怎样使用

你需要遵循下面的步骤：

1.在你的asp.net项目中引用EditableDropDownList.dll

  • 如果你从工具箱中拖拽，可以跳过步骤2到5
  • 至于怎么在工具箱中找到，你可以右击工具箱添加

2.在你的webpage最顶端注册EditableDropDownList

<%@ Register Assembly="EditableDropDownList"
Namespace="EditableControls" TagPrefix="editable" %>

3.在你的website中添加下列文件

  • jquery-ui.css
  • img/ui-bg_flat_0_aaaaaa_40x100.png
  • img/ui-icons_222222_256x240.png
  • img/ui-icons_454545_256x240.png
  • img/ui-icons_888888_256x240.png
  • (Javascript files below should be referenced in this order below)
  • jquery-1.6.4.min.js (* or greater)
  • jquery.ui.core.js
  • jquery.ui.widget.js
  • jquery.ui.button.js
  • jquery.ui.position.js
  • jquery.ui.autocomplete.js
  • jquery.ui.combobox.js (This file is not a part of the jQuery library)

4.在页面头部添加css和JavaScript的引用

<head runat="server">
    <title></title>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.button.js" type="text/javascript"></script>
    <script src="js/jquery.ui.position.js" type="text/javascript"></script>
    <script src="js/jquery.ui.autocomplete.js" type="text/javascript"></script>
    <script src="js/jquery.ui.combobox.js" type="text/javascript"></script>
</head>

5.再把控件按如下方式添加到页面就Ok了

<editable:EditableDropDownList ID="EditableDropDownList1" runat="server">
</editable:EditableDropDownList>

6.下面你可以手动用ListItems的方式，或者datasource的方式帮顶数据，这些例子都在源码里

7.好了，你已经完成了

EditableDropDownList和普通的控件有什么区别呢？

有如下几点：

  • OnClick事件是重写的

你可以捕捉用户选择或者点击项的事件，并且页面会自动产生一个postback

  • AutoWidth 自适应内容长度

这个功能取决于浏览器和<select>元素。这个控件不使用<select>，而是你指定宽度

  • 排序功能

可以为你自动的排序项

  • 去除重复项
  • 不允许有空项

如果你想有空的，可以用”&nbsp;“代替

  • 如果dropdownlist里没有任何项，或者Enabled=”false”那么它会显示成一个普通的textbox
  • 不过有些原来的特性，是没有的，比如DataTextFormatString，如果你想加的话，自己修改源码吧，哈哈
  • 它的最大高度是300px在"css/jquery-ui.css"中设置

当然这会产生滚动条，好处是不会变得太长。。。

到此就介绍完了，欢迎交流！！！

posted @ 2012-12-16 10:27  一文钱  阅读(1565)  评论(4)  编辑  收藏  举报