如何通过 AJAX 返回 HTML 以查看？

Question

我有一个带有 JQuery DataTable 的视图，它通过调用一个动作方法（服务器端处理）通过 AJAX 加载它的内容，该方法返回一个带有所有数据的漂亮 JSON 字符串。

我正在做的事情如下：

1. 我创建了一个包含 DataTable 数据的列表。表中的每一行都是一个字符串数组，因为这是 DataTables 的要求。
2. 我将 DataTable 的所有数据放在一个匿名对象中。此数据由行数、数据（列表）和其他一些内容组成。
3. 从这个匿名对象创建一个 JSON 字符串，因此所有数据都以 JSON 格式返回
4. 发生了一些神奇的事情，数据显示在我的 DataTable 中。

问题是：我无法输出 HTML，因为 Razor 会自动转义它。我已经尝试过 Html.Raw、new HtmlString() 之类的东西，但问题是：我必须将 HTML 字符串放入我的 List 集合中，因为据我所知，DataTables 无法处理任何其他类型。

在我看来，DataTable 不包含应呈现哪些列的任何定义，这是通过循环我的 JSON 字符串（使用 Javascript 或其他）并显示它（再次使用 Javascript）自动完成的。

所以问题是：使用 MVC3 服务器端处理时，如何在 DataTable 中呈现 HTML？

顺便说一句，代码：

<table id="datatable">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Destination address</th>
            <th>Platform</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody id="tabledata">
    <!-- Content will be rendered here by AJAX -->
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Destination address</th>
            <th>Platform</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </tfoot>
</table>

以及服务器端处理：

public JsonResult List()
{
    List<PushApplication> pushApplications = _service.GetData(Request).ToList();

    int totalRecords = _service.GetApplicationCount();

    // Reformat the data.
    List<string[]> aaData = new List<string[]>(pushApplications.Count);
    aaData.AddRange(pushApplications.Select(application => new[]
    {
        application.Id.ToString(),
        application.Name, 
        application.DestinationAddress,
        application.Platform,
        "<a href='/PushApplication/Edit/" + application.Id + "'>Modify</a>",
        "<a href='/PushApplication/Delete/" + application.Id + "'>Delete</a>"
    }));

    // Construct anonymous object for the data table.
    var data = new { sEcho = Request.QueryString["sEcho"], iTotalRecords = totalRecords, iTotalDisplayRecords = totalRecords, aaData = aaData };

    return Json(data, JsonRequestBehavior.AllowGet);
}

我使用以下 Javascript 调用数据表：

$(document).ready(function () {
    var oTable = $('#datatable').dataTable({
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "iDisplayStart": 0,
        "sEcho": 1,
        "sDom": 'T<"clear"><"top"fi>rt<"bottom"pl><"clear">',
        "sAjaxSource": '/PushApplication/List',
        "sPaginationType": "full_numbers",
        "fnServerData": fnDataTablesPipeline,
        "oTableTools": {
            "sSwfPath": "/Plugins/TableTools/swf/copy_cvs_xls_pdf.swf"
        },
        "aoColumns": [
            { sWidth: '10%' },
            { sWidth: '30%' },
            { sWidth: '30%' },
            { sWidth: '30%' }
        ]
    });

    $("#submitForm").click(function () {
        oTable.fnDraw();
    });
});

Answer 1

我想我误解了我的第一个回复，所以如果您已经阅读它，请道歉：

您是否尝试将 HTML 添加到某些单元格或行中？例如，添加一个具有扩展功能的按钮？

做到这一点的最佳方式不是在 JSON 中（尽管它在其他框架中肯定是可能的），而是在 DataTables 回调中。如果您想影响行中的单个行或单元格，请选择fnRowCallback，我曾使用它向我的单元格添加任意数量的额外小部件和标记。

[更新如下]

在 DataTables 网站 (http://datatables.net/ref#fnrowcallback) 中，您可以使用 2D 数组执行此操作：

$(document).ready(function() {
    $('#example').dataTable( {
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            /* Bold the grade for all 'A' grade browsers */
            if ( aData[4] == "A" )
            {
                $('td:eq(4)', nRow).html( '<b>A</b>' );
            }
            return nRow;
        }
    } );
} );

示例的进一步解释：回调接受几个不同的对象，包括nRow，它是当前行的对象实例，和aData，它对应于服务器端发回的aaData。这是一个简单的 if 语句：如果第 5 列数据中有字符串“A”，则转到 nRow 对象内部的第 5 列并更改其 HTML，以便将“A”替换为粗体“A”。在回调结束时，nRow 以现在修改的状态返回。

您当然不受二维数组的限制。如果您在 3D 对象中使用键值对，您可能会寻找类似 @​​987654323@ 的内容进行修改。并且列不需要对应；在示例中，它们都是第 5 列，但您可以做任何您想做的事情。或者，如果您想修改行本身，您也可以这样做，而不是在 nRow 中查找特定的 td。

Answer 2

使用 JQuery 的 append() 函数怎么样？大概是……

function fillTable(data) {
    var r = new Array(), j = -1;
    $('#datatable tbody:gt(0)').empty();
    var html = '<tbody>';
    for (var key = 0, size = data.length; key < size; key++) {
        var row = '<tr>';
        row += '<td>' + data[key].Application.Id + '</td>';
        row += '<td class="account-field">' + data[key].Application.Name + '</td>';
        //keep adding here
        row += '</tr>'

        html += row;
    }
    html += '</tbody>';
    $('#datatable').append(html);

};