jQuery Autocomplete et ASP.NET

Question

J'ai cherché partout sur ce site et sur le web pour une bonne et simple exemple de la saisie semi-automatique à l'aide de jQuery et ASP.NET. Je voulais exposer les données utilisées par la saisie semi-automatique avec un webservice (et sera probablement le faire la prochaine). Dans l'intervalle, j'ai eu ce travail, mais il semble un peu hacky...

Dans ma page j'ai une zone de texte:

<input id="txtSearch" type="text" />

Je suis à l'aide de jQuery autocomplete, définie par leur exemple:

<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

C'est là que ça commence à se hacky... j'appelle une page au lieu d'un webservice:

  <script type="text/javascript">
    $(document).ready(function(){
        $("#txtSearch").autocomplete('autocompletetagdata.aspx');
    });      
  </script>

Dans la page j'ai enlevé TOUT le code html et seulement cela (sinon, diverses HTML bits apparaître dans la saisie semi-automatique de liste déroulante):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %>

Et dans mon autocompletetagdata.aspx, je suis en utilisant Subsonique à la requête, le format et les données de retour à partir de la base de données (un seul élément de données par ligne):

protected void Page_Load(object sender, EventArgs e)
{
    // Note the query strings passed by jquery autocomplete:
    //QueryString: {q=a&limit=150&timestamp=1227198175320}

    LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
        .Top(Request.QueryString["limit"])
        .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")
        .OrderAsc(LookupTag.Columns.TagDescription)
        .ExecuteAsCollection<LookupTagCollection>();

    StringBuilder sb = new StringBuilder();

    foreach (LookupTag tag in tags)
    {
        sb.Append(tag.TagDescription).Append("\n");
    }

    Response.Write(sb.ToString());
}

Si vous ne faites pas COMME requête, puis il renvoie à tout ce qui contient un match pour le personnage(s) type (par exemple, en tapant "une" comprendra "Demander" et "Réponse", ainsi que "Mars" et "Mega." Je voulais juste faire un commence avec le match.

De toute façon, il fonctionne, et il est assez facile à mettre en place, mais est-il une meilleure façon?

Answer 1

Je viens tout juste de mettre en œuvre l'auto-complétion, et cela semble assez similaire. J'utilise un ashx (Generic Handler) au lieu de l'aspx, mais c'est fondamentalement le même code dans le code situé derrière.

En utilisant l'ashx, cela ressemblera à ceci:

 <script type="text/javascript">
  $(document).ready(function(){
      $("#txtSearch").autocomplete('autocompletetagdata.ashx');
  });      
</script>

[WebService(Namespace = "http://www.yoursite.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutocompleteTagData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Note the query strings passed by jquery autocomplete:
        //QueryString: {q=a&limit=150&timestamp=1227198175320}

        LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
            .Top(context.Request.QueryString["limit"])
            .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%")
            .OrderAsc(LookupTag.Columns.TagDescription)
            .ExecuteAsCollection<LookupTagCollection>();

        foreach (LookupTag tag in tags)
        {
            context.Response.Write(tag.TagDescription + Environment.NewLine);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 

Answer 2

Je viens de posté ceci sur une autre question, mais vous pouvez remplacer la fonction d'analyse sur le jQuery autocomplete plug-in pour le rendre soutenir toute sortie.

Exemple:

    $("#<%= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", {
        parse: function(data) {
            var parsed = [];

            $(data).find("string").each(function() {
                parsed[parsed.length] = {
                    data: [$(this).text()],
                    value: $(this).text(),
                    result: [$(this).text()]
                };
            });
            return parsed;
        },
        dataType: "xml"
    });

Tout cela s'attend à ce est un tableau de chaînes de XML... Très facile à faire... Si votre aide Subsonique, vous devriez vérifier le RESTHandler (C'est un JOYAU caché!!!), il prend en charge les requêtes de base sur tous vos objets et peut-retour JSON/XML. Voici un exemple de requête à l'aide de...

/Demo/services/Clients/liste.xml?Nomclient=JEAN

Si vous modifiez list.xml à la liste.json il va changer les résultats en JSON. La demande ci-dessus sera de retour l'un fortement typé "Client" de l'entité. Vous pouvez modifier le paramètre type d'aide, n'AIME PAS, etc... Très puissant et toute la plomberie est déjà fait...

Voici une vidéo sur ça: http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

Answer 3

Le service Web ou un service WCF vous donnera le potentiel d’une meilleure interface. Les deux peuvent également être configurés pour effectuer la sérialisation Json.

Comme je prends un cours WCF pendant que j'écris (je suis vraiment en pause!), Je vais esquisser la méthode WCF.

 [OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
public LookupTagCollection LookupTags( int limit, string q )
{
     return Select.AllColumnsFrom<LookupTag>()
                  .Top(limit)
                  .Where(LookupTag.Columns.TagDescription)
                  .Like(q+ "%")
                  .OrderAs(LookupTag.Columns.TagDescription)
                  .ExecuteAsCollection<LookupTagCollection>();    
}
 

LookupTagCollection doit être sérialisable.

Answer 4

Voici un exemple basé sur le widget de saisie semi-automatique jQuery UI intégré à ASP.NET Il est très simple de l’intégrer au service Web et d’implémenter des éléments tels que la recherche prédictive. Une autre bonne chose est que vous pouvez facilement changer de thème et ainsi personnaliser le rendu de ce widget. Regarde ça.

Answer 5

Jquery 1.8 La saisie semi-automatique utilise "le terme" et non "q" comme paramètre de chaîne de requête. c'est la version courte et douce que j'ai implémentée. J'espère que ça aide quelqu'un.

Javascript:

 $(function () {
    $("#autocomplete").autocomplete({
        source: "/pathtohandler/handler.ashx",
        minLength: 1,
        select: function (event, ui) {
            $(this).val(ui.item.value);
        }
    });
});
 

Gestionnaire ASHX:

 public class SearchHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var term = context.Request.QueryString["term"].ToString();

        context.Response.Clear();
        context.Response.ContentType = "application/json";

        var search = //TODO implement select logic based on the term above

        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string json = jsSerializer.Serialize(search);
        context.Response.Write(json);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}