ASP.NET MVC, jquery autocomplete de la valeur et un champ de texte

contrôleur

public ActionResult Search(string id)
{
     id= Request.QueryString["term"];         
     var routeList = db.Movies.Where(r => r.Title.Contains(id))
                   .Take(5)
                   .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
     return Json(routeList, JsonRequestBehavior.AllowGet);
}

Vue:

<input type="hidden"   id="MovieID"  name="MovieID" />
<input type="text" id="SelectedMovie" value=""/>
<script type="text/javascript" language="javascript">
   $("#SelectedMovie").autocomplete({
       source: function (request, response) {
           $.ajax({
              url: "/Transaction/Search", type: "POST", dataType: "json",                        
              data: { id: request.term }, 
              success: function (data) {
              response($.map(data, function (item) {                                
                return { label: item.label, value: item.id }; //updated code
               }));
             }
         });
     },
     select: function (event, ui) {
         $("#MovieID").val(ui.item.value);
         $("#SelectedMovie").val(ui.item.label);
         return false;
     }
  });
</script>

J'ai une sorte de videostore app. Quand je vais louer un film que j'ai besoin d'un combobox avec les films que j'ai peut sélectionner à l'aide de la saisie semi-automatique.
Aussi exigence est que seul le code (valeur) est enregistrée dans le databas et non le texte lui-même.

EDIT: voici l'intégralité de travail exqample

  • Le 1er s'il vous plaît dites-moi si mon contrôleur est OK ? quand je le lance manuellement je n'obtenez pas de résultats , en terme de recherche (id) est passé comme nulle ??
  • Je m'attends à passer request.term PAS request.id à la $.ajax() appel.
InformationsquelleAutor Jalle | 2012-09-20
  1. 18

    Puisque vous êtes de passage seulement une chaîne à la Search() de fonction sur le côté serveur, le data éléments que vous êtes en passant par les $.ajax() appel besoin d'être changé.

    public ActionResult Search(string id)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
{
      id= Request.QueryString["term"];

      var routeList = db.Movies.Where(r => r.Title.Contains(id))//this is a text filter no?
                        .Take(5)
                        .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
      return Json(routeList, JsonRequestBehavior.AllowGet);
}
    $("#MovieID").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Transaction/Search", type: "POST", dataType: "json",
            //original code
            //data: { searchText: request.id, maxResults: 10 },
            //updated code; updated to request.term 
            //and removed the maxResults since you are not using it on the server side
            data: { id: request.term },

            success: function (data) {
                response($.map(data, function (item) {
                    //original code
                    //return { label: item.FullName, value: item.FullName, id: item.TagId }; 
                    //updated code
                    return { label: item.label, value: item.label, id: item.id };
                }));
            },
        select: function (event, ui) {
                //update the jQuery selector here to your target hidden field
            $("input[type=hidden]").val(ui.item.id);
        }
        });
    },
});

    Laissez-moi savoir si cela fonctionne pour vous/aide!

    • OK cela fonctionne. mais au lieu de présenter une pièce d'identité dans le même domaine j'ai besoin de l'enregistrer dans le caché. s'il vous plaît aider
    • ma réponse a été mis à jour pour refléter les modifications que vous avez besoin. Laissez-moi savoir si cela aide!
    • tout fonctionne comme prévu, sauf que l'événement n'est pas déclenché lorsque je sélectionne la valeur à la baisse. J'ai placé mon débogueur à l'intérieur de la 'select: function (event, ui) {' mais le compilateur n'atteint jamais là. Avez-vous une idée concernant ce qui peut être erroné?
    • pas la moindre idée. Je n'ai pas tout de votre code posté, donc je ne sais pas les circonstances de votre situation.
    • je vous remercie, mais j'ai tout compris moi-même un couple de jours après mon commentaire. Je suis désolé de ne pas vous le dire.
    InformationsquelleAutor JoeFletch
  2. 4

    Votre .ajax() appel n'est pas spécifier dans un id. il n'est pas dans votre data{} objet, ni est-il dans un querystring dans le cadre de l'paramètre de l'url (l'un et l'autre fonctionne).

    D'où la valeur null dans votre méthode d'Action.

    De toute façon, vous êtes immédiatement sur-l'écriture de la méthode d'identification d'argument avec Request.QueryString["term"]. Pourquoi faire??

    Au lieu de demander à la Demande pour la "durée" à l'intérieur de la méthode,vous avez juste
    lier à la Action méthode comme un paramètre lui-même comme ci-dessous :

    public ActionResult Search(string term)
{
    var routeList = db.Movies.Where(r => r.Title.Contains(term))
            .Take(5)
            .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
    return Json(routeList, JsonRequestBehavior.AllowGet);
}
    • J'ai besoin d'un exemple complet de code de cette fonctionnalité, s'il vous plaît ?
    • OK je sort avec peu d'aide de mon ami. original post mis à jour...
    InformationsquelleAutor Faust
  3. 3

    Tout d'abord, vous devez utiliser la déclaration suivante de la valeur de votre fonction:

    return { label: item.title, value: item.id };

    Selon la la documentation vous devez retourner les objets avec label et value propriétés (pas de id de la propriété). Le label est ce que voit l'utilisateur, la valeur est ce qui est affiché sur le serveur.

    Second, vous passez un searchText et maxResults dans l'appel Ajax, de sorte que votre méthode d'action devrait avoir deux paramètres: public ActionResult Search(string searchText, int maxResults).

    Pouvez-vous appliquer ces changements et voir si cela fonctionne?

    • N'avais même pas remarqué que l'un. Lorsque la propriété des noms différents, il n'est certainement pas d'aller travailler.
    InformationsquelleAutor Ronald Wildenberg