c# - How can i get remote call on bootstrap twitter typeahead to work, by calling asp.net web method -
i trying load typeahead.js using bloohound's remote function can call web method. have seen similar threads querystring being used :
- integrating typeahead.js asp.net webmethod
- typeahead.js , bloodhound.js integration c# webforms webmethod
- http://yassershaikh.com/using-twitter-typeahead-js-with-asp-net-mvc-web-api/
and many more....
however, cannot find example ajax used call webmethod typeahead.js.
so have , works:
webmethod
[webmethod] public static string getemployeetypeahead() { javascriptserializer jss = new javascriptserializer(); jss.maxjsonlength = 100000000; string json; using (var rep = new rbzpos_csharpentities()) { var result = rep.employees .where(x => x.employeestate == 1) .select(x => new { x.employeeid, x.fullname, x.manno, x.nrc }).tolist(); json = jss.serialize(result); } return json; } the client
function loademployeejson() { $.ajax({ type: "post", url: "/webmethods/test.aspx/getemployeetypeahead", data: "{}", contenttype: "application/json", datatype: "json", success: function (msg) { emplist = $.parsejson(msg.d); //otherwise not work loademployeetypeahead(); }, error: function (msg) { alert("error:" + json.stringify(msg)); } }); } function loademployeetypeahead() { var empdata = emplist; var fullname = new bloodhound({ datumtokenizer: function (d) { return bloodhound.tokenizers.whitespace(d.fullname) }, querytokenizer: bloodhound.tokenizers.whitespace, local: empdata, limit: 10 }); fullname.initialize(); // make code less verbose creating variables following var fullnametypeahead = $('#<%=txtfullname.clientid %>.typeahead'); // initialise typeahead employee name fullnametypeahead.typeahead({ highlight: true }, { name: 'fullname', displaykey: 'fullname', source: fullname.ttadapter(), templates: { empty: [ '<div class="empty-message">', 'no match', '</div>' ].join('\n'), suggestion: function (data) { return '<h6 class="">' + data.fullname + "<span class='pull-right text-muted small'><em>" + data.nrc + "</em></span>" + '</h6>'; } } }); var fullnameselectedhandler = function (eventobject, suggestionobject, suggestiondataset) { /* see comment in previous method */ $('#<%=txtfullname.clientid %>').val(suggestionobject.fullname); $('#<%=txtemployeeid.clientid %>').val(suggestionobject.employeeid); $('#<%=txtmanno.clientid %>').val(suggestionobject.manno); $('#<%=txtnrc.clientid %>').val(suggestionobject.nrc); }; // associate typeahead:selected event bespoke handler fullnametypeahead.on('typeahead:selected', fullnameselectedhandler); } function clearandreinitilize() { $('.typeahead').typeahead('destroy'); $('.typeahead').val(''); } so can see making local call instead of remote.
how can remote function call webthod , fill typeahead without using querystrings
okay got work via ashx generic handler. instead of using web method used following ashx handler:
public class employess : ihttphandler { public void processrequest(httpcontext context) { javascriptserializer jss = new javascriptserializer(); jss.maxjsonlength = int32.maxvalue; string json; string prefixtext = context.request.querystring["query"]; using (var rep = new rbzpos_csharpentities()) { var result = rep.employees .where(x => x.employeestate == 1 && x.fullname.contains(prefixtext.toupper())) .select(x => new { x.employeeid, x.fullname, x.manno, x.nrc }).toarray(); json = jss.serialize(result); } context.response.contenttype = "text/javascript"; context.response.write(json); } public bool isreusable { { return false; } } } below jquery , ajax call ashx handler
$(document).ready(function () { $(document).ajaxstart($.blockui).ajaxstop($.unblockui); loademployeetypeahead(); // loademployeejson(); }); function loademployeetypeahead() { //var empdata = emplist; var fullname = new bloodhound({ remote: { url: '/employess.ashx?query=%query', wildcard: '%query' }, datumtokenizer: function (d) { //var employees = $.parsejson(msg.d); return bloodhound.tokenizers.whitespace(d.fullname) }, querytokenizer: bloodhound.tokenizers.whitespace, limit: 10 }); fullname.initialize(); // make code less verbose creating variables following var fullnametypeahead = $('#<%=txtfullname.clientid %>.typeahead'); // initialise typeahead employee name fullnametypeahead.typeahead({ highlight: true }, { name: 'fullname', displaykey: 'fullname', source: fullname.ttadapter(), templates: { empty: [ '<div class="empty-message">', 'no match', '</div>' ].join('\n'), suggestion: function (data) { return '<h6 class="">' + data.fullname + "<span class='pull-right text-muted small'><em>" + data.manno + "</em></span><span class='pull-right text-muted small'><em>" + data.nrc + "</em></span>" + '</h6>'; } } }); var fullnameselectedhandler = function (eventobject, suggestionobject, suggestiondataset) { /* see comment in previous method */ $('#<%=txtfullname.clientid %>').val(suggestionobject.fullname); $('#<%=txtemployeeid.clientid %>').val(suggestionobject.employeeid); $('#<%=txtmanno.clientid %>').val(suggestionobject.manno); $('#<%=txtnrc.clientid %>').val(suggestionobject.nrc); }; // associate typeahead:selected event bespoke handler fullnametypeahead.on('typeahead:selected', fullnameselectedhandler); }
Comments
Post a Comment