c# - 如何在 asp.net mvc 中将动态创建的字段绑定(bind)到表单提交的数组？

Question

我在 razor View 页面上有一个表单，我在其中使用 jQuery 动态添加行。我想将动态创建的字段绑定(bind)到一个数组，以便我可以一次浏览一个数组并将它们插入到数据库中的表中。问题是字段在“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;
    });
});

Controller Action 是:

public ActionResult CreateReport(FormCollection form)
{
    // works is null?
    var works = form["works"];           
    foreach (var work in works)
    {
        // Do something                
    }
    return null;
}

Answer 1

添加新行的脚本应该如下所示。

注意输入字段名称中的 works 前缀，它将在 MVC Controller 操作中使用。

此外，worksPerformedCollection 与包含“Works Performed”部分行的 View 模型中的属性名称相同。

index(具体来说，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;
    });
});

“性能详情”部分的输入字段应命名为works.performanceDate、works.performerName等

在服务器端，您有以下类。

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

在 MVC Controller 中你有这个。

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

请注意， Controller 操作接受 View 模型作为 works - 这与在客户端命名输入字段时使用的前缀相同。