Question

我已经仔细阅读了这里的帖子，但没有找到有效的解决方案......

我正在使用JQuery自动完成功能来下载员工的下拉列表。我能够使用值加载列表，但它包含我传递的字典中的键而不是值。我想展示两者。

控制器代码：

public JsonResult GetEmp(string id)
    {
        if (id.Length > 3)
        {
            var result = Json(repository.SearchForEmployee(id), JsonRequestBehavior.AllowGet);
            return result;
        }

        return null;
    }

Jquery代码：

    $('.empId').keyup(function () {
    var x = $('.empId').val();
    var arrayValues = [];
    $.ajax({
        url: '../../Employee/GetEmployee',
        type: "Get",
        data: { id : x },
        cache: false,
        datatype: 'json',
        traditional: true,
        success: function (result) {
            $.each(result, function (item) {
                arrayValues.push(item);
            })
            $(".empId").autocomplete({
            source: arrayValues
        });
        },

        error: function (err) {
            alert('Foo')
        }
    });
});

调试时Controller操作中的JSON结果变量：

[0]  {[12345, Sharon Moore]}
[1]  {[12346, Amy Adams]}
[2]  {[12349, Adam Smith]}

自动完成的JScript数组的实际内容：

12345, 24563, 84565

任何人都可以解释为什么它只带来第一个值（键）？键和值都是字符串。再次感谢...

Answer 1

由于您要返回一个对象而不是一个数组，您可以尝试这样的事情：

var array_of_objects = [];
for (var key in result) {
   var val = result[key];
    //Now you have your key and value which you 
    //can add to a collection that your plugin uses
   var obj = {};
   obj.label = key;
   obj.value = val;
   array_of_objects.push(obj);
}

$(".empId").autocomplete({
     source: array_of_objects
});

或者，您可以在C＃代码中返回一个ArrayList（它将是一个对象/记录数组）。以下是我的一个项目的示例代码：

        [HttpPost]
        public ActionResult GetProject(int id) {
            string connStr = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
            SqlConnection conn = new SqlConnection(connStr);

            string sql = "SELECT * FROM [Portfolio] WHERE [id] = @id";
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.SelectCommand.Parameters.Add(new SqlParameter("@id", id));
            DataTable dt = new DataTable();

            conn.Open();
            da.Fill(dt);
            da.Dispose();
            conn.Close();

            return Json(objConv.DataTableToArrayList(dt), JsonRequestBehavior.AllowGet);
        }

objConv是我使用的辅助工具。以下是我在上面的代码示例中使用的DataTableToArrayList方法的代码：

public ArrayList DataTableToArrayList(DataTable dataTbl) {

            ArrayList arrList = new ArrayList();

            foreach (DataRow dRow in dataTbl.Rows) {
                Hashtable recordHolder = new Hashtable();
                foreach (DataColumn column in dataTbl.Columns) {
                    if (dRow[column] != System.DBNull.Value) {
                        recordHolder.Add(column.ToString(), dRow[column].ToString());
                    } else {
                        recordHolder.Add(column.ToString(), "");
                    }
                }
                arrList.Add(recordHolder);
            }

            return arrList;
        }

Answer 2

JQuery UI Autocomplete期望特定的数据结构能够正常工作。

SearchForEmployee必须以此格式返回数据列表：

public class EmployeeAutocomplete
{
   public string @label { get; set; }
   public string @value { get; set; }
}

或者您需要将javascript转换为该格式而不是数组列表：

success: function (result) {
        $.each(result, function (item) {
            arrayValues.push(new { label: item[1], value: item[0] });
        });
        $(".empId").autocomplete({
            source: arrayValues
        });
    },

自动填充参考：http://api.jqueryui.com/autocomplete/

Answer 3

jQuery UI Autocomplete可以自己进行ajax调用，所以我真的不明白为什么你要单独进行ajax调用。

$("#txtbox").autocomplete({
    source: url
});

尽管如此，如果您想要发送值和标签，则应以[ { label: "Choice1", value: "value1" }, ... ]的格式返回控制器中的json。

http://api.jqueryui.com/autocomplete/#option-source

Answer 4

这是我在几个地方使用的一段代码。我没有使用您正在使用的自动完成功能，但我不认为这是一个问题。

客户端：

    $.getJSON('../../Employee/GetEmployee', { id: x }, function (results) {
        var yourDropdown = $('#YourDropdown');
        var json = JSON.parse(results);
        $.each(json, function (index, item) {
            yourDropdown.append($('<option/>', {
                value: item.Value,
                text: item.Text
            }));
        });

        //Implement the autocomplete feature.
    });

服务器端：

    [HttpGet]
    public JsonResult GetElements(int id)
    {
        IEnumerable<SelectListItem> elements;

        //Some routine that gets the elements goes here.

        var serializer = new JavaScriptSerializer();
        return Json(serializer.Serialize(elements), JsonRequestBehavior.AllowGet);
    }

我没有在您的特定方案中测试代码，但它应该可以工作，因为我在多个位置使用代码段。

注意：尝试使用 getJson 方法而不是 $ .ajax 。它是您正在使用的ajax实现的快捷方式。如您所见，代码更简洁，更易读。

从JSON字典中解析键/值对导致MVC

4 个答案: