如何present一个DataTable在MVC3的Razor视图 [英] How to Present a DataTable in an MVC3 Razor view

问题描述

我有一个.xls US preadsheet之间的可靠和测试的导入方法[1]返回数据表。我在我的业务层位于此，因为只有工作簿被持久化为上传的文件，但现在我想知道在哪里以及如何产生了这样一个HTML重新presentation 数据表数据不。我想preFER以避免在我看来两个循环。我有一个变量数列的数据表。

I have a reliable and tested import method between an .xls spreadsheet[1] that returns a DataTable. I've located this in my service layer, not data as only the workbook gets persisted as an uploaded file, but now I'm wondering where and how to produce an HTML representation of this DataTable. I would prefer to avoid two loops in my view. I have a variable number of columns in the DataTable.

[1]使用的OleDb的接口。我知道这是古老的，但它的工作原理。

[1] Using an OleDb interface. I know it's archaic but it works.

推荐答案

数据表是弱类型。我恨弱类型。

DataTables are weakly typed. I hate weak typing.

下面是另一种方法：使用视图模型，强类型的意见和显示模板。因此，通过定义将重新present你愿意来显示信息视图模型启动：

Here's an alternative approach: using view models, strongly typed views and display templates. So start by defining a view model which will represent the information you are willing to display:

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; }
}

，那么你可以有一个控制器动作，将填充此视图模型。如果您已经有吐的DataTable一些服务层，你可以映射这些表上述视图模型。对于这个演示让我们很难code的宗旨是：

then you could have a controller action which will populate this view model. If you already have some service layers that spits DataTables, you could map those tables to the aforementioned view model. For the purpose of this demo let's hardcode:

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);
    }
}

和最后一部分认为（〜/查看/主页/ Index.cshtml ）

@model MyViewModel

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

和我们的显示模板：

〜/查看/主页/ DisplayTemplates / ColumnViewModel.cshtml ：

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

〜/查看/主页/ DisplayTemplates / RowViewModel.cshtml ：

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

〜/查看/主页/ DisplayTemplates / CellValueViewModel.cshtml ：

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

这就是pretty所有得多。正如你所看到的，我们已经在我们的观点写的正是零的循环，我们结束了一个不错的＆LT;表＆gt; 结构重新presenting Excel工作表

And that's pretty much all. As you can see we have written exactly zero loops in our views and we ended up with a nice <table> structure representing an Excel Worksheet.

这篇关于如何present一个DataTable在MVC3的Razor视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！