Rows are not posting back in MVC

Question

In the project there are two models as below

public partial class provider_preapproval
{
public string encounter_type { get; set; }
public DateTime? e_start_date { get; set; }
public DateTime? e_end_date { get; set; }
public string status { get; set; }
[InverseProperty("preapproval")]
public virtual IList<provider_service_dtls> provider_service_dtls { get; set; }
}

 public partial class provider_service_dtls
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public long service_id { get; set; }
        public long preapproval_id { get; set; }
        public string activity_code_type { get; set; }
        public string activity_type { get; set; }
        public string activity_type_name { get; set; }
        public string activity_code { get; set; }
        public string activity_name { get; set; }
        public string internal_activity_code { get; set; }
        public string internal_activity_name { get; set; }
        public DateTime? activity_start_date { get; set; }
        public decimal? net_amt { get; set; }
        public decimal? unit_amt { get; set; }
        public decimal? quantity { get; set; }
        public string clinician { get; set; }
        public string clinician_code { get; set; }
        [ForeignKey("preapproval_id"), InverseProperty("provider_service_dtls")]
        public virtual provider_preapproval preapproval { get; set; }

    }
}

The view cshtml

  @using (Html.BeginForm("Preapprove", "Preapproval", FormMethod.Post, new { name = "form1", id = "form1", enctype = "multipart/form-data", @class = "form-horizontal" }))
{
@Html.AntiForgeryToken()
 @Html.ValidationSummary(false, "", new { @class = "field-validation-error text-danger" })
 //template to generate dynamic rows  
<table id="Newservice" style="display:none">
 <tr>
<td><select  style="width:100px" class="code_type" name="provider_service_dtls[#].activity_code_type" value></select> </td>
<td><select  style="width:100px" class="act_type" name="provider_service_dtls[#].activity_type" value></select> </td>
<td><input  class="act_name" style="width:150px" type="text" name="provider_service_dtls[#].activity_name"  value /></td>
<td><input  class="clini" style="width:150px" type="text" name="provider_service_dtls[#].clinician" value /></td>
<td><input  class="" style="width:40px" type="text" name="provider_service_dtls[#].unit_amt" value /></td>
<td><input  class="" style="width:25px" type="text" name="provider_service_dtls[#].quantity" value="1"/></td>
<td><input  class="" style="width:40px" type="text" name="provider_service_dtls[#].net_amt" readonly value="10" />
<input type="hidden" name="provider_service_dtls.Index" value="%" />
</td>
<td><input id="delete" class="delete" value="X" type="button"></td>
</tr>
</table>
//template ends here
<table id="service" class="table table-striped table-hover table-bordered">
 <tbody>
@if (Model != null)
{
for (int i = 0; i < Model.provider_service_dtls.Count; i++)
{
<tr>
 <td> @Html.DropDownListFor(m => m.provider_service_dtls[i].activity_code_type, (SelectList)@ViewBag.activity_code_type, "--- Select Activity Code Type ---", new { @class = "m-wrap" })</td>
 <td> @Html.DropDownListFor(m => m.provider_service_dtls[i].activity_type, (SelectList)@ViewBag.activity_type, "--- Select Activity Type ---", new { @class = "m-wrap" })</td>
 <td>@Html.TextBoxFor(m => m.provider_service_dtls[i].activity_name)</td>                                                
<td>@Html.TextBoxFor(m => m.provider_service_dtls[i].clinician)</td>
 <td>@Html.TextBoxFor(m => m.provider_service_dtls[i].unit_amt)</td>
 <td>@Html.TextBoxFor(m => m.provider_service_dtls[i].quantity)</td>
 <td>@Html.TextBoxFor(m => m.provider_service_dtls[i].net_amt)
<input type="hidden" name="provider_service_dtls.Index" value="@i" />
 </td>
<td><input id="delete" class="delete" value="X" type="button"></td>
 </tr>
 }
 }
 </tbody>
 <tbody>
//row for showing total of quantity and net_amt
<tr id="totals">
<td></td>
<td></td>
 <td></td>
 <td></td>
<td>Total</td>
<td style="text-align:right">0</td>
 <td style="text-align:right">0</td>
<td></td>
 </tr>
 </tbody>
</table>
 }

after filling the form and click submit this is submitting successfully and value to provider_service_dtls is posting back as shown below

Now i added a jquery method to find out total and net_amt by multiplying quantity and unity amount

Jquery

var body = $('#service').children('tbody').first();
var totals = $('#totals');
 body.on('change', 'input[type="text"]', function () {
var cells = $(this).closest('tr').children('td');
var value1 = cells.eq(4).find('input').val();
var value2 = cells.eq(5).find('input').val();
var value3 = new Number(value1) * new Number(value2)
cells.eq(6).find('input').val(value3.toFixed(2));
var total = 0;
var i = 0;
// get the column
var columnIndex = $(this).closest('td').index();
 var rows = body.find('tr');
 $.each(rows, function () {
var amount = $(this).children('td').eq(columnIndex).children('input[type="text"]').val();
total += new Number(amount);
     });
totals.children('td').eq(columnIndex).text(total);
    });

After adding this Jquery the total and net_amt is calculating successfully when a change in service table columns are happening but the provider_service_dtls are posting back with null value as shown below

Now i found out the issue the line

cells.eq(6).find('input').val(value3.toFixed(2)); 

is making this..if i comment this line and submit the provider_service_dtls will have values while posting back

I tried with

cells.eq(6).text(new Number(value1) * new Number(value2));

here also value is not posting back

I am not understanding why it is not posting back value for provider_service_dtls to controller when this line is there in the jquery.

Please help to sort this out

Answer 1

I found out the issue

cells.eq(6).find('input').val(value3.toFixed(2)); 

This line in the script will change the value of type 'input' in cells (6) as value of value3.

Inside the cell 6 there are two input type 1.input type text for net_amt and 2. input type hidden i for the index.

So the above jquerys tatement will change both input type value to the value3. So the index will mismatch with the index of dynamically created rows.Hence while posting it cannot identify the rows to post back with index values.

so I changed the script to

cells.eq(6).find('input[type="text"]').val(value3.toFixed(2));

so this will only change the value of input type text for net_amt. The value of input type hidden i will remain same.

thanks @jasen for your comment. The inspect element help to find this issue.