如何發佈包含集合的模型？

Question

有一個包含空列表的模型。我想將項目添加到列表中並一次性發布。

主要型號

[Required] 
public string WillAttend { get; set; } 

/// <summary> 
/// Guests to accompany the RSVPer 
/// </summary> 
public List<Guest> Guests { get; set; } 

遊客型號

[Required] 
[Display(Name = "First Name")] 
public string FirstName { get; set; } 

[Required] 
[Display(Name = "Last Name")] 
public string LastName { get; set; } 

形式內部：

<div class="form-group"> 
    <div> 
     Yes @Html.RadioButtonFor(m => m.WillAttend, "yes", new { @class = "" }) 
     No @Html.RadioButtonFor(m => m.WillAttend, "no", new { @class = "" }) 
    </div> 
</div> 
<div class="form-group"> 
    <div> 
     <span>Will you bringing any children or guests?</span> 
     <input id="InputAddGuest" type="button" class="form-control" value="Add Guest or Child" />        
     <ul id="ListGuest"> 

     </ul> 
    </div> 
</div> 

<div class="form-group"> 
    <div> 
     <button type="submit" class="btn btn-block">Finish</button> 
    </div> 
</div> 

有一個網頁上的表單提交以上的主力車型，和我m使用jquery生成html：

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#InputAddGuest').click(function() { 
      $('#ListGuest').append('<li>HELLO WORLD</li>'); 
     }); 
    }); 

</script> 

但是這裏發生了什麼，所以當我發佈我的模型包含實際的客人？

Answer 1

您基本上需要使用與視圖模型屬性層次結構匹配的輸入字段名稱來構建html標記。

由於您的主視圖模式有一個客人財產是一個集合，你輸入字段的名稱應該是這樣Guests[0].FirstNam E，Guests[0].LastName，Guests[1].FirstName等

這應該工作

$(document).ready(function() { 
    $('#InputAddGuest').click(function() { 
     var index = $(".guestRow").length; 
     var row = "<div class='guestRow'>"; 
     row += "<input type='text' name='Guests[" + index + "].FirstName' />"; 
     row += "<input type='text' name='Guests[" + index + "].LastName' />"; 
     row += "</div>"; 
     $('#ListGuest').append(row); 
    }); 
}); 

假設你HttpPost動作方法參數爲MainModel型號

[HttpPost] 
public ActionResult Register(MainModel model) 
{ 
    //check model.WillAttend 
    // iterate through model.Guests 
    // to do : return something 
} 

Answer 2

我有類似的情況，在功能。

我要做的就是：我做的控制器會話，所以當

$('#InputAddGuest').click(function() { 

     }); 

我調用$阿賈克斯這樣的：

var valDdlTeamProject = $('#TeamProjectCollection').val(); 
     var valDdlProject = $('#Project').val(); 
$.ajax({ 
       type: 'POST', 
       dataType: 'json', 
       url: '@Url.Action("AddTfsFeature", "Request")', 
       data: { 
        requestNo: '@Model.RequestNo', 
        teamProjectCollection: valDdlTeamProject, 
        project: valDdlProject 
       }, 
       success: function (response) { 
        if (response.Result == 'Success') { 
         var additionalHtml = ""; 
         var additionalHtml = '<a class="label label-info" href="#">'; 
         additionalHtml += response.TempObject.TeamProjectCollection + ' - ' + response.TempObject.Project; 
         additionalHtml += '<span class="glyphicon glyphicon-remove remove-feature" data-ID="' + response.TempObject.ID + '" onclick="removeFeature(\'' + response.TempObject.ID + '\', this)"></span>'; 
         additionalHtml += '</a>'; 
         $('.body-add-feature').append(additionalHtml); 
         clearTfsFeatureForm(); 
         iCounterFeature = response.TempObjectCount; 
         if (response.TempObjectCount > 0) 
          $('#DialogCreateFeature').modal('hide'); 
        } 
        if (response.Result == 'Failed') { 
         alert(response.Message); 
        } 
       }, 
       error: function (response) { } 
      }) 

在後面的代碼：

[HttpPost] 
     public JsonResult AddTfsFeature(string requestNo, string teamProjectCollection, string project) 
     { 
      ResultMessageViewModel result = new ResultMessageViewModel 
      { 
       Result = "Failed", 
       Message = "No data" 
      }; 

      TfsFeature feature = new TfsFeature 
      { 
       ID = sessTempIndexTfsFeature, 
       RequestNo = requestNo, 
       TeamProjectCollection = teamProjectCollection, 
       Project = project, 
       CreatedBy = UserID 
      }; 
      for (int i = 0; i < sessListTfsFeature.Count; i++) 
      { 
       if (sessListTfsFeature.ElementAt(i).TeamProjectCollection == teamProjectCollection && 
        sessListTfsFeature.ElementAt(i).Project == project) 
       { 
        result.Result = "Failed"; 
        result.Message = "Existing feature data has already exist."; 
        return Json(result, JsonRequestBehavior.AllowGet); 
       } 
      } 
      sessListTfsFeature.Add(feature); 

     result.Result = "Success"; 
     result.Message = "Add Success"; 
     result.TempObject = feature; 
     result.TempObjectCount = sessListTfsFeature.Count; 
     return Json(result, JsonRequestBehavior.AllowGet); 

sessListTfsFeature是List<TfsFeature>

如果有按鈕刪除Guest，則需要新的ajax和新的控制器來在會話中刪除對象Guest。