如何改变MVC Web网格结构？

Question

我正在尝试显示MVC4Web网格控件中的项目列表。但我无法将我的web网格重新格式化为下面的表格结构。

像这样的Web网格结构。

​

​

这样的表结构。

​

​

这是我的web grid的剃刀代码。

@{
        var grid = new WebGrid(Model.EnrollPlanPriceLevelList, canPage: true, rowsPerPage: 10, selectionFieldName: "id", ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);
        if (grid.HasSelection)
        {
            var EnrollPlanPriceLevelID = grid.Rows[grid.SelectedIndex].Value;
        }
     }
    @grid.GetHtml(
    tableStyle: "table table-condensed table-striped table-hover no-margin",
    headerStyle: "",
    mode: WebGridPagerModes.All,
    columns:
    grid.Columns(
    grid.Column("", format: (item) => item.GetSelectLink(item.EnrollPlanPriceLevelID.ToString())),
    grid.Column("SchoolYears.Name", "School Year"),
    grid.Column("EnrollPlans.PlanName", "Enroll Plan"),
    grid.Column("PriceLevels.Name", "Price Level"),
    grid.Column("Price", "Price"),
    grid.Column("", format: @<text>@Html.Label("Edit", new { @id = item.EnrollPlanPriceLevelID, @class = "badge", @onclick = "bindplanprogram(" + item.EnrollPlanPriceLevelID + ")" }) </text>),
    grid.Column("", format: @<text>@Html.ActionLink("Delete", "Delete", new { id = item.EnrollPlanPriceLevelID }, new { @class = "badge" }) </text>)
            ))

下面是表结构

<table class="table table-condensed table-striped table-hover no-margin">
        <thead>
            <tr>
                <th>School Year
                </th>
                <th>Enroll Plan</th>
                <th>
                    <span class="span3">Early Bird</span>
                    <span class="span3">Value Pricing</span>
                    <span class="span4">Standard Pricing</span>
                </th>
                <th>

                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2011-2012</td>
                <td>A(k-8) Grade</td>
                <td>
                    <span class="span3">$ 50</span>
                    <span class="span3">$ 60</span>
                    <span class="span3">$ 70</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>
            <tr>
                <td>2011-2012</td>
                <td>B (9-12)Grade</td>
                <td>
                    <span class="span3">$ 70</span>
                    <span class="span3">$ 80</span>
                    <span class="span3">$ 90</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>
            <tr>
                <td>2011-2012</td>
                <td>Adult Ed. (age 18+)</td>
                <td>
                    <span class="span3">$ 1500</span>
                    <span class="span3">$ 175</span>
                    <span class="span3">$ 200</span>
                </td>
                <td>
                    <a class="badge">Edit</a>
                    <a class="badge">Delete</a>
                </td>
            </tr>

        </tbody>
    </table>

我想把我的web网格结构改成上面的表格结构。请告诉我谁来！如何相应地改变web网格结构？

Answer 1

使用WebGrid实现所需功能的唯一方法是更改所传递的数据的形状。无论是在SQL中执行此操作，还是使用LINQ创建具有适当属性的匿名类型集合，由您决定，但最终结果必须是具有与您想要的列名相匹配的公共属性的项的集合。