c# - 如何在 jQuery.each() 函数中获取子属性？

Question

在 Controller 中:

        var jsonData = new
        {
            total = totalPages,
            page = pageIndex,
            records = totalRecords,
            rows = founduser
        };
        return jsonData;  

在 View 中:

function listItems(col, order, page, rows) {
    $.ajax({
        type: "GET",
        url: '@Url.Content("~/User/GetUsers")',
        data: { col: col, order: order, page: page, rows: rows },
        dataType: 'json',
        success: function (response) {
            var tags = "<tr><th>Login id</th><th>First name</th><th>Middle name</th><th>Last name</th><th>Prefix</th><th>Suffix</th><th>Reset</th><th>Email</th><th></th></tr>";
            $.each(response, function (index, item) {
                    tags += "<tr id=row-" + item.UserID + ">" +
                                "<td>" + item.LoginID + "</td>" +
                                "<td>" + item.FirstName + "</td>" +
                                "<td>" + item.MiddleName + "</td>" +
                                "<td>" + item.LastName + "</td>" +
                                "<td>" + item.Prefix + "</td>" +
                                "<td>" + item.Suffix + "</td>" +
                                "<td>" + item.IsReset + "</td>" +
                                "<td>" + item.SendEmail + "</td>" +
                                "<td>" +
                                "<a href=# class='ActivateItem' data-id = " + item.UserID + " item-data = " + item.LoginID + ">Activate</a> | " +
                                "<a href=/BaseAdmin/User/Details/" + item.UserID + ">Details</a></td></tr>";
            });
            $("#table-list").html(tags);
        }
    });
};  

rows 是一个 IEnumerable 数组，现在我如何获取 row 的值并放在表中？

<table id="table-list">
</table>  

我能够检索值，但无法使用 jQuery.each 显示它。感谢帮助!

示例预览:

Answer 1

从 Controller 操作返回 JSON 结果:

public ActionResult Foo()
{
    var jsonData = new
    {
        total = totalPages,
        page = pageIndex,
        records = totalRecords,
        rows = founduser
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

您可以在 AJAX success 回调中遍历 rows 属性:

success: function (response) {
var tags = "<tr><th>Login id</th><th>First name</th><th>Middle name</th><th>Last name</th><th>Prefix</th><th>Suffix</th><th>Reset</th><th>Email</th><th></th></tr>";
$.each(response.rows, function (index, item) {
    tags += "<tr id=row-" + item.UserID + ">" +
                "<td>" + item.LoginID + "</td>" +
                "<td>" + item.FirstName + "</td>" +
                "<td>" + item.MiddleName + "</td>" +
                "<td>" + item.LastName + "</td>" +
                "<td>" + item.Prefix + "</td>" +
                "<td>" + item.Suffix + "</td>" +
                "<td>" + item.IsReset + "</td>" +
                "<td>" + item.SendEmail + "</td>" +
                "<td>" +
                   "<a href=# class='ActivateItem' data-id = " + item.UserID + " item-data = " + item.LoginID + ">Activate</a> | " +
                   "<a href=/BaseAdmin/User/Details/" + item.UserID + ">Details</a>" +
                "</td>" + 
            "</tr>";
    });
    $("#table-list").html(tags);
}

这段代码中可以改进的地方:

• 不要使用字符串连接来生成 DOM 树。使用 jQuery( html, props )重载。
• 不要硬编码您的 Details anchor 的 url -> 使用 url helpers 来生成它。