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

源码下载

介绍

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

源码所运用到的知识:

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

例子

背景

使用这个控件,你完全不需要懂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"中设置

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

到此就介绍完了,欢迎交流!!!

你可能感兴趣的:(list)