我如何通过调用 asp.net 网络方法在 bootstrap twitter typeahead 上进行远程调用

Question

我正在尝试使用 bloohound's remote 函数加载我的 typeahead.js，我可以在其中调用我的 Web 方法。我见过类似的线程，其中使用了 querystring :

Integrating Typeahead.js with ASP.Net Webmethod
Typeahead.js and Bloodhound.js integration with C# WebForms WebMethod
http://yassershaikh.com/using-twitter-typeahead-js-with-asp-net-mvc-web-api/

还有更多....

但是，我找不到一个示例，其中 ajax 用于从 typeahead.js.

调用 webmethod

这就是我目前拥有的并且有效：

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

客户

        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。

如何在不使用任何 querystrings

的情况下让 remote 函数调用我的 webthod 并填充 typeahead

Answer 1

好的，终于可以通过 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;
        }
    }
}

下面是对 ashx 处理程序的 jquery 和 ajax 调用

 $(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);
    }

我如何通过调用 asp.net 网络方法在 bootstrap twitter typeahead 上进行远程调用

How can i get remote call on bootstrap twitter typeahead to work, by calling asp.net web method

c#

asp.net

jquery

typeahead.js

bloodhound