c# - MVC 在复杂的 View 模型上添加具有绑定(bind)的表行

Question

在我的 View 模型中，有一个元素列表，其中包含一个文本输入表。

View model > List of element > Table > lots of text inputs

所有这些都是通过 EditorTemplates 在 View 中生成的。

加载时所有内容都完美绑定(bind)到 View (MVC 正在为每个输入创建正确的 ID 和名称。现在我想添加和删除行并更新绑定(bind)。这意味着所有正确的数字都已更新在 ID 和名称中。

我有一个关于如何使用纯 JavaScript 来完成它的想法，但是那会很脏，并且在事情发生变化时更新起来很痛苦。我想用 HTML 助手或模型绑定(bind)器来完成它，但还没有找到方法!

有人知道如何做到这一点吗？

编辑:显然，如果我发布大量代码细节，我将有更多机会得到答复……但在这种复杂的情况下，这会很长，所以坚持下去!

这是 View 模型。 (请记住，此代码是简化版)

public class MVCViewModel
{
    public List<ActivityElement> ActivityElementList { get; set; }
}

public abstract class ActivityElement
{
}

public class Step : ActivityElement
{
    public Step()
    {
        this.Id = Guid.NewGuid();
        this.Label = "Basic Step";
    }

    public Step(string label, AbstractInput input)
        : this()
    {
        this.Label = label;
        this.Input = input;
    }

    public Guid Id { get; set; }
    public string Label { get; set; }
    public AbstractInput Input { get; set; }
}

public abstract class AbstractInput
{
    public object Value { get; set; }
}

public class GridInput : AbstractInput
{
    public List<GridCell> Headerlist { get; set; }
    public List<GridRow> RowList { get; set; }
}

public class GridRow
{
    public List<GridCell> CellList { get; set; }
}

public class GridCell
{
    public string ColumnName { get; set; }
    public AbstractInput Input { get; set; }
}

public class TextInput: AbstractInput
{
    public TextInput(string value)
    {
        this.Value = value;
    }
}

好吧!如果你还在我身边，那很好!我已经按照它们将在这种特殊情况下使用的顺序排列它们。

为了简化这一点， View 模型包含一个步骤列表。第一步包含一个 GridInput 作为他的 AbstractInput 属性。该网格包含行，每行包含单元格。对于这种情况，假设每个单元格都包含一个 TextInput 作为他的 AbstractInput。

现在，在 View 中，当使用 EditorTemplates 和 HtmlHelpers 显示时，输入的所有 ID 和名称都正确(因此绑定(bind)良好)，如以下 HTML 输出所示:

<td>
    <input id="ActivityElementList_0__Input_RowList_0__CellList_0__Input_ModelType" name="ActivityElementList[0].Input.RowList[0].CellList[0].Input.ModelType" type="hidden" value="knockout_binding_prototype.Models.TextInput">
    <input id="ActivityElementList_0__Input_RowList_0__CellList_0__Input_Value" name="ActivityElementList[0].Input.RowList[0].CellList[0].Input.Value" type="text" value="cell 1 row 1">
</td>
<td>
    <input id="ActivityElementList_0__Input_RowList_0__CellList_1__Input_ModelType" name="ActivityElementList[0].Input.RowList[0].CellList[1].Input.ModelType" type="hidden" value="knockout_binding_prototype.Models.TextInput">
    <input id="ActivityElementList_0__Input_RowList_0__CellList_1__Input_Value" name="ActivityElementList[0].Input.RowList[0].CellList[1].Input.Value" type="text" value="cell 2 row 1">
</td>

我在这里尝试做的是能够向该表中添加和删除行。这相当容易……困难的部分是确保所有绑定(bind)(ID 和名称)仍然有效。在这个特定的 HTML 输出的情况下，如果我删除第一行，我需要第二行的 ID 和名称，使其等同于第一行的 ID 和名称。

我一直在努力寻找最通用的方式来做到这一点，并尽量减少 JavaScript 的使用。所有的想法都会被考虑，所以不要害怕说些什么!

编辑 2:好的，就删除行而言，我决定只隐藏删除行并将其标记为已删除，因此所有出价都保持良好。添加行在 JavaScript 中很简单，但我正在寻找一种无需 JavaScript(或仅使用一点点)即可完成此操作的方法。

这是 View 模型中删除标志的更新。

public class GridRow
{
    public GridRow()
    {
        IsDeleted = false;
    }

    public List<GridCell> CellList { get; set; }
    public bool IsDeleted { get; set; }
}

Answer 1

尝试这种没有错误的 JS html 修改的方式。您也可以通过这种方式进行删除。您还可以决定是要在每次添加/删除调用时保存模型还是在所有更改后保存。

模型:

public class SampleModel
{
    public List<ItemModel> Items { get; set; }

    public SampleModel()
    {
        Items = new List<ItemModel>();
    }
}

public class ItemModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Controller :

 [HttpPost]
 public ActionResult Add(SampleModel model)
 {
        model.Items.Add(new ItemModel { Name = "New Item" });
        return PartialView("Items");
 }

 public ActionResult Index()
 {
        var model = new SampleModel(); // Or get model
        return View(model);
 }

 [HttpPost]
 public ActionResult Index(SampleModel model)
 {
        // Save model to DB
        return RedirectToAction("Index");
 }

索引.cshtml

@model SampleModel

@using (Html.BeginForm())
{
    <div id="container">
        @Html.Partial("Items", Model)
    </div>
    <a id="add" href="javascript:void(0);">Add</a>
    <button type="submit">Save</button>
}

<script src="jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $('#add').on('click', function () {
            $.post('@Url.Action("Add")', $('form').serializeModel(), function(html) {
                $('#container').html(html);
            });
        });
    });

    $.fn.serializeModel = function () {
        var model = {};
        $(this).serializeArray().map(function (item) {
            model[item.name] = item.value;
        });
        return model;
    };

</script>

项目.cshtml:

@model SampleModel

<table>
    @for (var i = 0; i < Model.Items.Count; i++)
    {
        <tr>
            <td>       
                @Html.HiddenFor(m => Model.Items[i].Id)
                @Html.TextBoxFor(m => Model.Items[i].Name)
            </td>
        </tr>
    }
</table>