Question

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

鉴于此c＃viewmodel

[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重复列将是解决此问题的更好方法。

请有人告诉或告诉我如何重复静态行中的列？

解决方案： 使用Denis的想法，我将表格更新为：

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

<强>输出：

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

1 个答案: