【讓原控制項見鬼去吧】之打造可編輯的DropdownList

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

源碼下載

介紹

我們可以用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>，而是你指定寬度

排序功能

可以為你自動的排序項

去除重複項
不允許有空項

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

如果dropdownlist裡沒有任何項，或者Enabled=”false”那麼它會顯示成一個普通的textbox
不過有些原來的特性，是沒有的，比如DataTextFormatString，如果你想加的話，自己修改源碼吧，哈哈
它的最大高度是300px在"css/jquery-ui.css"中設定

當然這會產生捲軸，好處是不會變得太長。。。

到此就介紹完了，歡迎交流！！！

轉載請註明：猿類世界 » 【讓原控制項見鬼去吧】之打造可編輯的DropdownList

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More