C# 在asp.net mvc中，如何在表单提交时将动态创建的字段绑定到数组？

我在razor视图页面上有一个表单，我正在使用jQuery动态添加行。我想将动态创建的字段绑定到一个数组，这样我就可以一次浏览一个数组，并将它们插入数据库中的表中。问题是“FormCollection”中的字段显示为单个字段，而不是数组

请参见所附图片查看页面：

用于添加新行的jQuery脚本：

$(function() {
    var tableRowNum = 1;
    $("#add-work-row").click(function () {
        tableRowNum++;
        var tableRow = "<tr>";
        tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workCover' type='checkbox' class='text' /></td>";
        tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workTitle' type='text' class='text work-title caps' /></td>";
        tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workComposers' type='text' class='text work-composer caps' /></td>";
        tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workPerformances' type='text' class='text work-performances' /></td>";
        tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workDuration' type='text' class='text work-duration input-duration' /></td>";
        tableRow += "<td><a href='#' class='delete-row'></a></td>";
        tableRow += "</tr>";
        $("#worksTable").append(tableRow);
        return false;
    });
});

---

用于添加新行的脚本应如下所示

请注意输入字段名称中的

前缀，它将用于MVC控制器操作

另外，
worksPerformedCollection
与viewmodel中包含“已执行工作”部分行的属性名称相同

索引
（特别是
works.worksPerformedCollection.index
）用于对每行的输入进行分组。如果
tableRowNum
是连续的，则不需要它，如果不是，则需要它。我猜您的行可能没有按顺序编号，因为您在UI中有删除行的功能

$(function() {
    var tableRowNum = 1;
    $("#add-work-row").click(function () {
        tableRowNum++;
        var tableRow = "<tr>";
        // Index value for grouping (non-sequential) rows.
        tableRow += "<td><input type='hidden' name='works.worksPerformedCollection.index' value=" + (tableRowNum - 1) + " /></td>";
        // Checkbox.
        tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workCover' type='checkbox' class='text' value='true' />";
        tableRow += "<input type='hidden' name='works.worksPerformedCollection["+ (tableRowNum - 1) +"].workCover' value='false' /></td>";

        tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workTitle' type='text' class='text work-title caps' /></td>";
        tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workComposers' type='text' class='text work-composer caps' /></td>";
        tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].performances' type='text' class='text work-performances' /></td>";
        tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].duration' type='text' class='text work-duration input-duration' /></td>";
        tableRow += "<td><a href='#' class='delete-row'></a></td>";
        tableRow += "</tr>";
        $("#worksTable").append(tableRow);
        return false;
    });
});

在MVC控制器中，您有这个

[HttpPost]
public ActionResult CreateReport(PerformanceViewModel works)
{
    // ...
}

请注意，控制器操作接受viewmodel作为
工作方式
-这与在客户端命名输入字段时使用的前缀相同。
不要在绑定到模型的MVC中使用
FormCollection
。您甚至没有显示如何生成新行或需要绑定到的模型。请使用
IEnumerable
，而不是
FormCollection
，其中
YourViewModel
表示表中的一行。请参阅Phil Haack的artile on model binding:@StephenMuecke，我已经添加了向表中添加行的jquery脚本。我可能可以创建一个带有属性works[]的模型并绑定到它。但我在另一个SO答案中读到，如果我们将字段命名为“works[0].fieldName”，它将绑定到一个名为“works”的数组。此概念在此不起作用。不，它将绑定到一个包含名为
Works
的属性的模型，该属性是一个包含名为
WorkCover
的属性的模型的集合，
WorkTitle
等。但您的代码还有其他问题，如果您删除了一个项目，它将永远无法工作。有关如何执行此操作，请参阅2个选项。
public class PerformanceViewModel
{
    [Required]
    public DateTime PerformanceDate { get; set; }

    [Required]
    public string PerformerName { get; set; }

    // ...

    public IEnumerable<WorksPerformedViewModel> WorksPerformedCollection { get; set; }
}

public class WorksPerformedViewModel
{
    public bool WorkCover { get; set; }
    public string WorkTitle { get; set; }
    public string WorkComposers { get; set; }
    public int? Performances { get; set; }
    public TimeSpan? Duration { get; set; }
} 

[HttpPost]
public ActionResult CreateReport(PerformanceViewModel works)
{
    // ...
}