Ajax調用不綁定所有模型屬性

Question

我打算使用jquery根據下拉列表中的選擇創建表。當我在下拉列表中選擇任何選項時，將在屏幕上生成空白表。但是當我插入在空白表中的值，然後按提交然後在行動我有模型，但該模型只包含我從Ajax中添加的表中的屬性..但它忽略了我首先選擇的dropdownlist的值..如果我刪除了該Ajax成功代碼然後它給模型與正確的價值觀，但我不會得到在阿賈克斯成功創建表的價值....

這裏是我的Ajax代碼：

$("#Award").change(function() { 
     var selectdAward = $("#Award").val(); 
     $('#criteriaTable').empty(); 
     var ServiceUrl = "/Nomination/CriteriasForAward?awardId=" + selectdAward; 

     $.ajax({ 
      type: 'post', 
      url: ServiceUrl, 
      contentType: "application/json; charset=utf-8", 
      error: function (xhr, err) { 
       alert(xhr.responseText) 
      }, 
      success: function (data) { 
       $('#criteriaTable').append('<tr><th>Id</th><th>Criteria-Description</th><th>Comment</th></tr>'); 

       for (var key in data) { 
        $('#criteriaTable tr:last') 
         .after('<tr><td><label>' + data[key].Id + '</label></td>' 
         + '<td><label>' + data[key].Title + '</label></td>' 
         + '<td><input type="text" name=Model.Comments[' + key + '].Comment></td>' 
         + '<td><input type="hidden" name=Model.Comments[' + key + '].Id value=' + data[key].Id + '></td></tr>'); 
       } 
      } 
     }); 
    }); 

這是我的ViewModel：

public class NominationViewModel 
    { 
     public int AwardId { get; set; } 
     public int ManagerId { get; set; } 
     public int UserId { get; set; } 
     public int ProjectID { get; set; } 
     public string SelectResourcesBy { get; set; } //from project or from department 
     public IList<CriteriaCommentViewModel> Comments { get; set; } 

     public NominationViewModel() 
     { 
      Comments = new List<CriteriaCommentViewModel>(); 
     } 

    } 

這是導航屬性類視圖模型：

public class CriteriaCommentViewModel 
    { 
     public int Id { get; set; } 
     public string Comment { get; set; } 
    } 

這是視圖：

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.Label("Nomination Category", htmlAttributes: new { @class = "control-label col-md-4" }) 

      <div class="col-md-8"> 
       @Html.DropDownListFor(model => model.AwardId, @ViewBag.Awards as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "Award" }) 
       @Html.ValidationMessageFor(model => model.AwardId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.Label("Resource From", htmlAttributes: new { @class = "control-label col-md-4" }) 
      <div class="col-md-8"> 
       <label> @Html.RadioButtonFor(model => model.SelectResourcesBy, "Project", new { htmlAttributes = new { @class = "form-control" } })Project</label> 
       <label> @Html.RadioButtonFor(model => model.SelectResourcesBy, "Department", new { htmlAttributes = new { @class = "form-control" } })Department</label> 
       @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.Label("Project", htmlAttributes: new { @class = "control-label col-md-4" }) 
      <div class="col-md-8"> 
       @Html.DropDownListFor(model => model.ProjectID, @ViewBag.ProjectsUnderCurrentUser as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "SelectedProject" }) 
       @Html.ValidationMessageFor(model => model.ManagerId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.Label("Resource Name", htmlAttributes: new { @class = "control-label col-md-4" }) 
      <div class="col-md-8"> 
       @Html.DropDownListFor(model => model.UserId, @ViewBag.Resources as SelectList, "Select", new { htmlAttributes = new { @class = "form-control" }, id = "Resources" }) 
       @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <br /> 
     <br /> 
     <hr /> 

     <div class="form-group"> 
      @Html.Label("Criteria", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <br /> 
      <div class="form-group"> 
       <div id="Criterias"> 
        <table border="1" id="criteriaTable"></table> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="button" value="Save Draft" class="btn btn-default" /> 
       <input type="submit" value="Submit" class="btn btn-default" /> 
       <input type="button" value="Cancel" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

而且這是在其IM控制器動作發帖值：

[HttpPost] 
     public ActionResult AddNomination(NominationViewModel model) 
     { 
      return RedirectToAction("Dashboard", "Dashboard"); 
     } 

請建議提前解決這個problem..Thanks方式

Answer 1

您的視圖模型不包含名爲Model，所以你需要修改的代碼生成的HTML表格來

for (var key in data) { 
    $('#criteriaTable tr:last') 
     .after('<tr><td><label>' + data[key].Id + '</label></td>' 
     + '<td><label>' + data[key].Title + '</label></td>' 
     + '<td><input type="text" name=Comments[' + key + '].Comment></td>' 
     + '<td><input type="hidden" name=Comments[' + key + '].Id value=' + data[key].Id + '></td></tr>'); 
} 

即財產從輸入的name屬性中刪除"Model."前綴。