2013-02-05 44 views
1

在我的在線註冊應用程序中,我創建了兩個模型,如下所示。 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方法。

我該怎麼做才能使動態生成的複選框的值相關?

+0

無論何時發生回發,您都將獲得一組全新的數據。它會擦除並呈現新的請求。另外你可以在Session或Hidden控件中存儲值,或者將它發送到斷開並保存在ViewBag或ViewData中。 –

+0

@Ravi:我得到所有其他數據,只是複選框值不可用。 –

回答

1

我應該怎麼做才能動態生成複選框的值?

閱讀following article並使用非順序索引來表示動態生成的輸入字段的名稱。在這篇文章中,史蒂文桑德森說明了一個非常有用的幫手Html.BeginCollectionItem,它可以讓你實現這一點。

+0

爲此,我必須在很多地方更改代碼?無法調整當前的解決方案? –

+0

不,您不能這樣做,因爲您違反了默認模型綁定器期望綁定到集合的標準命名約定。修復你的代碼而不是*調整它會是一件好事。 –

相關問題