How use select2 with remote data + webservice c#

1,341 views
Skip to first unread message

Gabriel Moura

unread,
Nov 23, 2012, 3:53:38 PM11/23/12
to sel...@googlegroups.com
Hi,

I'm brazilian and don't speak english very well, but i will try explain my question.


I'm trying create a Select2 with ajax/json   using C# Webservice.

I create a simple Webservice c#, but when i use select2, nothing is shown.

Somebody can show me a example using Webservice c# and populate selec2 using ajax?

Thanks,
Gabriel

brian...@gmail.com

unread,
Dec 29, 2012, 5:33:43 PM12/29/12
to sel...@googlegroups.com

I can't figure out the response needed and it doesn't seems to call the ajax; Trying to dynamically set service url off another dropdown. No results displayed. Any help would be awesome

code:
<div class="row-fluid">
<select id="first-choice" class="span4">
<option selected value="base">Please Select</option>
<option value="1">Beverages</option>
<option value="2">Snacks</option>
<option value="3">Snacks 2</option>
</select>
</div>
<div class="row-fluid" id="second">
<select id="second-choice" class="span4" multiple="multiple">
<option>Please choose from above</option>
</select>
</div>


<script type="text/javascript">
$(document).ready(function () {
var service;
$("#second").hide();
$("#first-choice").change(function () {

var $dropdown = $(this);
var d = new Date();
service = "/samples/data/handler1.ashx?v=" + $dropdown.val() + "&&_=" + d.getTime();
$("#second").show();
});


$("#second-choice").select2({
minimumInputLength: 0,
ajax: {
url: service,
dataType: 'json',
quietMillis: 100,
multiple: true,
data: function (term, page) {
return {};
},
results: function (data, page) {
return { results: data };
}
}
});

});

</script>


sample output from service:

[{"id":"0","text":"Peyton"},{"id":"1","text":"Drew"},{"id":"2","text":"Brett"},{"id":"4","text":"Peyton"},{"id":"5","text":"Drew"},{"id":"6","text":"Brett"},{"id":"8","text":"Peyton"},{"id":"9","text":"Drew"},{"id":"10","text":"Brett"},{"id":"12","text":"Peyton"},{"id":"13","text":"Drew"},{"id":"14","text":"Brett"},{"id":"16","text":"Peyton"},{"id":"17","text":"Drew"},{"id":"18","text":"Brett"},{"id":"20","text":"Peyton"},{"id":"21","text":"Drew"},{"id":"22","text":"Brett"},{"id":"24","text":"Peyton"},{"id":"25","text":"Drew"}]

just an auto generated sample in a ashx

public void ProcessRequest(HttpContext context)
{
// DB.MetaData.Utilities.Compression.GZipEncodePage();
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.ContentType = "application/json";
context.Response.Charset = "charset=utf-8";


string file = HttpContext.Current.Request.QueryString["v"];

if (file == "3")
{
GetPlayers(context, file);
}
else
{


string path = string.Format("~/Samples/Data/{0}.txt", file);
StreamReader streamReader = new StreamReader(HttpContext.Current.Server.MapPath(path));
string text = streamReader.ReadToEnd();
streamReader.Close();
context.Response.Write(text);
}

}


public void GetPlayers(HttpContext context, string id)
{
JavaScriptSerializer ser = new JavaScriptSerializer();
List<SelectOptions> players = new List<SelectOptions>();

for (int i = 0; i < 10000; i++)
{
players.Add(new SelectOptions { text = "Peyton", id = i++.ToString() });
players.Add(new SelectOptions { text = "Drew", id = i++.ToString() });
players.Add(new SelectOptions { text = "Brett", id = i++.ToString() });
}

context.Response.Write(ser.Serialize(players));

}


object class:

[DataContract]
public class SelectOptions
{
[DataMember]
public string id { get; set; }
[DataMember]
public string text { get; set; }

}

Gabriel Moura

unread,
Nov 25, 2012, 9:22:00 AM11/25/12
to sel...@googlegroups.com
Somebody ???
Reply all
Reply to author
Forward
0 new messages