CODEWITHSUNDEEP
javascriptasp.net-mvcjquery-select2
user70192
user70192

Reputation: 14204

Using Select 2 with ASP.NET MVC

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.

Upvotes: 1

Views: 2879

Answers (1)

wahwahwah
wahwahwah

Reputation: 3177

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.

Upvotes: 1

Related Questions