Question

In controller:

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

In 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 is an IEnumerable array, now how could I get the values of row and put on the table?

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

I’m able to retrieve the values, but I can’t display it using jQuery.each. Thanks for help!

Sample preview:

Answer 1

One you return a JSON result from your controller action:

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

you can loop through the rows property in your AJAX success callback:

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);
}

Things that could be improved in this code:

• don’t use string concatenations to generate a DOM tree. Use the jQuery( html, props ) overload.
• don’t hardcode the url of your Details anchors -> use url helpers to generate it.