WCF 和 jQuery 自动完成插件答案

【问题标题】：WCF and jQuery autocomplete pluginWCF 和 jQuery 自动完成插件
【发布时间】：2010-11-06 18:37:04
【问题描述】：

下午好

我遇到了麻烦，试图弄清楚如何使用这个autocomplete plugin 并让它使用我的 WCF 服务方法。 WCF 已正确发布并正常工作。

可以做些什么来自动完成插件工作，或者是否有另一种聪明的方法可以使自动完成与 WCF 一起工作并获得选择的 Person.Id 和 Person.Name？

下面是我现在一直在做的一些事情：

WCF 服务

public class Person {
    public int Id {get;set;}
    public string Name {get;set;}
    public static List<Person> List(){
      /*long query supressed to no be annoying :) */
    }
}

[ServiceContract]
public interface IChatService
{
    [OperationContract]
    [WebInvoke(Method = "GET", 
     UriTemplate = "GetPeople", 
     BodyStyle = WebMessageBodyStyle.Bare, 
     ResponseFormat = WebMessageFormat.Json)]
    List<Person> GetPeople();
}

public class MyService : IMyService
{
    public List<Person> GetPeople()
    {
        return Person.List();
    }
}

现在是aspx页面：

....
<head>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='http://view.jquery.com/trunk/plugins/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/lib/thickbox.css" />

<script>
    $().ready(function () {
        $('#<%=peopleNames.ClientID%>').autocomplete("http://localhost/MyService/MyService.svc/GetPeople", {
            width: 260,
            selectFirst: false
        });
        $("#<%=peopleNames.ClientID%>").result(function (event, data, formatted) {
            alert('ok');
            if (data) {
                alert($(this).parent().next().find("input").val(data[1]));
            }
        });
  });

</script>
</head>
<body>
<form runat="server">
<asp:TextBox ID="peopleNames" runat="server" MaxLength="500"></asp:TextBox>
</form>
</body>
</html>

只是为了测试目的，想法是让网络用户输入一个名字，jQuery 会调用 WCF 服务http://localhost/MyService/GetPeople 来列出 SQL Server 数据库中的所有人员（将来 GetPeople 方法将有一个字符串参数）。

jquery autocomplete 插件似乎不错，但我还不确定需要哪些 js 文件才能使其在本地计算机上运行。现在我无法让它工作或调试它，即使是在显示 alert();

【问题讨论】：

Person Class 中的 [DataConctract] [DataMember] 属性呢？
完成。我看到 WCF 运行良好。我正在查看jqueryui.com/demos/autocomplete/#remote 看看发生了什么

标签： asp.net jquery wcf autocomplete

【解决方案1】：

我只是使用the autocomplete from jQuery UI v1.8rc3（我认为这是一个旧版本；它适用于 jQuery 1.4.2）和 WCF 3.5（也是一个过时的版本）一起编写了这个代码。这是我的做法。

WCF 服务

using System;
using System.Linq;
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Runtime.Serialization;

namespace Ionic.Samples.Webservices._2010.Nov
{
    [ServiceContract(Namespace="urn:Ionic.Samples" )]
    public interface ICompletionService
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
                   RequestFormat=WebMessageFormat.Json,
                   ResponseFormat = WebMessageFormat.Json,
                   UriTemplate = "getcompletions/{fragment}")]
        List<String> GetCompletions(string fragment);
    }


    [ServiceBehavior(Name="WcfJqueryAutoComplete",  
                     Namespace="urn:Ionic.Samples",
                     InstanceContextMode=InstanceContextMode.Single,    // one instance for all requests
                     IncludeExceptionDetailInFaults=true)]

    public class WcfJqueryAutoComplete : ICompletionService
    {
        private List<String> allCandidates;

        public WcfJqueryAutoComplete()
        {
            allCandidates = new List<String>
                {
          "January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November",
          "December", "Yammer", "Yaw", "Yawn", "Auspiscious",
          "Arbitrage", "Arbiter", "Arbor", "Ardor", "Ardent",
          "Concrete", "Conscious", "Uptight", "Uplevel", "Friend",
          "Depend", "Deepend", "Deepen", "Decommit", "Right", "Now",
          "Knowledge", "Knight", "Know", "Knickers", "Wow", "Holy",
           ...
                };
        }

        public List<String> GetCompletions(String fragment)
        {
            var frag = fragment.ToUpper();
            // use LINQ to select candidates from the in-memory list.
            // You could replace this with a SQL query.
            var selection = from candidate in allCandidates
                where candidate.ToUpper().StartsWith(frag)
                select candidate;

            return new List<String>(selection);
        }
    }
}

