首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在MVC3 Razor视图中呈现DataTable

在MVC3 Razor视图中呈现DataTable,可以使用以下步骤:

  1. 在控制器中将DataTable转换为List<T>:
代码语言:csharp
复制
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);
}
  1. 在Razor视图中使用HTML表格标签呈现DataTable:
代码语言:csharp
复制
@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>
  1. 在Razor视图中使用jQuery DataTables插件呈现DataTable:

首先,在Razor视图中引入jQuery DataTables插件的CSS和JS文件:

代码语言:html
复制
<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:

代码语言:csharp
复制
@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了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券