将 Razor 与 Jquery 合并以实现自动完成功能

Question

我正在使用本指南 http://jqueryui.com/autocomplete/#custom-data 以及我对 C# 和 razor 知之甚少，以便在选择其中一个时尝试自动完成 3 个文本框。

因此，如果我输入 partno 并从下拉列表中选择一个，则会填充项目名称、desc 和 ID。如果我输入任何其他字段，则相同。

我创建了一个类并将其放入列表中，其中包含项目

var varItems = new List<Item>();
            varItems = db.Items.Select(tbl => new Item
                    {
                            ID = tbl.ID,
                            Name = tbl.Name,
                            PartNo = tbl.PartNo,
                            Description = tbl.Description
                    }).ToList();

然后将其发送到 viewbag 中

ViewBag.Items = var.items;

然后在视图中

   $( "#Name" ).autocomplete({
        minLength: 0,
        source: @ViewBag.Items,
        focus: function( event, ui ) {
            $( "#Name" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#Name" ).val( ui.item.Name );
            $( "#PartNo" ).val( ui.item.PartNo );
            $( "#Description" ).html( ui.item.Description );
            return false;
        }
    });

但它不喜欢 viewbag 在那里。我猜我必须做一些循环来产生类似下面的东西？

var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

如果是这样，我如何循环我的列表来创建上述内容？

谢谢大家

Answer 1

试试这个：

source: @Html.Raw(Json.Encode(@ViewBag.Items));

这会将您的项目编码为 json，它应该可以工作。