.svc 文件

<%@ ServiceHost
Language="C#"
Debug="true"
Service="Ionic.Samples.Webservices._2010.Nov.WcfJqueryAutoComplete"
%>

相关的 WCF .config 信息

<system.serviceModel>

  <behaviors>
    <endpointBehaviors>
      <behavior name="JsonServiceEndpointBehavior">
        <webHttp />
      </behavior>
    </endpointBehaviors>
  </behaviors>


  <services>
    <service
        name="Ionic.Samples.Webservices._2010.Nov.WcfJqueryAutoComplete"
        >
      <endpoint
         address               = ""
         binding               = "webHttpBinding"
         contract              = "Ionic.Samples.Webservices._2010.Nov.ICompletionService"
         behaviorConfiguration = "JsonServiceEndpointBehavior"
         bindingNamespace      = "urn:Ionic.Samples"
         />

    </service>
  </services>
</system.serviceModel>

Javascript 逻辑

<script type="text/javascript">
  <!--

  var ajaxUrlBase1 = "/services/WcfJqueryAutoComplete.svc/";

  $(document).ready(function() {

      $("#input1").autocomplete({
          // The source option can be an array of terms.  In this case, if
          // the typed characters appear in any position in a term, then the
          // term is included in the autocomplete list.
          // The source option can also be a function that performs the search,
          // and calls a response function with the matched entries.
          source: function(req, responseFn) {
              $.ajax({
                  url     : ajaxUrlBase1 + "getcompletions/" + req.term,
                  cache   : false,
                  type    : "GET", // http method
                  dataType: "json",
                  error   : function(XMLHttpRequest,status,error){
                      alert("Error p1 s(" + status + ") e(" + error + ")");
                  },

                  success : function(msg, arg2, xhr){
                      try {
                        if (msg !== null) {
                          responseFn(msg);
                        } else {
                          alert("msg is null");
                        }
                      }
                      catch(e) {
                        alert("exception: " + e);
                      }
                  }
              });
          },

          select: function(value, data){
            // whatever you like here
          }
      });
  });

  -->
</script>

这很好用。

ps：对于 jQuery 的调试，我发现 FF 或 IE8+ 中包含的调试器工具是无价的。在 IE8 中按 F12 以获取调试器控制台。

另外，在开发时，我经常设置一个 id=msgs 的 div，以从 javascript 逻辑中收集诊断信息。然后我使用这种函数在执行的不同阶段将信息放入其中。

function addMessage(msg, clear){
    if (clear !== null && clear) {
      $('#msgs').html("");
    }
    $('#msgs').append("<p>" + msg + "</p>");
}

【讨论】：

感谢您的回答。这里奇怪的是$('#example').autocomplete(source: function (request, response) {$.ajax({... 上面的部分从未被解雇。但是当我输入$('#example').autocomplete(myDataArray) 时，它可以工作。
对不起，我不明白你的意思。什么作品永远不会被“解雇”？
源嵌套函数$.ajax(... 从未被解雇，但您的回答以某种方式帮助了我另一件事。现在，在阅读 Google Code code.google.com/p/jquery-autocomplete/wiki/Documentation 中的自动完成插件文档后，我得到了自动完成功能。这是我的工作示例：stackoverflow.com/questions/4173999/…