Question

In my Online Registration application, I’ve created two models as below. TeamModel is used to store information regarding the team and project while MemberModel will contain information regarding the members of the team.

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

}

A team can contain any number of members within, so i’ve taken list of MemberModel in TeamModel. Intially while rendering the model i’ve instantiated MemberModel with 5 blank elements. So in my view there will be form for 5 members with “ADD MORE MEMBERS” link.

Now when user clicks in “ADD MORE MEMBERS” link i’ll check whether all 5 rows has been filled ? if so than i will add one new row using jQuery. both functionality are achieved as following.

$("#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);
                }
            }
        );
    }

now when I add more rows and select IsLeader checkbox, it’s not preserving it’s value while it gets back to the post method.

What should I do to pertain dynamically generated checkboxes value ?

Answer 1

What should I do to pertain dynamically generated checkboxes value ?

Read the following article and use non-sequential indexes for the names of your dynamically generated input fields. In this article Steven Sanderson illustrates a very useful helper Html.BeginCollectionItem which would allow you to achieve that.