Select2 Fill Drop down with ajax Web Method不起作用

Posted 2023-05-07

【中文标题】Select2 Fill Drop down with ajax Web Method不起作用

【英文标题】：Select2 Fill Drop down with ajax Web Method not working

【发布时间】：2020-11-28 11:27:35

【问题描述】：

CSS 用户 select2 版本 Select2-4.0.13 和 bootstrap4

   <link href="Styles/Select2-4.0.13/select2.min.css" rel="stylesheet" type="text/css" />
   <link href="Styles/Select2-4.0.13/select2-bootstrap4.min.css" rel="stylesheet" type="text/css" />

ASPX 使用类 js-data-example-ajax 创建下拉列表名称

<form id="form1" runat="server">
    <asp:DropDownList runat="server" class="js-data-example-ajax" style="width: 300px">
    </asp:DropDownList>
</form>

Java 脚本 使用文档就绪方法中的 ajax Web 方法调用将数据加载到 select2 下拉列表 但它会引发错误并且无法正常工作

    <script src="Scripts/jquery-3.4.1/jquery-3.4.1.min.css" type="text/javascript"></script>
    <script src="Scripts/Select2-4.0.13/select2.full.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () 
            $('.js-data-example-ajax').select2(
                theme: 'bootstrap4',
                minimumInputLength: 1,
                containerCssClass: ':all:',
                allowClear: true,
                ajax: 
                    url: 'WebForm1.aspx/getsource',
                    dataType: 'json',
                    //type: "POST",
                    params: 
                        contentType: 'application/json; charset=utf-8'
                    ,
                    data: function (params) 
                        var query = 
                            q: params.term,
                            page: params.page
                        
                        return query;
                    ,
                    processResults: function (data, params) 
                        params.page = params.page || 1;
                        data = jQuery.map(data.results, function (obj) 
                            obj.id = obj.id;
                            obj.text = obj.text;
                            return obj;
                        );
                        return 
                            results: data,
                            pagination: 
                                more: params.page * 30 < 4//total records
                            
                        ;
                    ,
                    success: function (data) 
                        console.log("SUCCESS: ", data);
                    ,
                    error: function (data) 
                        console.log("ERROR: ", data);
                    ,
                    cache: true
                
            );
        );
    </script>

.CS 文件 创建方法作为 web 方法，使用 select2 将数据加载到下拉列表

  [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string getsource(string q, int page)
        
            Select2ModelMain obj = new Select2ModelMain();
            obj.results = new List<SelectResult>();

            SelectResult objdata1 = new SelectResult();
            objdata1.id = 1;
            objdata1.text = "INDIA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 2;
            objdata1.text = "AMERICA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 3;
            objdata1.text = "CHINA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 4;
            objdata1.text = "SRILANKA";
            obj.results.Add(objdata1);

            obj.pagination = new SelectPage();
            obj.pagination.more = "true";

            if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
            
                obj.results = obj.results.Where(x => x.text.ToLower().StartsWith(q.ToLower())).ToList();
            
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string test = serializer.Serialize(obj);
            return test;
        

        public class Select2ModelMain
        
            public List<SelectResult> results  get; set; 
            public SelectPage pagination  get; set; 
        

        public class SelectResult
        
            public int id  get; set; 
            public string text  get; set; 
            public string disabled  get; set; 
        

        public class SelectPage
        
            public string more  get; set; 
        

output

【问题讨论】：

你遇到了什么错误？

【参考方案1】：

第 1 步： 在 Select2ModelMain 上更改

public List<SelectResult> results  get; set; 

to（如果是名称结果，我有一个问题）

public List<SelectResult> items  get; set; 

第 2 步：

试试这个 javascript 作为首字母来检查它是否正常工作。 注意：确保操作方法是 'POST' 而不是 'GET' 我不确定如果 GET for select2 用于正常的 ajax 调用是否有效。

旁注： 当在正常的 ajax 请求上使用 GET 时，这应该设置为 UseHttpGet = true [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

For other options when using select2 remote query

$(document).ready(function () 
        $('.js-data-example-ajax').select2(
            ajax: 
                url: 'TestSelect2Page.aspx/getsource',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                delay: 250,
                data: function (params) 

                    var search = '';

                    if (params.term !== undefined) 
                        search = params.term;
                    

                    return "'q': '" + search + "'";
                ,
                processResults: function (data) 
                    var items = JSON.parse(data.d).items

                    if (items == null) 
                        return null;
                    

                    return 
                        results: items
                    ;
                
            ,
            placeholder: 'Search here',
            minimumInputLength: 1
        );
    );

输出 1：

输出 2：

我希望这会有所帮助。编码愉快。

【讨论】：

非常感谢它的工作......但我们面临另一个问题，请检查我的回答......

【参考方案2】：

非常感谢它的工作... enter image description here 但我们面临另一个问题

即选定的事件已更改 OnSelectedIndexChanged 不起作用

所以我们添加了另一行“”

在此之后它会触发 OnSelectedIndexChanged 但它不显示选定的项目 2 3

 <asp:Label ID="LblItemName" runat="server" Style="font-weight: bold;" Text="Product Name"></asp:Label>
                                <asp:DropDownList runat="server" ID="txtItemName" data- CssClass="select2-single input-sm w-100"
                                    AutoPostBack="true" OnSelectedIndexChanged="txtItemName_SelectedIndexChanged">
                                    <asp:ListItem Selected="True"></asp:ListItem>
                                </asp:DropDownList>

【讨论】：

你真的需要使用 DropDownList 和 DataGridView 吗？或者，您可以使用 和 ？问题是，一旦您的 DropDown 成为 select2 控件，其服务器端事件的功能将不再立即起作用。有一些方法/黑客等，但它会使主要目标变得复杂。