在MVC3 Razor视图中呈现DataTable,可以使用以下步骤:
public ActionResult Index()
{
DataTable dataTable = GetDataTable();
List<DataTableViewModel> dataList = dataTable.AsEnumerable()
.Select(row => new DataTableViewModel
{
Column1 = row.Field<string>("Column1"),
Column2 = row.Field<int>("Column2"),
Column3 = row.Field<decimal>("Column3")
})
.ToList();
return View(dataList);
}
@model List<DataTableViewModel><table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Column1</td>
<td>@item.Column2</td>
<td>@item.Column3</td>
</tr>
}
</tbody>
</table>
首先,在Razor视图中引入jQuery DataTables插件的CSS和JS文件:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"><script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
然后,在Razor视图中使用以下代码呈现DataTable:
@model List<DataTableViewModel><table id="dataTable" class="display">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Column1</td>
<td>@item.Column2</td>
<td>@item.Column3</td>
</tr>
}
</tbody>
</table><script>
$(document).ready(function() {
$('#dataTable').DataTable();
});
</script>
这样就可以在MVC3 Razor视图中呈现DataTable了。
领取专属 10元无门槛券
手把手带您无忧上云