jqueryデータテーブルを使用してリストをバインドします

Question

私は、指定されたディレクトリにある一連のファイル名を表示するMVCアプリケーションを作成しました。リストを表示するために、私は私のview.Sinceビューのファイル名の巨大なリストを返すので、私は多くのアイデアを持っていないjquery datatableを使用するように求めているので、通常のテーブルを使用しています。私はたくさんの提案をしてみましたが、リストを返すことはできませんでした。以下のコードをご覧ください。

コントローラ：iがデータとしてこのリストを渡すhowcanのように

public class SupportingChannelController : Controller 
{ 
// GET: SupportingChannel 
List<SupportingChannel> _list = null; 
SupportingChannelBL _bl = new SupportingChannelBL(); 
SupportingChannelDataVM _data = new SupportingChannelDataVM(); 
public ActionResult GetSupportingChannelData() 
{ 
_list = _bl.channel(); 

_data._model = _list; 
return View("SupportingChannel", _data); 
} 

ビュー

@model MultiRequestInterface.Models.SupportingChannelDataVM 
@{ 
ViewBag.Title = "SupportingChannel"; 
} 

<h2>Supporting Channels</h2> 
@using (Html.BeginForm("getComType","SupportingChannel",FormMethod.Post)) 
{ 

<div> 

<style> 
table,th,td 
{ 
border: 1px solid black; 
border-collapse: collapse; 
align-content:center; 
} 
</style> 
<div style="border:solid;width:100%;overflow-x:auto;"> 
<table id="table" align="center" style="width:100%" class="display"> 
<thead> 
<tr> 
<th>Communication Type</th> 
<th>Communication Description</th> 
</tr> 
</thead> 
</table> 
</div> 
<input type="submit" name="submit" value="submit" /> 
</div> 
if (TempData["testmsg"] != null) 
{ 
<script type="text/javascript"> 
alert("@TempData["testmsg"]"); 
</script> 
} 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script 
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"> 
</script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
var table = $('#table').DataTable(); 
var data = table.data; 
$.ajax({ 
url: 'GetSupportingChannelData/SupportingChannel', 
dataType: 'json', 
contentType: "application/json;", 
data: JSON.stringify(data), 
success: function() { 


}, 

}); 
}); 
</script> 

私はビューにリストを返すおりますので、私はちょうどいくつかの助けをしたいですjqueryデータテーブル.. ありがとうございます

Answer 1

$('#table').DataTable({ 
    "ajax": { 
     "url": "@Url.Action("GetSupportingChannelData", "SupportingChannel")", // action method URL 
     "type": "GET", 
     "datatype": "json" 
    }, 
    columns: [ 
     // column list here 
    ], 
    // other settings 
}); 

が次に渡されますJSONデータとしてモデルのリストを返すために、戻り値の型JsonResultを使用します「は既にHTMLテーブルがちょうどビルトインAJAX呼び出し機能DataTableには、JSONとしてデータをフェッチするために使用する、列のヘッダーを含む作成しまし（私はDataTableが属するべきビューを返し、別のアクションメソッドがあると仮定）DataTableに：

public class SupportingChannelController : Controller 
{ 
    List<SupportingChannel> _list = null; 
    SupportingChannelBL _bl = new SupportingChannelBL(); 

    // other class-level fields 

    // returns view to render DataTable 
    public ActionResult GetChannelData() 
    { 
     return View(); 
    } 

    // returns JSON data from list of model values 
    public ActionResult GetSupportingChannelData() 
    { 
     // other stuff 

     _list = _bl.channel(); 

     // other stuff 

     return Json(new { data = _list }, JsonRequestBehavior.AllowGet); 
    } 
} 

その他の参照：

Implement jQuery Datatable in ASP.NET MVC application

AJAX CRUD Operation With jQuery DataTables In ASP.NET MVC 5