AJAX経由でHTMLを返す方法は？

Question

私は、すべてのデータを含む素敵なJSON文字列を返すアクションメソッド（サーバー側の処理）を呼び出すことによって、AJAX経由でコンテンツを読み込むJQuery DataTableを持つビューを持っています。私がやっている何

は次のとおりです。

1. 私はDataTableのためのデータが含まれているリストを作成します。テーブルの各行は文字列配列です。これはDataTableの要件です。
2. DataTableのすべてのデータを匿名オブジェクトに入れました。このデータは、行の量、データ（リスト）および他のものから成ります。
3. すべてのデータがJSON形式で返されるように、この匿名オブジェクトからJSON文字列が作成されます。
4. 魔法が発生し、データが自分のDataTableに表示されます。

問題は次のとおりです.Razorが自動的にエスケープするため、HTMLを出力できません。私はすでにHtml.Raw、新しいHtmlString（）などのようなものを試してみましたが、問題は次のとおりです。DataTableが他のどの型も私が知る限り処理できないため、HTMLの文字列をListコレクションに入れなければなりません。

私のビュー内の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に移動してください。追加のウィジェットとマークアップをセルに追加しています。

のDataTableのウェブサイトから

を[更新は、以下の（のhttp：// DataTableの。ネット/ REF＃のfnrowcallbackは）ここでは、2次元配列でそれを行うだろう方法は次のとおりです。

$(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など、いくつかの異なるオブジェクトを、受け入れaaDataに対応するaDataは、サーバ側によって返送される。これは単純なif文です：データの5番目の列に文字列 "A"がある場合は、nRowオブジェクトの5番目の列に移動し、 "A"の代わりに太字の "A"になるようにHTMLを変更します。コールバックの終了時に、nRowは現在変更された状態で戻されます。

もちろん、2D配列には制限されません。 3Dオブジェクトでキーと値のペアを使用している場合は、変更するにはaData["someLabel"]のようなものを探します。列は対応する必要はありません。例では、両方とも5列目ですが、何でもできます。また、行自体を変更したい場合は、tdの中のnRowを探すのではなく、その行を変更することもできます。

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

};