使用 ajax 和分页的带有 ASP 下拉列表控件的 Select2

Posted 2023-05-07

【中文标题】使用 ajax 和分页的带有 ASP 下拉列表控件的 Select2

【英文标题】：Select2 with ASP dropdownlist control using ajax and paging

【发布时间】：2017-02-18 01:00:49

【问题描述】：

拳头我使用 ASP.Net 下拉列表，因为它是我使用的事件

<asp:DropDownList ID="e24" runat="server" class="form-control select2">
<asp:ListItem Text="--إختر--" Selected="True" Value="0" />
<asp:ListItem Text="مفتوحة" Value="OPN" />
<asp:ListItem Text="مغلقة" Value="CLO" />
</asp:DropDownList>

我想使用 select2 并使用 asp:DropDownList 的分页功能

我用 ajax 试过了

$(document).ready(function () 
        //$("#e24").select2();

        $("#e24").select2(
            ajax: 
                url: '<%= ResolveUrl("~/ar/UserControls/WebForm1.aspx/getResults") %>',
                dataType: 'json',
                delay: 100,
                data: function (params) 
                    //alert(params.page);
                    return 
                        q: params.term, // search term
                        page: params.page
                    ;
                ,
                processResults: function (data, params) 

                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    return 
                        results: data.items,
                        pagination: 

                            more: (params.page * 30) < data.total_count
                        
                    ;
                ,
                cache: true
            ,
            //escapeMarkup: function (markup)  return markup; , // let our custom formatter work
            minimumInputLength: 1,
            //templateResult: formatRepo, // omitted for brevity, see the source of this page
            //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
        

        );
    );

和 C# 代码

 [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    public static String getResults(String q, String page_limit)
    
        return "[ \"id\": \"1\", \"text\": \"test\" ]";
    

拳头 ajax 不触发，不工作！ 我怎样才能让它工作 我也用<select\> 试过这个，但是stile ajax 不能与webMethods 一起工作 我只希望它工作并从 webMethod 或 asp:DropDownList 它自己或从任何其他方式获取数据

如果不可能？我怎么能用<select\>标签或其他方式做到这一点

【参考方案1】：

（我知道已经快一年了，但以防万一它对其他人有用）我遇到了同样的问题，我所做的就是添加：

contentType: "application/json; charset=utf-8",
type: 'POST',

还有

data: function (params) 
     return JSON.stringify( q: params.term, page_limit: 10 );

看来 select2 需要 contentType

【参考方案2】：

您可以将 select2 与下拉客户端 ID 一起使用：-

  $(document).ready(function ()             

      $("#<%=DropDownList1.ClientID%>").select2(

          placeholder: "Select Item",

          allowClear: true

      );

  );

  <asp:DropDownList ID="DropDownList1" runat="server"  CssClass="form-control input-sm"></asp:DropDownList>

更多信息见： https://c-sharplibrary.blogspot.com/2017/08/create-select-2-dropdownlist-in-aspnet-c.html

【讨论】：

您应该考虑在答案中包含一些有关如何使用带有下拉 clientID 的 select2 的更多信息（它需要在没有链接的情况下自行支持）