Question

我创建了一个MVC应用程序，它将显示一组位于给定目录中的文件名。为了显示列表，我在我的视图中使用了普通表。由于视图返回了一个巨大的文件名列表，我被要求使用jquery数据表，我不太了解。我尝试了很多建议，但根本无法返回列表。请看下面的代码。

控制器：

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

由于您已经创建了包含列标题的HTML表，因此只需使用DataTable中的内置AJAX调用函数来获取JSON数据：

$('#table').DataTable({
    "ajax": {
        "url": "@Url.Action("GetSupportingChannelData", "SupportingChannel")", // action method URL
        "type": "GET",
        "datatype": "json"
    },
    , columns: [
            { data: 'columnName1' },
            { data: 'columnName2' },
            { data: 'columnName3' },
            { data: 'columnName4' },
            { data: 'columnName5' }
    ],
    // other settings
});

然后使用返回类型JsonResult将模型列表作为将传递给DataTable的JSON数据返回（我假设有另一个操作方法返回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

使用jquery数据表绑定列表

1 个答案: