Data Haunting

Easy Solutions Destination


Select2 remote data example in web forms

In this article we will see how to load server side or remote data using select2 while we searched in textbox in our web forms. Select2 Provide built in functionality to use Ajax and Json/JsonP . Here we will see how to implement remote data in Select2 in web forms.

Let’s see we have following example of binding country in aspx web forms using Select2.

As given above Image , here we will implement select2 remote data example in aspx web forms. While applying given view, if you have any error like Uncaught query function not defined for Select2 then refer my article Uncaught query function not defined for Select2. If you are using Select2 first time in your web Application and find any difficulty to implement it , visit Select2 simple example in web forms page. We have also seen Remote data example in MVC for Select2.

Select2 using Ajax Request and Json Response for Remote Data in Aspx Web forms page

Only difficulty which we have to keep in mind while applying Select2 to aspx control like TextBox is that when aspx control render at that time aspx control’s Id is changed. So to overcome this problem one thing we can do is that we can use class with CssClass property and applying Select2 to this class property value and second thing we can do with aspx Control Id which is changed, suppose aspx control id is “txtCountryName” so in jquery we can use like $(“input[id$=’txtCountryName’]”). Below I have provided sample code for Select2.

In above code you can see that here we have made ajax call for remote data by calling remote method and in response we get json Data that is we specified as dataType: ‘json’ . For searching we required minimum two character that is we specified by minimumInputLength: 2 and search term here we passed as term in arguments to Remote method. Here in Ajax Url pass “/WCSelect2.asmx/AccessRemoteData” which means in we need to create one Web service named as “WCSelect2” and one Web Method “AccessRemoteData” for fetching Remote Data from Web servie. In response for binding data we have assign data.CountryList to result. Here we used data.CountryList because from remote data we return CountryList as JsonResult in response.

Web Method for Loading Select’s Remote Data

Here we have created Webservice named as “WCSelect2” and WebMethod named as “AccessRemoteData”.

To enable Web service to be called from script and ajax request we must un comment or have to add this line [System.Web.Script.Services.ScriptService] otherwise it will not call Web service or Web Method from ajax request.

In this example as given above code snippets we are trying to load remote data so as an example here we used Dictionary of Country that is dictCountry with key and value pair , which we will see in our response. One more thing here we used is DTO (Data Transfer Object) as Select2DTO for compatibility with Select2 format that is id and text . We used Linq query for filter out search term(which is passed as parameter) from dictCountry Dictionary and at last we return Json Value as CountryList.

Now if you type “un” than you will get result as “United States”, “United Kingdom” and “United Arab Emirates” in your Select2 wrapped element which is perfectly justify our above Image.

Here suppose we select “United State” as it’s keyvalue is “3”. So while submitting this value you get value “3” in your txtCountryName’s value.

What is your opinion ?

Here I have given demo for remote data loading for select2 in Web forms. I hope it will be very useful to implement in your aspx page and you will enjoy it. If you have any query and question, you can comment or you can mail me.

6 Responses to Select2 remote data example in web forms

  1. Stuart says:

    Hello – I copied all of your exact code. The web service method does get called and there are no errors, but the callback (results function) never gets called. Any ideas?

  2. Chuck Fields says:

    I’m experiencing the same–the web service does get called and returns the list, but then textbox displays a “Loading failed” message. We are using select2 version 3.5.2. First I confirmed your Simple Web Forms example, which did not work with version 4, but does with version 3.5.2.

    • Dilip Patel says:

      This example of Select2 working with version 3.5.2 not with 4.0 or any latest version. Right now I am not getting time for the higher version of Select2 example’s article. So I will try in future with Select Version 4.0 an higher. Anyway thanks for applying this solutions.

  3. ss says:

    data: function (term) {
    return {
    term: term,

    it’s wrong for 4.0

    data: function (params) {
    return {
    term: params.term,

    • Dilip Patel says:

      I don’t have any idea about Select2 version 4.0 or higher. As you suggest it may be worked for Select2 Version 4.0 or higher

Leave a Reply