Discussion :

[kheironn]

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.

[kheironn]

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"));

[kheironn]

J'ai fini par trouver le css qui me manquait.