Question

我使用MVC和Razor开发用于管理目的的应用程序。使用下面显示的模型，我试图显示用户可以编辑的矩阵。对于每一行，都有一个开始值和一个结束值，每列都是如此。在下面的示例中，X将是一个开始，Y将是设定值的结束。 X，Y和单个单元格是可编辑的。但我觉得我的解决方案可能适用于coplex，所以任何建议以简单的方式实现这一点都是受欢迎的。

我想要完成的例子：

    |         | XB | XB | XB |
    |         | YB | YB | YB |
    | XA | YA | 1  | 2  | 3  |
    | XA | YA | 3  | 4  | 5  |
    | XA | YA | 1  | 2  | 3  |
    | XA | YA | 3  | 4  | 5  |

模特：

    public class Item 
    {
        public string StartA { get; set; } // XA
        public string EndA   { get; set; } // YA
        public string StartB { get; set; } // XB
        public string EndB   { get; set; } // YB
        public string Value  { get; set; } // cell content
    }

观点：

    @model Item[]

    @using (Ajax.BeginForm("Edit", null, new AjaxOptions { HttpMethod = "Post" }, new { @class = "form-inline" }))
    {
        for (var i = 0; i < Model.Count(); i++)
        {
            @Html.HiddenFor(x => x[i].StartA)
            @Html.HiddenFor(x => x[i].EndA)
            @Html.HiddenFor(x => x[i].StartB)
            @Html.HiddenFor(x => x[i].EndB)
            @Html.HiddenFor(x => x[i].Value)
        }

        <hr />

        <table id="table1" style="border-collapse: separate; border-spacing: 8px; border:2px solid  gray;">
            <thead>
                <tr>
                    <td></td>
                    <td></td>
                    @foreach (var group in Model.GroupBy(x => new { Start = x.StartA, End = x.EndA }))
                    {
                        <td>
                            <input size="3" name="sa" value="@group.Key.Start" />
                        </td>
                    }
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    @foreach (var group in Model.GroupBy(x => new { Start = x.StartA, End = x.EndA }))
                    {
                        <td><input size="3" name="ea" value="@group.Key.End" /></td>
                    }
                </tr>
            </thead>
            <tbody>
                @foreach (var group in Model.GroupBy(x => new { Start = x.StartB, End = x.EndB }))
                {
                    <tr>
                        <td><input size="3" name="sb" value="@group.Key.Start" /></td>
                        <td><input size="3" name="eb" value="@group.Key.End" /></td>
                        @foreach (var cell in group)
                        {
                            <td style="color: coral; font-weight: bold"><input size="3" name="value" value="@cell.Value" /></td>
                        }
                    </tr>
                }
            </tbody>
        </table>
    }

问题：我不确定如何将字段绑定到视图，因为模型（项目数组）也用于生成标题（行和列定义，X和Y单元格）。当绑定工作时，我也应该能够添加行和列。

Answer 1

您只能绑定命名输入。因此，您无法将输入绑定到Items数组中的某个位置。

使这项工作的最佳方法可能是使用三个隐藏字段。一个用于存储行数，一个用于存储列数，另一个用于存储逗号分隔的数字列表。当用户点击保存时，将一些javascript复制到隐藏字段中。

您的模型需要是单个对象而不是数组。该模型将具有与隐藏字段具有相同名称的变量。我将Item数组放在ViewBag中。您可以将Item数组作为模型的成员，并使用它来构建您的html，以便它可以进行强类型检查。你只会在回发时忽略它，因为它将为空。

在MVC中有一个可编辑的矩阵

1 个答案: