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，它可以帮助您实现这一目标。

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

1 个答案: