IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Ajax Discussion :

Autocompletion dans MVC 5


Sujet :

ASP.NET Ajax

  1. #1
    Membre éprouvé Avatar de kheironn
    Homme Profil pro
    Chef de projets technique C# / MVC / .Net
    Inscrit en
    Février 2007
    Messages
    822
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Chef de projets technique C# / MVC / .Net
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2007
    Messages : 822
    Points : 1 108
    Points
    1 108
    Par défaut Autocompletion dans MVC 5
    Bonjour,
    J'ai utilisé ce bout de code (que je ne comprends pas, au passage)
    et voici ce j'en ai fait :
    JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
            $(function () {
                $("#LocationID").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '@Url.Action("GetLocationIDAutocomplet", "Product")',
                            type: "POST",
                            dataType: "json",
                            data: { term: request.term },
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return { label: item.LocationZone, value: item.LocationID };
                                }))
                            }
                        })
                    },
                    messages: {
                        noResults: "", results: ""
                    }
                });
            });
    View :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
                <div class="form-group">
                    <div class="col-md-4">
                        @Html.LabelFor(model => model.LocationID, htmlAttributes: new { @class = "control-label" })
                        @Html.ValidationMessageFor(model => model.LocationID, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-md-4">
                        @Html.EditorFor(model => model.LocationID, new { htmlAttributes = new { @class = "form-control", @id = "LocationID" } })
                    </div>
                </div>
    Controller :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
            [Authorize, HttpPost]
            public JsonResult GetLocationIDAutocomplet(string term)
            {
                var user = db.Employees.Where(e => e.Username == User.Identity.Name).SingleOrDefault();
     
                var data = db.Locations
                    .Include(l => l.Area)
                    .Where(l => l.IsActiv && l.Area.SiteID == user.SiteId);
     
                if (!string.IsNullOrWhiteSpace(term))
                    data = data.Where(l => l.LocationID.ToUpper().Contains(term.ToUpper()));
     
    #if DEBUG
                System.Diagnostics.Debug.WriteLine(data.ToString());
    #endif
     
                return Json(data, JsonRequestBehavior.AllowGet);
            }
    Mon appel se passe bien et mon controller répond. Seulement rien ne s'affiche dans ma txtbox


    P.S.: mon input se trouve dans une partial view. Le script dans la view appelante.
    En informatique, le problème se situe toujours entre le clavier et l'écran !
    Il y a deux chemins entre le clavier et l'écran : Par l'UC et par l'utilisateur.

  2. #2
    Membre éprouvé Avatar de kheironn
    Homme Profil pro
    Chef de projets technique C# / MVC / .Net
    Inscrit en
    Février 2007
    Messages
    822
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Chef de projets technique C# / MVC / .Net
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2007
    Messages : 822
    Points : 1 108
    Points
    1 108
    Par défaut
    J'ai réussi à avancer un peu (merci à mes collègues qui ont pu m'aider un peu). Il y avait une erreur côté serveur la méthode est donc devenue ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
            [Authorize]
            public JsonResult GetLocationIDAutocomplet(string term)
            {
                var user = db.Employees.Where(e => e.Username == User.Identity.Name).SingleOrDefault();
     
                var data = db.Locations
                    .Include(l => l.Area)
                    .Where(l => l.IsActiv && l.Area.SiteID == user.SiteId);
     
                if (!string.IsNullOrWhiteSpace(term))
                    data = data.Where(l => l.LocationID.ToUpper().Contains(term.ToUpper()));
     
    #if DEBUG
                System.Diagnostics.Debug.WriteLine(data.ToString());
    #endif
     
                var result = data.ToList().Select(l => new { l.LocationZone, l.LocationID });
     
                return Json(result, JsonRequestBehavior.AllowGet);
            }
    Ce qui envoie bien mes données (utiles) en json. Coté script, ça devient ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
            $(function () {
                $("#LocationID").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '@Url.Action("GetLocationIDAutocomplet", "Product")',
                            type: "POST",
                            dataType: "json",
                            data: { term: request.term },
                            success: function (receivedData) {
                                alert(JSON.stringify(receivedData));
                                response($.map(receivedData, function (item) {
                                    return { label: item.LocationZone, value: item.LocationID };
                                }))
                            },
                            //error: function (x, s, e) {
                            //    alert(x.responseText + '/' + s + '/' + e);
                            //},
                            //complete: function () {
                            //    alert("complete");
                            //},
                        })
                    },
                    messages: {
                        noResults: "", results: ""
                    }
                });
            });
    alert(JSON.stringify(receivedData)); contient bien mes données.
    Mais, je suppose que le problème vient de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    response($.map(receivedData, function (item) {
                                    return { label: item.LocationZone, value: item.LocationID };
    , les données ne s'affichent pas dans la petite box prévue à cette effet...
    Problème de css ou de script dans jQuery.ui ?

    j'ai bien ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Styles.Render("~/Content/themes/base/css")
    et ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));
     
     
                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                  "~/Content/themes/base/jquery.ui.core.css",
                  "~/Content/themes/base/jquery.ui.resizable.css",
                  "~/Content/themes/base/jquery.ui.selectable.css",
                  "~/Content/themes/base/jquery.ui.accordion.css",
                  "~/Content/themes/base/jquery.ui.autocomplete.css",
                  "~/Content/themes/base/jquery.ui.button.css",
                  "~/Content/themes/base/jquery.ui.dialog.css",
                  "~/Content/themes/base/jquery.ui.slider.css",
                  "~/Content/themes/base/jquery.ui.tabs.css",
                  "~/Content/themes/base/jquery.ui.datepicker.css",
                  "~/Content/themes/base/jquery.ui.progressbar.css",
                  "~/Content/themes/base/jquery.ui.theme.css"));
    En informatique, le problème se situe toujours entre le clavier et l'écran !
    Il y a deux chemins entre le clavier et l'écran : Par l'UC et par l'utilisateur.

  3. #3
    Membre éprouvé Avatar de kheironn
    Homme Profil pro
    Chef de projets technique C# / MVC / .Net
    Inscrit en
    Février 2007
    Messages
    822
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations professionnelles :
    Activité : Chef de projets technique C# / MVC / .Net
    Secteur : Conseil

    Informations forums :
    Inscription : Février 2007
    Messages : 822
    Points : 1 108
    Points
    1 108
    Par défaut
    J'ai fini par trouver le css qui me manquait.
    En informatique, le problème se situe toujours entre le clavier et l'écran !
    Il y a deux chemins entre le clavier et l'écran : Par l'UC et par l'utilisateur.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Gestion des effets dans MVC
    Par babass77 dans le forum Flex
    Réponses: 2
    Dernier message: 07/05/2009, 12h57
  2. [AJAX] autocompletion dans un iframe
    Par jeremy.joron dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 09/11/2008, 05h23
  3. autocompletion dans une liste deroulante
    Par facteur dans le forum Débuter avec Java
    Réponses: 3
    Dernier message: 06/06/2008, 23h39
  4. Réponses: 2
    Dernier message: 04/03/2008, 16h31
  5. Utilité des java beans dans MVC
    Par Bba_M dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 16/12/2006, 16h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo