2017年1月24日 星期二

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

[研究][JavaScript][C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝 - 讓 DropDownList 可以輸入關鍵字，即時過濾顯示下拉選項

2017-01-24
2019-01-29 更新

Select2 | jQuery Plugin Registry v4.0.3
https://plugins.jquery.com/select2/

Select2 - The jQuery replacement for select boxes v3.5.1
https://select2.github.io/


其中 select2.css 中寫

Select2 Bootstrap Theme v0.1.0-beta.9

/*!
 * Select2 Bootstrap Theme v0.1.0-beta.9 (https://select2.github.io/select2-bootstrap-theme)
 * Copyright 2015-2016 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)
 * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)
 */















2019-01-29  補充

如果 select 可設定 class，DropDownList 可設定 CssClass
<script type="text/javascript">
        $(document).ready(function () {
            $(".Select2Class").select2();
        });
    </script>

PS：放 </body> 之前



如果 DropDownList1 沒有在任何 Control 之中 (ex : DetailsView, GridView, ...)
    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList1.ClientID %>").select2();
        });
    </script>
PS：放 </body> 之前

會被 IIS 翻譯成下面，name 和 id 會相同

<select name="DropDownList1" id="DropDownList1">
<option value="apple">apple</option>
<option value="pine-apple">pine-apple</option>
<option value="banana">banana</option>
</select>


*****

如果 DropDownList2 在任何 Control 之中 (ex : DetailsView, GridView, ...)
<script type="text/javascript">
        $(function () {
            $("[id$='DropDownList2']").select2();
        });
    </script>



**********
對於有「主版頁面」MasterPage.master 的網頁

    <script type="text/javascript">
        $(function () {
            $("#<%= DropDownList1.ClientID %>").select2();
        });
    </script>

會被 IIS翻譯成
    <script type="text/javascript">
        $(function () {
            $("#ContentPlaceHolder1_DropDownList1").select2();
        });
    </script>


而
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
...(略)
<asp:DropDownList ID="DropDownList1" runat="server">
                </asp:DropDownList>
...(略)
</asp:Content>

會被 IIS翻譯成下面，name 和 id 不一致，導致 select2() 無法運作
因為 select2 找 name 為 ContentPlaceHolder1_DropDownList1 的，沒找到
<select  id="ContentPlaceHolder1_DropDownList1" name="ctl100$ContentPlaceHolder1_DropDownList1">


如果自己替 DropDownList 加上 name 屬性

<asp:DropDownList name="ctl100$ContentPlaceHolder1_DropDownList1" ID="DropDownList1" runat="server">
</asp:DropDownList>


會被 IIS翻譯成 (變成2個 name 屬性)
<select name="ctl00$ContentPlaceHolder1$DropDownList_School" id="ContentPlaceHolder1_DropDownList_School" name="ctl100$ContentPlaceHolder1_DropDownList_School">



也不行。

解決方式是 ClientIDMode ，使用 clientIDMode="Predictable" 或 ClientIDMode="Static"

Web.Config 中
<system.web>
    <pages clientIDMode="Predictable" >
<system.web>

或
<asp:DropDownList clientIDMode="Predictable" ID="DropDownList1">
</asp:DropDownList>

**********

但實際測試有問題

<asp:TextBox ID="TextBox1" ClientIDMode="Predictable" required="required" TextMode="Password" AutoComplete="Off" runat="server"></asp:TextBox>
<br />
<asp:DropDownList ID="DropDownList1" ClientIDMode="Predictable" runat="server"></asp:DropDownList>

HTML Source  ( ClientIDMode="Predictable" 不見了)

<input name="ctl00$ContentPlaceHolder1$TextBox1" type="password" id="ContentPlaceHolder1_TextBox1" required="required" AutoComplete="Off" />
<br />
<input id="ContentPlaceHolder1_CheckBox1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" onclick="ShowPW1();" />
<label for="ContentPlaceHolder1_CheckBox1">顯示密碼</label>
<select name="ctl00$ContentPlaceHolder1$DropDownList1" id="ContentPlaceHolder1_DropDownList1">

ClientIDMode="Predictable" 只支援 ListView，不支援其它？？？(待測)

https://docs.microsoft.com/zh-tw/dotnet/api/system.web.ui.control.clientidmode?view=netframework-4.8


(完)

相關

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況

[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html



張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)