列表填充了传递给控制器​​操作方法但对象属性为空的对象

Question

我在MVC中有下表。

    <table id="tbl" class="table table-bordered table-striped table-hover">
    <thead>
       <tr>
           <th>S.No</th>
           <th>Category</th>
           <th>ItemDescription</th>
           <th>Quantity </th>
           <th>UnitCost</th>
           <th>NoOfDays</th>
           <th>Amount</th>
           <th>Action</th>
        </tr>
    </thead>
    <tbody>
    @{
        var rows = Model.BudgetDetails.Count;
        for (int i = 0; i < rows; i++)
        {
          <tr>
             <td class="hidden">
               @Html.HiddenFor(a => a.BudgetDetails[i].EventBudgetID, new { @class="budgetID" })
               @Html.HiddenFor(a => a.BudgetDetails[i].BudgetCategory_ID, new { @class = "budgetCategoryID" })
            </td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].RowNo)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].BudgetCategory)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].ItemDescription)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].Quantity)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].UnitCost)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].NoOfDays)</td>
            <td>@Html.DisplayFor(a => a.BudgetDetails[i].ApprovedAmount)</td>
            <td><span class="btn btn-warning"><i class='fa fa-pencil'></i></span>
                <span class="btn btn-danger"><i class='fa fa-remove'></i></span>
            </td>
        </tr>
        }
       }
     </tbody>
    <tfoot>
       <tr>
          <td><input type="hidden" id="txtEventBudgetID" value="0" /></td>
          <td>@Html.DropDownList("Category", new SelectList(EventManagement.DAL.SetupDAL.GetActiveBudgetCategories(), "BudgetCategoryID", "BudgetCategory"), "-Select Category-", new { @class = "form-control select2" })
        </td>
        <td><input type="text" id="txtItem" class="txtGrid3" placeholder="Item Description" /> </td>
        <td><input type="text" id="txtQuantity" class="txtGrid2" placeholder="Quantity" /></td>
        <td><input type="text" id="txtUnitCost" class="txtGrid2" placeholder="Unit Cost" /></td>
        <td><input type="text" id="txtNoOfDays" class="txtGrid2" placeholder="Days" /></td>
       <td></td>
       <td><span class="btn btn-info"><i class='fa fa-plus'></i></span></td>
   </tr>
 </tfoot>
</table>

并使用下面的JQuery代码我在运行时添加新行到表。

$('span.btn-info').click(function () {
       var $tbl = $('#tbl tbody');
       var totalRow = $tbl.find('tr').length;
       var categoryID = $('#Category :selected').val(),
           category = $('#Category :selected').text(),
           item = $('#txtItem').val(),
           qty = $('#txtQuantity').val(),
           cost = $('#txtUnitCost').val(),
           days = $('#txtNoOfDays').val();
       if (categoryID == '') {
          alert('Category Required!!!');
          return;
       }
       if (item == '') {
          alert('Item Description Required!!!');
          return;
      }
      if (qty == '') {
         alert('Quantity Required!!!');
         return;
      }
      if (cost == '') {
          alert('Unit Cost Required!!!');
           return;
      }
      if (days == '') {
          alert('Number of Days Required!!!');
          return;
      }
      $tbl.find('tr').each(function (key, data) {
             var $this = $(this);
             $this.find('td:eq(0) input.budgetID').attr('name', 'BudgetDetails[' + key + '].EventBudgetID');
             $this.find('td:eq(0) input.budgetCategoryID').attr('name', 'BudgetDetails[' + key + '].BudgetCategory_ID');
             $this.find('td:eq(1)').text((key + 1));
             $this.find('td:eq(3) input').attr('name', 'BudgetDetails[' + key + '].ItemDescription');
             $this.find('td:eq(4) input').attr('name', 'BudgetDetails[' + key + '].Quantity');
             $this.find('td:eq(5) input').attr('name', 'BudgetDetails[' + key + '].UnitCost');
             $this.find('td:eq(6) input').attr('name', 'BudgetDetails[' + key + '].NoOfDays');
      });

      var html = '<tr>';
      html += '<td class="hidden"><input class="budgetID" name="BudgetDetails[' + totalRow + '].EventBudgetID" val="' + $('#txtEventBudgetID').val() + '"/>';
      html += '<input  class="budgetCategoryID" name="BudgetDetails[' + totalRow + '].BudgetCategory_ID" val="' + categoryID + '"/></td>';
      html += '<td>' + (totalRow + 1) + '</td>';
      html += '<td>' + category + '</td>';
      html += '<td><input type="hidden" name="BudgetDetails[' + totalRow + '].ItemDescription" val="' + item + '"/>' + item + '</td>';
      html += '<td><input type="hidden" name="BudgetDetails[' + totalRow + '].Quantity" val="' + qty + '"/>' + qty + '</td>';
      html += '<td><input type="hidden" name="BudgetDetails[' + totalRow + '].UnitCost" val="' + cost + '"/>' + cost + '</td>';
      html += '<td><input type="hidden" name="BudgetDetails[' + totalRow + '].NoOfDays" val="' + days + '"/>' + days + '</td>';
      html += '<td>' + (qty * cost * days) + '</td>';
      html += '<td><span class="btn btn-warning"><i class="fa fa-pencil"></i></span>';
      html += '<span class="btn btn-danger"><i class="fa fa-remove"></i></span></td>';
      html += '</tr>';
      $tbl.append(html);

    }

成功添加了行，下面是我的ActionMethod代码。

[HttpPost]
public ActionResult EventDetails(ViewModels.ClsEventDetailsViewModel d)
{
   try
   {
      d.User_ID = LoginUserID;
      if (EventCalenderDAL.SaveBudgetDetails(d))
      {
          ShowMessage(MessageBox.Success, OperationType.Saved, "Saved successfully.");
      }
      else
      {
      ShowMessage(MessageBox.Error, OperationType.Error, "Failed to Save");
      }

      return View();
  }
  catch (Exception ex)
  {
      ShowMessage(MessageBox.Error, OperationType.Error, ex.Message);
      return View();
  }
}

问题：通过在控制器中添加断点，我发现BudgetDetails列表包含两个对象（我在运行时添加了两行），但两个对象的属性都是空的。实际数据未传递给Controller。以下是调试的快照。

这段代码出了什么问题。