WCF et plugin jQuery autocomplete

BonjourWCF et plugin jQuery autocomplete

Je suis face à un problème, à essayer de comprendre comment utiliser cette autocomplete plugin et le faire consommer ma méthode de service WCF. Le WCF est correctement publié et fonctionne. Qu'est-ce qui peut être fait pour compléter automatiquement le plugin ou existe-t-il un autre moyen intelligent de faire un travail de saisie semi-automatique avec WCF et de choisir Person.Id et Person.Name?

Voici certaines choses que je travaille maintenant:

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

Maintenant, la page 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>

Juste pour des fins de test, la L'idée est de laisser un nom d'utilisateur Web et jQuery appelle le service WCF http://localhost/MyService/GetPeople pour répertorier toutes les personnes dans la base de données SQL Server (dans la future méthode GetPeople aura un argument de chaîne). Le plugin jQuery compléte automatiquement semble être bon, mais je ne suis pas encore sûr des fichiers js dont j'ai besoin pour le faire fonctionner sur mon ordinateur local. Et maintenant je ne peux pas le faire fonctionner ou le déboguer, même quand il s'agit de montrer une alerte();

Source

2010-11-06 Junior M

Qu'en est-il des attributs [DataConctract] [DataMember] dans la classe Person? – mmutilva

Terminé. Je vois que la WCF fonctionne bien. Je jette un coup d'oeil à http://jqueryui.com/demos/autocomplete/#remote pour voir ce qui se passe –

Je viens de coder cela ensemble, en utilisant the autocomplete from jQuery UI v1.8rc3 (je pense que c'est une ancienne version, il fonctionne avec jQuery 1.4.2), et WCF 3.5 (également un révolu). Voici comment j'ai fait le mien.

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

Le fichier .svc

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

Le correspondant info .config WCF

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

La logique 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>

Cela fonctionne bien.

ps: pour le débogage jQuery, j'ai trouvé que les outils de débogage inclus dans FF ou IE8 + sont inestimables. Dans IE8, appuyez sur F12 pour obtenir la console du débogueur.

De plus, lors du développement, j'ai souvent mis en place un div, avec id = msgs, pour collecter des informations de diagnostic à partir de la logique javascript. Ensuite, j'utilise ce type de fonction pour y déposer des informations, à différentes étapes de l'exécution.

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

Source

2010-11-07 18:45:12 Cheeso

Merci pour la réponse.La chose bizarre ici est que le morceau au-dessus de '$ ('# example'). Autocomplete (source: function (request, response) {$ .ajax ({...' n'est jamais déclenché mais quand je mets '$ (' #example '). autocomplete (myDataArray) 'ça fonctionne –

Désolé, je ne sais pas ce que vous voulez dire, quel morceau n'est jamais" viré "? – Cheeso

la fonction imbriquée source' .ajax (... 'n'obtenait jamais J'ai été viré, mais votre réponse m'a aidé d'une manière ou d'une autre ... Maintenant, j'ai terminé la saisie semi-automatique après avoir lu la documentation du plugin de saisie semi-automatique dans Google Code http://code.google.com/p/jquery-autocomplete/wiki/Documentation. : http://stackoverflow.com/questions/4173999/jquery-ajax-call-working-and-autocomplete-not-working-with-wcf/4174878#4174878 –

Répondre

Questions connexes