Question

我无法从JSON控制器Action获得所需的结果。我已经搜索过互联网，但没有建议的解决方案可以解决我的问题。

我的控制器操作：

public JsonResult AutoComplete(string term)
        {
            var result = (from c in db.CategoryContents
                          where c.Title.ToLower().Contains(term.ToLower())
                          select new { c.Title, c.ImageURL, Description = c.Category.Name + " Review" }).Distinct();
                            return Json(result, JsonRequestBehavior.AllowGet);
        }

这是我的jQuery ajax文件：

$(document).ready(function () {


            var displayLimit = 7;


    // jqueryui autocomplete configuration
    $("#term").autocomplete({
                    source: function (req, resp) { // get JSON object from SearchController
            $.ajax({
                url: "/Search/AutoComplete", // SearchController JsonResult
                type: "POST",
                dataType: "json",
                data: { term: req.term },
                success: function (data) {
                    resp($.map(data, function (item) {

                        return { label: item.Name, value: item.Name, imageURL: item.ImageURL, id: item.ID };
                    }

                    ));
                }
            });
        },



        select: function (event, ui) { // keyword selected; parse values and forward off to ProductController's ViewProduct View
            var selected = ui.item;
            var mdlNum, mdlName;

            if (selected.value !== null) {
                var array = selected.value.split(' ');
                mdlNum = array[0].toLowerCase();
                //   mdlName = selected.value.replace(array[0], '').trim().toLowerCase().replace(/[^a-z0-9]+/g, ' ');
                // window.location.replace('http://' + location.host + '/Search/Refine?ref=' + mdlNum + '' + mdlName);
                window.location.replace('http://' + location.host + '/Category/Details/' + ui.id);

            }

        },

        open: function () { $('ul.ui-autocomplete').addClass('opened') },
        close: function () { $('ul.ui-autocomplete').removeClass('opened').css('display', 'block'); }


    }) 

.data("ui-autocomplete")._renderItem = function (ul, item) {

            //var inner_html = '<a><div id="example" class="k-content"><div class="demo-section"><div class=".customers-list img"><img src="' + "../common/theme/images/gallery/3.jpg" + '"></div><div class="customers-list h3">' + item.label + '</div><div class="customers-list p">' + item.description + '</div></div></div></a>';


            var newText = String(item.value).replace(
                   new RegExp(this.term, "gi"),
                   "<strong>$&</strong>"
                 //  "<span class='ui-state-highlight'>$&</span>"
                   );

            var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.imageURL + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.id + '</div></div></a>';


            return $("<li></li>")
                .data("item.autocomplete", item).append(inner_html)
                .appendTo(ul);

        };

它没有返回productId，我在这行上有错误：

window.location.replace('http://' + location.host + '/Category/Details/' + ui.id);

说/ Category / Details / undefined但我想id而不是undefined。请帮忙。

Answer 1

您需要从自动填充中返回ID，但预测中缺少该var result = (from c in db.CategoryContents where c.Title.ToLower().Contains(term.ToLower()) select new { c.Title, c.ImageURL, Description = c.Category.Name + " Review", ID = c.ID }).Distinct(); return Json(result, JsonRequestBehavior.AllowGet);。

将其更改为以下内容：

ID

以上假设数据库中的{{1}}为大写。

Answer 2

jQuery UI Autocomplete需要一个只有label和value属性的数据源。即使您传递了额外的属性：imageURL和id，您的select回调也无法使用这些属性。

改变这个：

resp($.map(data, function (item) {
    return { label: item.Name, value: item.ID, imageURL: item.ImageURL, id: item.ID };
}

而且：

window.location.replace('http://' + location.host + '/Category/Details/' + ui.item.value);

我已对其进行了更改，因此每个建议项的value都会设置为您的网络服务中的item.ID。然后可以通过回调中的ui.item.value获取此信息。

无法从json结果MVC 4中检索值

2 个答案: