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

我正在使用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>
    }

@model Item[]
@使用（Ajax.BeginForm（“Edit”，null，new-AjaxOptions{HttpMethod=“Post”}，new{@class=“form inline”}））
{
对于（var i=0；ix[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）
}

@foreach（Model.GroupBy中的var组（x=>new{Start=x.StartA，End=x.EndA}））
{
}
@foreach（Model.GroupBy中的var组（x=>new{Start=x.StartA，End=x.EndA}））
{
}
@foreach（Model.GroupBy中的var组（x=>new{Start=x.StartB，End=x.EndB}））
{
@foreach（组中的var单元格）
{
}
}
}

---

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

您只能绑定命名的输入。因此，不能将输入绑定到项目数组中的某个位置

可能最好的方法是使用三个隐藏字段。一个用于存储行数，一个用于列数，一个用于逗号分隔的数字列表。当用户单击save时，让一些javascript将所有数字复制到隐藏字段中

---

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

因此，例如，这三个隐藏字段的内容会是什么样子？我认为数据结构基本上是相同的。您还需要将xa、ya、xb、yb值存储在某个位置。最后，您的值将以逗号分隔，而当前模型使用数组来分隔。我真的不在乎这一点，但是我看不出这是如何解决我的问题的。例如，上面的值是行：3，列：3，值：1,2,3,4,5,1,2,3,3,4,5。你的问题是，除非我误解了，你需要一种方法，让你发布数据回来。我的建议考虑到了这一点。当然，您必须在回发时解析文本。您可以使用string.Split（）完成大部分工作。或者，您可以使用JSON或Xml，并使用内置库解析数据。除非你期望将来会有更复杂的数据，否则这可能是过火了。