Question

我有一张桌子如下：

<div class="box-body">
    <div class="row">
       <div class="col-lg-12 text-right btn-group">
           <button type="button" class="btn btn-primary" id="AddNewRow">
               <span class="glyphicon glyphicon-plus"></span> Add
            </button>
            <button type="button" class="btn btn-primary" id="DeleteRow">
                <span class="glyphicon glyphicon-trash"></span> Remove
            </button>
       </div>
    </div>
    <div class="clear-fix">
        &nbsp;
    </div>
    @using (Html.BeginForm())
    {
         <input type="hidden" name="totalRowsCreated" id="totalRowsCreated" />
         <table id="datatableResourceList" class="table table-striped table-bordered display select" cellspacing="0" width="100%">
              <thead>
              <tr>
                  <th><input type="checkbox" name="checkAll" id="datatableResourceList-select-all" /></th>
                  <th>Project</th>
                  <th>Resource</th>
                  <th>Start Date</th>
                  <th>End Date</th>
              </tr>
           </thead>
           <tbody></tbody>
       </table>
    <div>
   <button type="submit" class="btn btn-success">
        <span class="glyphicon glyphicon-floppy-saved"></span> Allocate Resources
   </button>
   </div>
   }
</div>

我正在使用 jQuery 和 DataTable API 添加新行，如下所示：

$(document).ready(function () {
        var table = $('#datatableResourceList').DataTable({
            columnDefs: [{ orderable: false, targets: 0 }]
        });
        var counter = 0;


        $('#AddNewRow').on('click', function () {
            counter++;
            table.row.add([
                '<input type="checkbox" name="check[' + counter + ']" id="check_' + counter + '"/>',
                '<input type="text" name="ProjectId[' + counter + ']" id="Project_' + counter + '"/>',
                '<input type="text" name="EmployeeId[' + counter + ']" id="Employee_' + counter + '"/>',
                '<input type="text" name="StartDate[' + counter + ']" id="inputEndDate_' + counter + '"/>',
                '<input type="text" name="EndDate[' + counter + ']" id="inputStartDate_' + counter + '"/>',
            ]).draw(false);
            $('input[id^="inputEndDate"], input[id^="inputStartDate"]').datepicker();
            $('#totalRowsCreated').val(counter);
        });

        // Automatically add a first row of data
        $('#AddNewRow').click();
 });

我将控制器中的数据发布为

    [HttpPost]
    public ActionResult MultipleResourceAllocation(FormCollection collection)
    {
        List<MultipleResourceAllocationViewModel> allocationList = new List<MultipleResourceAllocationViewModel>();

        int totalRows = Convert.ToInt16(collection["totalRowsCreated"]);
        for (int i = 1; i <= totalRows; i++)
        {
            allocationList.Add(new MultipleResourceAllocationViewModel
            {
                ProjectId = Convert.ToInt64(string.Format(collection["ProjectId[{0}]"],i)),
                EmployeeId = Convert.ToInt64(string.Format(collection["EmployeeId[{0}]"], i)),
                StartDate = Convert.ToDateTime(string.Format(collection["StartDate[{0}]"], i)),
                EndDate = Convert.ToDateTime(string.Format(collection["EndDate[{0}]"], i))
            });
        }
        return View();
    }

我不确定，这是将数据从查看转换为控制器作为集合的正确方法。

有没有更好的方法可以获得列表而不是 FormCollection ？

Answer 1

我认为如果你把你的新项目作为json发送它是一个更好的方法。你可以从客户端的新项目制作json数组并将其发送到行动

 var projcts=   [{
  "ProjectId":1,
  "EmployeeId": 2,
  "StartDate":"2016-04-05",
  "EndDate":  "2016-04-08"
},
{
  "ProjectId":3,
  "EmployeeId": 4,
  "StartDate":"2015-07-04",
  "EndDate":  "2015-08-09"
}
]

在您的控制器中获取模型列表

 [HttpPost]
public ActionResult MultipleResourceAllocation(List<Project> model)

将HTML表格数据作为模型列表发布到Controller

1 个答案: