Как я могу заставить работать удаленный вызов на начальной загрузке Twitter, вызвав веб-метод asp.net

Я пытаюсь загрузить свой typeahead.js с помощью функции bloohound's remote, где я могу вызвать свой веб-метод. Я видел похожие темы, где используется querystring:

  1. Интеграция Typeahead.js с веб-методом ASP.Net
  2. Интеграция Typeahead.js и Bloodhound.js с C# WebForms WebMethod
  3. http://yassershaikh.com/using-twitter-typeahead-js-with-asp-net-mvc-web-api/

И многое другое....

Однако я не могу найти пример, где ajax используется для вызова webmethod из typeahead.js..

Итак, это то, что у меня есть сейчас, и это работает:

Веб-метод

    [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;
    }

Клиент

        function LoadEmployeeJSON() {
        $.ajax({
            type: "POST",
            url: "/WebMethods/Test.aspx/GetEmployeeTypeahead",
            data: "{}",
            contentType: "application/json",
            dataType: "json",
            success: function (msg) {
                empList = $.parseJSON(msg.d);                  //otherwise does 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 the code less verbose by creating variables for the following
        var fullnameTypeahead = $('#<%=txtFullName.ClientID %>.typeahead');

        // Initialise typeahead for the 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 the typeahead:selected event with the bespoke handler
        fullnameTypeahead.on('typeahead:selected', fullnameSelectedHandler);
    }
     function clearAndReInitilize() {

        $('.typeahead').typeahead('destroy');
        $('.typeahead').val('');
    }

Итак, как видите, я делаю вызов local вместо remote.

Как я могу заставить функцию remote вызывать мой webthod и заполнять typeahead без использования querystrings


c# jquery asp.net typeahead.js bloodhound
person JustLearning    schedule 16.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, наконец, он заработал через универсальный обработчик ashx. Поэтому вместо использования веб-метода я использовал следующий обработчик ashx:

 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
    {
        get
        {
            return false;
        }
    }
}

Ниже приведен вызов jquery и ajax для обработчика ashx

 $(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 the code less verbose by creating variables for the following
        var fullnameTypeahead = $('#<%=txtFullName.ClientID %>.typeahead');

        // Initialise typeahead for the 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 the typeahead:selected event with the bespoke handler
        fullnameTypeahead.on('typeahead:selected', fullnameSelectedHandler);
    }
person JustLearning    schedule 26.02.2016