如何在MVC3 Razor视图中呈现DataTable

Question

我在一个返回a的.xls电子表格[1]之间有一个可靠且经过测试的导入方法DataTable.我已将此位于我的服务层,而不是数据,因为只有工作簿被保存为上传文件,但现在我想知道在哪里以及如何生成这种HTML表示DataTable.在我看来,我宁愿避免两个循环.我有一个可变数量的列DataTable.

[1]使用OleDb接口.我知道这很古老,但它确实有效.

Answer 1

DataTables是弱类型的.我讨厌弱打字.

这是另一种方法:使用视图模型,强类型视图和显示模板.首先定义一个视图模型,它将代表您愿意显示的信息:

public class MyViewModel
{
    public IEnumerable<ColumnViewModel> Columns { get; set; }
    public IEnumerable<RowViewModel> Rows { get; set; }
}

public class ColumnViewModel
{
    public string Name { get; set; }
}

public class RowViewModel
{
    public IEnumerable<CellValueViewModel> Values { get; set; }
}

public class CellValueViewModel
{
    public string Value { get; set; }
}

然后你可以有一个控制器动作来填充这个视图模型.如果您已经有一些吐出DataTables的服务层,您可以将这些表映射到上述视图模型.为了这个演示的目的,让我们硬编码:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Columns = new[] 
            { 
                new ColumnViewModel { Name = "column1" }, 
                new ColumnViewModel { Name = "column2" }, 
                new ColumnViewModel { Name = "column3" }, 
            },
            Rows = new[]
            {
                new RowViewModel 
                {
                    Values = new[] 
                    {
                        new CellValueViewModel { Value = "1x1" },
                        new CellValueViewModel { Value = "1x2" },
                        new CellValueViewModel { Value = "1x3" },
                    }
                },
                new RowViewModel 
                {
                    Values = new[] 
                    {
                        new CellValueViewModel { Value = "2x1" },
                        new CellValueViewModel { Value = "2x2" },
                        new CellValueViewModel { Value = "2x3" },
                    }
                },
                new RowViewModel 
                {
                    Values = new[] 
                    {
                        new CellValueViewModel { Value = "3x1" },
                        new CellValueViewModel { Value = "3x2" },
                        new CellValueViewModel { Value = "3x3" },
                    }
                }
            }
        };
        return View(model);
    }
}

最后一部分是view(~/Views/Home/Index.cshtml):

@model MyViewModel

<table>
    <thead>
        <tr>
            @Html.DisplayFor(x => x.Columns)
        </tr>
    </thead>
    <tbody>
        @Html.DisplayFor(x => x.Rows)
    </tbody>
</table>

和我们的显示模板:

~/Views/Home/DisplayTemplates/ColumnViewModel.cshtml:

@model ColumnViewModel
<th>
    @Html.DisplayFor(x => x.Name)
</th>

~/Views/Home/DisplayTemplates/RowViewModel.cshtml:

@model RowViewModel
<tr>
    @Html.DisplayFor(x => x.Values)
</tr>

~/Views/Home/DisplayTemplates/CellValueViewModel.cshtml:

@model CellValueViewModel
<td>
    @Html.DisplayFor(x => x.Value)
</td>

这就是全部.正如您所看到的,我们在视图中编写了完全零循环,最后我们得到了一个<table>代表Excel工作表的漂亮结构.