Hi hamzashah5,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
NorthwindEntities entity = new NorthwindEntities();
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetProductById(string productId)
{
int pid = Convert.ToInt32(productId);
var Product = entity.Products.Where(x => x.ProductID == pid).FirstOrDefault();
return Json(Product, JsonRequestBehavior.AllowGet);
}
}
View
@model IEnumerable<Price_Grand_Total_Footer_MVC.Product>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<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.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#ddlProducts").change(function () {
var id = $(this).val();
if (id > 0) {
$.get("/Home/GetProductById", { productId: id }, function (result) {
$("tbody").append("<tr><td>" + result.ProductName + "</td><td>"
+ '<div class="input-group"><input type="hidden" id="hfPrice" value="' + result.UnitPrice + '" />'
+ '<span class="input-group-btn">'
+ ' <button class="btn btn-default value-control" data-action="minus" data-target="font-size">'
+ ' <span class="glyphicon glyphicon-minus"></span>'
+ ' </button>'
+ '</span>'
+ '<input type="text" value="1" class="form-control" id="font-size">'
+ '<span class="input-group-btn">'
+ ' <button class="btn btn-default value-control" data-action="plus" data-target="font-size">'
+ ' <span class="glyphicon glyphicon-plus"></span>'
+ ' </button>'
+ '</span>'
+ '</div></td><td id="Price">'
+ result.UnitPrice + "</td> </tr>");
CalculateGrandTotal();
});
}
});
});
function CalculateGrandTotal() {
var grandTotal = 0;
$('[id*=tblProducts] tbody tr').each(function () {
grandTotal += parseFloat($(this).find('td').eq(2).html());
$('#GrandTotal').text(grandTotal);
});
}
$(document).on('click', '.value-control', function () {
var price = $(this).closest('tr').find($("[id*=hfPrice]")).val();
var action = $(this).attr('data-action');
var target = $(this).attr('data-target');
var value = parseFloat($(this).closest('tr').find($('[id="' + target + '"]')).val());
if (value > 0 || action == "plus") {
if (action == "plus") {
value++;
}
if (action == "minus") {
value--;
}
$(this).closest('tr').find($('[id="' + target + '"]')).val(value);
var totalPrice = parseInt(value) * parseFloat(price == '' ? 0 : price);
$(this).closest('tr').find($("[id*=Price]")).text(totalPrice.toFixed(2));
}
CalculateGrandTotal();
})
</script>
</head>
<body>
<div class="container">
<select id="ddlProducts" class="form-control">
<option value="">Select</option>
<option value="1">Chai</option>
<option value="2">Chang</option>
<option value="10">Ikura</option>
<option value="14">Tofu</option>
<option value="16">Pavlova</option>
</select>
<hr />
<table id="tblProducts" class="table">
<thead>
<tr>
<th scope="col">Product</th>
<th width="200px">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody></tbody>
<tfoot><tr><td colspan="2">Grand Total : </td><td id="GrandTotal"></td></tr></tfoot>
</table>
</div>
</body>
</html>
Screenshot
