Send table Data From cshtml To Controller in 1 Parameter Using jQuery

Here we known about how to send a table data in a single parameter from cshtml page to controller along with the other parameter which have present in the same page by using jQuery in MVC.

Introduction

• Here we know about how to send an HTML table data in a single parameter along with all other data of the form with the respective parameter from cshtml page to controller by using jQuery in MVC.
• First we create an HTML table which is present in our page.
• Second we collect the table data by using ( | & ^ ) separator.
• Third create an HTML table as in cshmtl page as below.

<form>
  <label>Class Name:</label>
  <input type="text" id="txtclassName" class="txtclassName" >
  <label>Section Name :</label>
  <input type="text" id="txtSection"  class="txtSection" >
  <input type="hidden"   class="hdnstudentList_List" >
<table id="tblstudentDetails">
           <thead>
                 <tr>
                    <th width="30px">Sl(#)</th>
                    <th>StudentName</th>
                    <th>Highest Mark Quoted By</th>
                    <th>Action</th>
                </tr>
           </thead>
           <tbody>
                <tr>
                   <td>1</td>
                   <td>Prakash Kumar Sahoo</td>
                   <td><input type="radio" name="btnRadioHighMark"></td>
                 </tr>
                <tr>
                    <td>2</td>
                    <td>Saroj Barisal</td>
                    <td><input type="radio" name="btnRadioHighMark"></td>
                </tr>
         </tbody>
</table>
  <input type="button" value="Submit" class="btnSubmit">
</form>

Table Data Set Format

• After creating the HTML code, we 1st set the table data by using JQuery as below.
• We collect all data in the table by use of | & ^ separator.
• That means first Row data is Prakash Kumar Sahoo|0
• And the second row data is Saroj Barisal|1
• Then the colection looks like as Prakash Kumar Sahoo|0 ^  Saroj Barisal|1 ^
• First set all the data in below format.

var tbody = $("#tblstudentDetails tbody");
if (tbody.children().length != 0) {
        var studentData = '';
    $('#tblstudentDetails tbody tr').each(function (index) {
        var StudentName = $(this).find('td:eq(1)').text();
        var RadioId = $(this).find('input[type=radio][name=btnRadioHighMark]').is(':checked');
        studentData += StudentName + '|' + RadioId + '^';
        });
    if (studentData != '') {
        $('#hdnstudentList_List').val(studentData);
    }
}

Collect All Data & Send To Controller

• After set the data in | & ^ separator, then collect all data along with the other parameters by using jQuery & Ajax as below & send to the controller.

$('.btnSubmit').click(function (e) {
    var ClassName= $('.txtclassName).val();
    var Section = $('.txtSection').val();

    #region   Student Table Data Collect Format Start
    var tbody = $("#tblstudentDetails tbody");
    if (tbody.children().length != 0) {
        var studentData = '';
    $('#tblstudentDetails tbody tr').each(function (index) {
        var StudentName = $(this).find('td:eq(1)').text();
        var RadioId = $(this).find('input[type=radio[name=btnRadioHighMark]').is(':checked');
        studentData += StudentName + '|' + RadioId + '^';
        });
    if (studentData != '') {
        $('#hdnstudentList_List').val(studentData);
       }
    }
   #endregion Student Table Data Collect Format End

    if (ClassName!= '' && Section != '') {
        let postobj = {
            ClassName      : ClassName,
            Sectionname    : Section ,
            StudentDetails : hdnstudentList_List
        }
        $.ajax({
            type: "POST",
            url:  "/Admin/SaveStudentData",
            data: JSON.stringify(postobj),
            contentType: "application/json",
            datatype: "json",
            traditional: true,
            success: function (data) {
                if (data == '1') {    
                    $('.successMsg').text('Student Data Save Successfully');
                    $('#SuccessModal').modal('show');
                }
            }
        });
    }
    else {
        e.preventDefault();
    }
     
});

Conclusion

By default, we will send the table data in old format as a cretaing a loop. Here I create a new method for optimizing your code along with the time of execution of the code by using a single parameter by using | &  ^ separator for separation of each row data as ^ and column data separated by |.