Как вернуть HTML для просмотра через AJAX?

Question

У меня есть представление с помощью JQuery DataTable, которое загружает его содержимое через AJAX, вызывая метод действия (обработка на стороне сервера), который возвращает красивую строку JSON со всеми данными.

Я делаю следующее:

1. Я создаю список, который содержит данные для DataTable. Каждая строка в таблице является строковым массивом, потому что это требование для DataTables.
2. Я поместил все данные для DataTable в анонимный объект. Эти данные состоят из количества строк, данных (список) и некоторых других вещей.
3. Из этого анонимного объекта создается строка JSON, поэтому все данные возвращаются в формате JSON
4. Происходит какое-то волшебство, и данные отображаются в моей таблице данных.

Проблема в том, что я не могу вывести HTML, потому что Razor автоматически избегает этого. Я уже пробовал такие вещи, как Html.Raw, new HtmlString () и тому подобное, но проблема в том, что я ДОЛЖЕН поместить строки HTML в мою коллекцию List, потому что DataTables не может обрабатывать любые другие типы, насколько мне известно.

DataTable в моем представлении не содержит никакого определения того, какие столбцы должны быть отображены, это делается автоматически, просто просматривая мою строку JSON (с Javascript или чем-то еще) и отображая ее (снова, с Javascript).

Таким образом, вопрос заключается в следующем: как я могу отобразить HTML в моем DataTable при использовании обработки на стороне сервера MVC3?

Кстати, код:

<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) вот как вы это сделаете с двумерным массивом:

$(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», перейдите к 5-му столбцу внутри объекта nRow и измените его HTML-код таким образом, чтобы вместо «A» это было жирным шрифтом «A». В конце обратного вызова возвращается nRow в его теперь измененном состоянии.

Конечно, вы не ограничены 2D массивами. Если вы используете пары ключ-значение в трехмерном объекте, вы можете искать что-то вроде aData["someLabel"] для изменения. И столбцы не должны соответствовать; в примере они оба столбца 5, но вы можете делать все, что хотите. Или, если вы хотите изменить саму строку, вы также можете сделать это вместо того, чтобы искать конкретный td внутри nRow.

Answer 2

Как насчет использования функции append () в JQuery? Что-то примерно как ...

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

};