CODEWITHSUNDEEP
jqueryasp.net-mvccontrollerdatatableshttp-post
SRK
SRK

Reputation: 70

Post HTML Table data to Controller as a Model List

I've a table as bellow

<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>

And I'm adding new Row using jQuery and DataTable API as bellow:

$(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();
 });

And I'm getting posted data in my Controller as

    [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();
    }

I'm not sure about, Is it a right way to get the data from View to Controller as collection.

Is there any better way available where I can get List instead of FormCollection?

Upvotes: 1

Views: 1995

Answers (1)

M.Azad
M.Azad

Reputation: 3763

I think if you send your new items as json it is a better approach.you can make json array from new items in client side and send it to action

 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"
}
]

And in your controller get List of your model 

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

Upvotes: 1

Related Questions