将对象列表绑定到具有静态行和动态列值的表

Question

我正在一个 asp.net mvc 应用程序中创建一个带有可编辑单元格的表格，并与 Knockoutjs 绑定

鉴于这个 c# 视图模型

[Serializable]
public class Step4 {
    public IList<Projection> Projections { get; set; }
}

public class Projection : IYear {
    public int Id { get; set; }
    public string Turnover { get; set; }
    public string DirectCostOfOperation { get; set; }
}

和桌子

                <table class="table table-condensed table-bordered" style="background-image: none;">
                <thead>
                    <tr class="bg-blueberry white" style="background-image: none;">
                        <th class="text-center" style="width: 250px">Years</th>
                        <th class="text-center">@Model.Step4.Projections[0].Id</th>
                        <th class="text-center">@Model.Step4.Projections[1].Id</th>
                        <th class="text-center">@Model.Step4.Projections[2].Id</th>
                        <th class="text-center">@Model.Step4.Projections[3].Id</th>
                        <th class="text-center">@Model.Step4.Projections[4].Id</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th class="bg-carbon white" colspan="6">PROFIT AND LOSS ACCOUNT</th>
                    </tr>
                    <tr>
                        <th class="italic font-normal">Turnover</th>
                        <td><input data-bind="value: Model.Step4.Projections[0].Turnover" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[1].Turnover" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[2].Turnover" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[3].Turnover" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[4].Turnover" /></td>
                    </tr>
                    <tr>
                        <th class="italic font-normal">Direct Cost of Operations</th>
                        <td><input data-bind="value: Model.Step4.Projections[0].DirectCostOfOperation" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[1].DirectCostOfOperation" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[2].DirectCostOfOperation" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[3].DirectCostOfOperation" /></td>
                        <td><input data-bind="value: Model.Step4.Projections[4].DirectCostOfOperation" /></td>
                    </tr>
                    <tr>
                        <th class="text-right bg-lightcarbon white">Gross Profit</th>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

如您所见，第一列包含行的标题，然后是每年的值。

目前，我正在尝试将单个项目绑定到可编辑单元格，这会导致以下错误：

SCRIPT5007：无法获取未定义或空引用的属性“营业额”

根据研究，建议使用 Foreach 重复列将是解决此问题的更好方法。

请问，有人可以告诉我如何重复静态行中的列吗？

解决方案： 使用丹尼斯的想法，我将我的表更新为：

 <tr>
   <th class="italic font-normal">Turnover</th>
   <!-- ko foreach: Model.Step4.Projections -->
    <td><input data-bind="value: Turnover, uniqueName: true" /></td>
   <!-- /ko -->
 </tr>
 <tr>
   <th class="italic font-normal">Direct Cost of Operations</th>
   <!-- ko foreach: Model.Step4.Projections -->
    <td><input data-bind="value: DirectCostOfOperation, uniqueName: true" /></td>
   <!-- /ko -->
 </tr>

谢谢。

Answer 1

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var p1 = new Projection() { Id = 1, DirectCostOfOperation = "111", Turnover = "100" };
        var p2 = new Projection() { Id = 2, DirectCostOfOperation = "222", Turnover = "200" };
        var p3 = new Projection() { Id = 3, DirectCostOfOperation = "333", Turnover = "300" };
        var p4 = new Projection() { Id = 4, DirectCostOfOperation = "444", Turnover = "400" };
        var p5 = new Projection() { Id = 5, DirectCostOfOperation = "555", Turnover = "500" };

        Step4 step = new Step4();
        step.Projections = new List<Projection> { p1, p2, p3, p4, p5 };

        return View(step);
    }
}

[Serializable]
public class Step4
{
    public IList<Projection> Projections { get; set; }
}

public class Projection : IYear
{
    public int Id { get; set; }
    public string Turnover { get; set; }
    public string DirectCostOfOperation { get; set; }
}

public interface IYear
{
    int Id { get; set; }
    string Turnover { get; set; }
    string DirectCostOfOperation { get; set; }
}

查看：

@model Example.Controllers.Step4

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table class="table table-condensed table-bordered" style="background-image: none;">
    <thead>
        <tr class="bg-blueberry white" style="background-image: none;">
            <th class="text-center" style="width: 250px">Years</th>
            @foreach (var projection in Model.Projections)
            {
                <th class="text-center">@projection.Id</th>
            }
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="bg-carbon white" colspan="6">PROFIT AND LOSS ACCOUNT</th>
        </tr>
        <tr>
            <th class="italic font-normal">Turnover</th>
            @foreach (var projection in Model.Projections)
            {
                <th class="text-center">@projection.Turnover</th>
            }
        </tr>
        <tr>
            <th class="italic font-normal">Direct Cost of Operations</th>
            @foreach (var projection in Model.Projections)
            {
                <th class="text-center">@projection.DirectCostOfOperation</th>
            }
        </tr>
        <tr>
            <th class="text-right bg-lightcarbon white">Gross Profit</th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

输出：