WCF и плагин автозаполнения jQuery - PullRequest
Новая
       2

WCF и плагин автозаполнения jQuery

1 голос
/ 06 ноября 2010

Добрый день

Я столкнулся с проблемой, пытаясь выяснить, как использовать этот плагин автозаполнения и заставить его использовать мой метод службы 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-файлы мне понадобятся, чтобы он работал на моем локальном компьютере. И теперь я не могу заставить его работать или отлаживать его, даже когда он показывает предупреждение ();

1 Ответ

2 голосов
/ 07 ноября 2010

Я только что написал это вместе, используя автозаполнение из 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 .configinfo 

<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, чтобы получить консоль отладчика.

Кроме того, при разработке я часто устанавливал div с id = msgs для сбора диагностической информации из логики javascript.Затем я использую эту функцию для добавления информации в нее на разных этапах выполнения.

function addMessage(msg, clear){
    if (clear !== null && clear) {
      $('#msgs').html("");
    }
    $('#msgs').append("<p>" + msg + "</p>");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...