CODEWITHSUNDEEP
c#jqueryasp.netajaxjquery-select2
Mohm Zanaty
Mohm Zanaty

Reputation: 649

Select2 with ASP dropdownlist control using ajax and paging

Fist I Using ASP.Net dropdownlist because of it's events thats i use

<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>

and i want to use select2 and use the paging feature with asp:DropDownList

i tried with 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
        }

        );
    });

and C# Code

 [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\" }]";
    }

fist the ajax not firing and not working!! how i can make it work i tried this with <select\> also but stile ajax not working with webMethods i just want it work and bring data from webMethod or from asp:DropDownList it self or from any outher ways

if it's not possible? how i can to do that with <select\> tag or else

Upvotes: 1

Views: 3540

Answers (2)

Zakarie Abdallah
Zakarie Abdallah

Reputation: 472

You can use select2 with dropdown clientID :-

  $(document).ready(function () {            

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

          placeholder: "Select Item",

          allowClear: true

      });

  });


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

for more informations see: https://c-sharplibrary.blogspot.com/2017/08/create-select-2-dropdownlist-in-aspnet-c.html

Upvotes: 1

Jamo
Jamo

Reputation: 504

(I know it's almost one year later, but just in case it's useful for someone else) I had the same problem, what I did was to add:

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

And also 

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

It seems the contentType is required for select2

Upvotes: 2

Related Questions