Using Select 2 with ASP.NET MVC

Question

I am working on an ASP.NET MVC 4 app. In my app, I'm trying to replace my drop down lists with the Select 2 plugin. Currently, I'm having problems loading data from my ASP.NET MVC controller. My controller looks like this:

public class MyController : System.Web.Http.ApiController
{
  [ResponseType(typeof(IEnumerable<MyItem>))]
  public IHttpActionResult Get(string startsWith)
  {
    IEnumerable<MyItem> results = MyItem.LoadAll();
    List<MyItem> temp = results.ToList<MyItem>();

    var filtered = temp.Where(r => r.Name.ToLower().StartsWith(startsWith.ToLower());
    return Ok(filtered);
  }
}

When I set a breakpoint in this code, I notice that startsWith does not have a value The fact that the breakpoint is being hit means (I think) my url property below is set correct. However, I'm not sure why startsWith is not set. I'm calling it from Select 2 using the following JavaScript:

function formatItem(item) {
  console.log(item);
}

function formatSelectedItem(item) {
  console.log(item);
}

$('#mySelect').select2({
  placeholder: 'Search for an item',
  minimumInputLength: 3,
  ajax: {
    url: '/api/my',
    dataType: 'jsonp',
    quietMillis: 150,
    data: function (term, page) {
      return {
        startsWith: term
      };
    },
    results: function (data, page) {
      return { results: data };
    }
  },
  formatResult: formatItem,
  formatSelection: formatSelectedItem
});

When this code runs, the only thing I see in the select 2 drop down list is Loading failed. However, I know my api is getting called. I can see in fiddler that a 200 is coming back. I can even see the JSON results, which look like this:

[
{"Id":1,"TypeId":2,"Name":"Test", "CreatedOn":"2013-07-20T15:10:31.67","CreatedBy":1},{"Id":2,"TypeId":2,"Name":"Another Item","CreatedOn":"2013-07-21T16:10:31.67","CreatedBy":1}
]

I do not understand why this isn't working.

Well, your code snippet is missing a closing ' in $('#mySelect). Is this corrected in your project? — jrummell
– jrummell, Commented Sep 25, 2014 at 19:32
I don't see a property in your json called text. Unless you've overridden the behavior somehow in a funciton handler, both a id and text property is required for each item. — AaronLS
– AaronLS, Commented Sep 25, 2014 at 19:40
Also, don't know if these are case sensitive, I would try Id -> id. — AaronLS
– AaronLS, Commented Sep 25, 2014 at 19:42
@AaronLS Why is a property called text required in the json? Is that a select 2 thing? I don't see it mentioned in the docs. — user70192
– user70192, Commented Sep 25, 2014 at 19:51

wahwahwah · Accepted Answer · 2014-09-25 20:00:48Z

1

From the documentation:

Select2 provides some shortcuts that make it easy to access local data stored in an array...

... such an array must have "id" and "text" keys.

Your json object does not contain "id" or "text" keys :) This should work though i have not tested it:

results: function (data, page) {
   return { results: data, id: 'Id', text: 'Name' }
}

There's further documentation following the link on alternative key binding... I believe thats where your problem lies.

Hopefully this helps.

answered Sep 25, 2014 at 20:00

wahwahwah

3,1692 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user70192 Over a year ago

Hello, but why isn't the startsWith parameter in my controller populated?

wahwahwah Over a year ago

I think its the same sort of issue... try replacing 'data : function(term, page){...}' with 'data : { startsWith : "Test" }'

wahwahwah Over a year ago

This should hit your controller. The Select 2 ajax "shortcut" is just wrapping a normal ajax call.

Collectives™ on Stack Overflow

Using Select 2 with ASP.NET MVC

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related