c# - 使用 Ajax 在 DIV 中显示列表

Question

我正在尝试使用 ajax 在 div 中显示字符串列表，但我不确定如何解析 Ajax 中的数据。

这是我在 C# 中的方法:

public JsonResult GetRecentEmployeeRecords(string whse)
{
    var recentRecords = _employeeDb.EmployeeMasters.Where(e => e.Branch == whse).OrderBy(e => e.CreateDate).Take(10);
    var list = recentRecords.Select(r => r.EmployeeNumber + " - " + r.LastName + ", " + r.FirstName).ToList();
    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(list);
    return Json(json, JsonRequestBehavior.AllowGet);
}

这是我的 ajax 语句:

    $.ajax(
    {
        type: 'GET',
        url: '../Employee/GetRecentEmployeeRecords',
        data:
        {
            whse: $('#Branch').val(),
        },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            for (var i in data) {
                $('#recentEmployeeNumbers').val(data[i] + "<br/>");
                alert(data[i]);
            }
        }
    });

看来我正在取回数据，但它似乎一次只给我单个字符。一次获取整个字符串并将所有十个字符串显示在一个 div 中的最佳方法是什么？

Answer 1

我看到 两个 三个问题。首先，您似乎在 C# 代码中对响应进行了双重编码。 JavaScriptSerializer.Serialize()和Json()或多或少做同样的事情。选择一个。

第二，在 JavaScript 中，for..in用于枚举一个对象。看起来您想迭代一个数组。为此，请使用常规 for循环:

for (var i = 0; i < data.length; i++) {
    $('#recentEmployeeNumbers').val(data[i] + "<br/>");
    alert(data[i]);
}

迭代数组的更简单方法是使用 jQuery 的 $.each() :

$.each(data, function(i) {
    $('#recentEmployeeNumbers').val(this + "<br/>");
    alert(this);
});

或者，JavaScript 5 的 Array.forEach() :

data.forEach(function(item, i) {
    $('#recentEmployeeNumbers').val(item + "<br/>");
    alert(item);
});

使用 Array.forEach() polyfill适用于较旧的浏览器。

编辑:第三，您要替换 #recentEmployeeNumbers 的值在循环的每次迭代中。 .val()仅适用于输入元素，但您询问了如何填充 div。你想要类似 .append() 的东西(对于 html)或 .text() (将对值进行 html 编码):

$.each(data, function(i) {
    $("<div>").text(this).appendTo('#recentEmployeeNumbers');
});

我注意到的另一件小事。你真的不需要打电话.ToList() 。任一 JSON 序列化程序都应该能够处理序列化 IEnumerable<string>没有问题。