Preserve dynamically generated check box's value on postback

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 ?

Poulard

whenever post back occurs, you will get a fresh set of data. it will erase and render the new request. alternativily you can store values in Session or Hidden control or Send it to sever and save it in ViewBag or ViewData – Hydrocephalus

@Ravi : I am getting all other data, just check box values are not available. – Poulard

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.

Randalrandall

For this I've to change code at many place ? Can't tweak current solution ? – Poulard

No, you can't because you are violating the standard naming conventions that the default model binder expects for binding to collections. Also it would be a good thing to fix your code instead of tweaking it. – Randalrandall