在回发时保留动态生成的复选框的值

Question

在我的在线注册应用程序中，我创建了两个模型，如下所示。 TeamModel 用于存储有关团队和项目的信息，而 MemberModel 将包含有关团队成员的信息。

public class MemberModel
{
    [Display(Name = "Member Name")]
        public string MemberName { get; set; }

    [Display(Name = "Speciality")]
        public string Speciality { get; set; }

    public bool IsLeader { get; set; }
}

public class TeamModel
{
    [Display(Name = "Team Name")]
        public string TeamName { get; set; }

    [Display(Name = "Project Name")]
        public string ProjectName { get; set; }


    [Display(Name = "Project Details")]
        public string ProjectDetails { get; set; }

    public List<MemberModel> MemberModel { get; set; }

}

一个团队可以包含任意数量的成员，所以我在 TeamModel 中列出了 MemberModel。最初在渲染模型时，我用 5 个空白元素实例化了 MemberModel。所以在我看来，将有 5 个成员的表格，带有“添加更多成员”链接。

现在当用户点击“添加更多成员”链接时，我会检查是否所有 5 行都已填满？如果是这样，我将使用 jQuery 添加一个新行。这两个功能都实现如下。

$("#AddMoreMember").click(function () {
        var rowCount = $("#tblOptions tr:gt(0)").length;
        var MemberName = "MemberModel[" + rowCount + "].MemberName";
        var MemberId = "Member" + rowCount;
        var Speciality = "MemberModel[" + rowCount + "].Speciality";
        var SpecialityId = "Speciality" + rowCount;
        var IsLeader = "MemberModel[" + rowCount + "].IsLeader";
        var LeaderId = "Leader" + rowCount;
        var flag = false;
        for (var i = 0; i < rowCount; i++) {
            var UserDetail = "MemberModel_" + i + "__MemberName";
            var value = $("#" + UserDetail).val();
            if (value == null || value == "") {
                flag = true;
            }
        }

        if (flag == false) {
            var NameTag = '<input type="text" value="" style="width:200px" maxlength="1000"  name="' + MemberName + '" id = "' + MemberId + '" data-val-regex-pattern="^[^&lt;&gt;~%^;/|]+" data-val-regex="^&amp;lt;&amp;gt;~%;/| characters are not allowed in option" data-val="true" class="input-validation-error">';
            var SpecialityTag = '<input type="text" value="" style="width:200px" maxlength="1000"  name="' + Speciality + '" id = "' + SpecialityId + '" data-val-regex-pattern="^[^&lt;&gt;~%^;/|]+" data-val-regex="^&amp;lt;&amp;gt;~%;/| characters are not allowed in option" data-val="true" class="input-validation-error">';
            var LeaderTag = '<input type="checkbox" value="false" onclick="CheckDefault(this);" name="' + IsLeader + '" id="' + LeaderId + '">';
            var html = '<tr><td align="left" style="width: 30%">' + NameTag + '</td><td align="left" style="width: 30%">' + SpecialityTag + '</td><td align="left" style="width: 30%">' + LeaderTag + '</td></tr>';
            $("#tblOptions tr:last").after(html);
        }
    });

    function CheckDefault(obj)
    {
        var id = $(obj).attr("id");
        $("input:checkbox[id*=MemberModel]").each(
            function(){
                var radioID = $(this).attr("id");
                if (radioID != id)
                {
                    $("#" + radioID).prop("checked",false);
                }
            }
        );
    }

现在，当我添加更多行并选择 IsLeader 复选框时，它不会在返回到 post 方法时保留其值。

我应该如何处理动态生成的复选框值？

Answer 1

我应该如何处理动态生成的复选框值？

阅读following article 并为动态生成的输入字段的名称使用非顺序索引。在这篇文章中，Steven Sanderson 展示了一个非常有用的助手 Html.BeginCollectionItem，它可以让您实现这一目标。