最近剛好遇到一個需求就是在傳統的Asp.net Web Forms中要使用到下拉多選(MultiSelect DropDown)功能，當然Web Form可以用傳統的ListBox控制項很簡單來做到，但現在像Bootstrap等等前端框架一堆可以做出更好看更強的下拉多選功能，所以就研究了一下發現其實要在Web Form專案中去使用並不難，下面就來做個簡單Sample。
首先加入一個ListBox控制項，而Button 按下後則會在Label顯示當前選擇的選項
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"> | |
| <asp:ListItem Text="Item1" Value="1" /> | |
| <asp:ListItem Text="Item2" Value="2" /> | |
| <asp:ListItem Text="Item3" Value="3" /> | |
| <asp:ListItem Text="Item4" Value="4" /> | |
| </asp:ListBox> | |
| <asp:Button ID="Button1" runat="server" Text="Show Select" OnClick="Button1_Click" /> | |
| <asp:Label ID="Label1" runat="server" Text=""></asp:Label> |
接著引用相關Jquery、Bootstrap等等JS和CSS檔案，並在ready事件中找到剛剛的ListBox去呼叫multiselect()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head runat="server"> | |
| <title>Sample</title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css" /> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#<%=ListBox1.ClientID%>').multiselect(); | |
| }); | |
| </script> | |
| </head> |
雖然變成了Bootstrap控制項但在Button Click中取得選擇Item的程式都一樣
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| protected void Button1_Click(object sender, EventArgs e) | |
| { | |
| var query = ListBox1.Items.Cast<ListItem>().Where(x => x.Selected).Select(y => y.Text).ToArray(); | |
| Label1.Text = string.Join(",",query); | |
| } |
另外也可以參考Bootstrap Multiselect它的文件說明去加入全選按鈕或filter文字方塊，這些都不會影響後端程式碼取Item的方式
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#<%=ListBox1.ClientID%>').multiselect({ | |
| includeSelectAllOption: true, | |
| allSelectedText: 'All Selected', | |
| enableFiltering: true, | |
| filterPlaceholder: 'Search...' | |
| }); | |
| }); | |
| </script> |
利用這方式就算是傳統的Web Forms專案一樣可以很簡單的去使用Bootstrap控制項，而且後端C# code也可以一樣取到值
Reference
http://www.codewithasp.net/2015/04/jquery-multiselect-dropdown-in-aspnet.html
Shih-Ming Tung的檔案
發表文章
0 意見:
張貼留言