How to retrieve HTML table data from view to controller.

Question

_{Thursday, May 11, 2017 8:10 AM}

Dear All,

  I need to retrieve HTML table data with values from view to controller. below it's my code, that retrieves only two rows. Please assist me on this.

<div class='table-responsives'>
        <table id="table-matrix" class='table table-striped table-bordered table-hover'>
            <thead>
                <tr>
                    <th colpan='1'>Employee Name</th>
                    <th colspan='1'>Manager</th>
                    <th colspan='1'>Team Leader</th>
                    <th colspan='1'>Team Member</th>
                    <th colspan='1'>CTO</th>                    
                </tr>
            </thead>
            <tbody>                
                @if (Model.selUsrs != null)
                {
                    
                    for (int i = 0; i < Model.selUsrs.Count(); i++)
                    {
                    <tr>
                        <td style="display:none;">@Model.selUsrs[i].EmpNo</td>
                        <td> @Model.selUsrs[i].EmpName</td>
                        <!-- DG-->
                        <td class='text-center'><label class='switch'>@Html.CheckBoxFor(m => m.selUsrs[i].Manager)<span></span></label></td>                       
                        <!-- Team Leader -->
                        <td class='text-center'><label class='switch'>@Html.CheckBoxFor(m => m.selUsrs[i].TeamLead)<span></span></label></td>
                        <!-- Team Member -->
                        <td class='text-center'><label class='switch'>@Html.CheckBoxFor(m => m.selUsrs[i].TeamMember)<span></span></label></td>                       
                    </tr>
                    }
                }
                
            </tbody>
        </table>        

 JQUERY:

<script>
       $(document).ready(function () {
           $('a[href="#finish"]').click(function (e) {
               // prevent the default event behaviour
               e.preventDefault();
 
               var TableData = new Array();
               $('#table-matrix tr').each(function (row, tr) {
                   TableData = TableData + $(tr).find('td:eq(0)').text() + "-" + $(tr).find('td:eq(1)').text() + ",";                    
               });
               var postData = { values: TableData };                
               
               $.ajax({
                   url: "/Pages/Save",
                   type : "POST",
                   data : postData,
                   //dataType: "json",
                   //traditional: true,
                   //contentType: "application/json; charset=utf-8",
                   success: function (data) {
 
                       // perform your save call here
 
                       if (data.status == "Success") {
                           alert("Done");
                       } else {
                           alert("Error occurs on the Database level!");
                       }
                   },
                   error: function () {
                       //alert("An error has occured!!!");                       
                   }
               });
 
           });
       });
   </script>     

All replies (2)

_{Thursday, May 11, 2017 10:31 AM ✅Answered}

Hi,

we can assume that we have a class named Student; I want to provide a list of it and send to view in controller;

in .cshtml code: 

<input type="button" value="get rows and sent them to server" id="send-data" class="btn btn-primary" />
<br />
<div class="row">
    <div class="col-md-12">
        <table class="table table-condensed table-hover table-bordered" id="student-table">
            <thead>
                <tr>
                    <th>#Id</th>
                    <th>Name</th>
                    <th>Family</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @item.Id.ToString()
                        </td>
                        <td>
                            @item.Name
                        </td>
                        <td>
                            @item.Family
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

and jquery section is : 

<script type="text/javascript" lang="en">
    $(document).ready(function () {
        $('#send-data').click(function () {
            var rows = [];
            $('#student-table tbody tr').each(function () {
                var id = $(this).find('td').eq(0).text().trim();
                var name = $(this).find('td').eq(1).text().trim();
                var family = $(this).find('td').eq(2).text().trim();
                var row = id + "-" + name + "-" + family;
                rows.push(row);
            });


            $.post('@Url.Action("Proccess","Home")', { rows: rows }, function (data) {
                console.log(data);
            });

        });
    });
</script>

then in the Home controller :

[HttpPost]
public ActionResult Proccess(List<string> rows)
 {

   rows.ForEach(x =>
    {
                var row = x.Split('-');
                var id = row[0];
                var name = row[1];
                var family = row[2];
    });

   return Json(true);
 }

done;

I hope that it help you;

---

_{Thursday, May 11, 2017 12:32 PM}

Hi,

I fixed this issue. Thanks.