Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult getvalues()
{
var result = Products().ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult SaveOrders(List<Order> ordersDetails)
{
return View();
}
private static List<Tax> Products()
{
List<Tax> products = new List<Tax>();
products.Add(new Tax { taxId = 1, TaxName = "A", IsChecked = true, TaxPercentage = 12 });
products.Add(new Tax { taxId = 2, TaxName = "B", IsChecked = false, TaxPercentage = 10 });
return products;
}
public class Order
{
public int rate { get; set; }
public List<Tax> taxes { get; set; }
}
public class Task
{
public int taxId { get; set; }
public string taxName { get; set; }
public bool isPercentagec { get; set; }
public decimal taxValue { get; set; }
public decimal total { get; set; }
}
}
View
<div class="container">
<div class="details">
<table class="table table-responsive">
<tr>
<td>Rate</td>
<td>Orders</td>
<td>TotalTaxTotal</td>
<td> </td>
</tr>
<tr class="mycontainer" id="mainrow">
<td><input type="text" id="rate" class="rate form-control" /></td>
<td><button type="button" class="btn btn-info btn-lg" id="btnModal">Open Modal</button></td>
<td><input type="text" id="total" class="total form-control" /></td>
<td><input type="button" id="add" value="add" class="btn btn-success" /></td>
</tr>
</table>
<div id="orderItems">
<table class="table table-responsive" id="orderdetailsItems"></table>
</div>
<input type="button" id="btnSave" value="Save" class="btn btn-success" />
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Modal Header</h4>
</div>
<div class="modal-body">
<table id="tblDetails" class="table simpleHomeSummary-grid">
<thead>
<tr>
<th>TaxId</th>
<th>TaxName</th>
<th>IsPercentage</th>
<th>TaxValue</th>
<th>TaxTotal</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
TotalTax Total:<b><span id="lblGrandTotal"></span></b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
LoadData();
//Add button click event
$('#add').click(function () {
//validation and add order items
var isAllValid = true;
if (isAllValid) {
var $newRow = $('#mainrow').clone().removeAttr('id');
//remove id attribute from new clone row
$('#total,#rate,#add', $newRow).removeAttr('id');
$('span.error', $newRow).remove();
//append clone row
$('#orderdetailsItems').append($newRow);
$('#rate,#total').val('');
$('#orderItemError').empty();
}
});
$('#btnSave').click(function () {
var orders = [];
$('#orderdetailsItems tbody tr').each(function () {
var order = {};
order.rate = $(this).find('td').find('.rate').val();
var taxes = [];
$('#tblDetails tbody tr').each(function (i, item) {
var tax = {};
tax.taxId = $(this).find('td').eq(0).html();
tax.taxName = $(this).find('td').eq(1).html();
tax.isPercentage = $(this).find('td').eq(2).find('input[type=checkbox]').is(':checked');
tax.taxValue = $(this).find('td').eq(3).html();
tax.total = parseFloat(order.rate) * (parseFloat(tax.taxValue) / 100);
taxes.push(tax);
});
order.taxes = taxes;
orders.push(order);
});
$.ajax({
type: "POST",
url: "/Home/SaveOrders",
data: JSON.stringify(orders),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) { },
error: function (response) { }
});
});
$('body').on('click', '[id*=btnModal]', function () {
var rate = $(this).closest('tr').find('.rate').val();
if (rate == '' || isNaN(rate) || rate == undefined) {
rate = 0;
}
var grandTotal = 0;
$('#tblDetails tbody tr').each(function (i, item) {
var total = parseFloat(rate) * (parseFloat($(this).find('td').eq(3).html()) / 100);
$(this).find('td').eq(4).html(total.toFixed(2));
if ($(this).find('input[type=checkbox]').is(':checked')) {
grandTotal += parseFloat(total.toFixed(2));
}
});
$('[id*=lblGrandTotal]').html(grandTotal);
$('[id*=myModal]').modal('show');
});
});
function LoadData() {
$.ajax({
type: "GET",
url: "/Home/getvalues",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var dataSet = response;
$('#tblDetails tbody').empty();
var rows = '';
$.each(dataSet, function () {
var chkTD = '';
if ($(this)[0].IsChecked) {
chkTD = "<td><input type='checkbox' checked='checked' /></td>";
} else {
chkTD = "<td><input type='checkbox' /></td>";
}
rows += "<tr>" +
"<td>" + $(this)[0].taxId + "</td>" +
"<td>" + $(this)[0].TaxName + "</td>" +
chkTD +
"<td>" + $(this)[0].TaxPercentage + "</td>" +
"<td></td>" +
"</tr>";
});
$('#tblDetails tbody').append(rows);
}
});
}
</script>
Screenshot
