1

私のオンライン登録アプリケーションでは、以下の 2 つのモデルを作成しました。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 をインスタンス化しました。したがって、私の見解では、「ADD MORE MEMBERS」リンクを含む 5 人のメンバー用のフォームがあります。

ユーザーが「ADD MORE MEMBERS」リンクをクリックすると、5行すべてが入力されているかどうかを確認しますか? もしそうなら、jQueryを使用して新しい行を1つ追加します。両方の機能は次のように実現されます。

$("#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 メソッドに戻るまで値が保持されません。

動的に生成されたチェックボックスの値に関連するにはどうすればよいですか?

4

1 に答える 1

1

動的に生成されたチェックボックスの値に関連するにはどうすればよいですか?

動的に生成された入力フィールドの名前を読み取り、following article非順次インデックスを使用します。この記事では、Steven SandersonHtml.BeginCollectionItemが、それを実現できる非常に便利なヘルパーを示しています。

于 2013-02-05T08:10:15.710 に答える