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_Total_Increase_Decrease_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) {
$("#Product").text(result.ProductName);
$("#Price").text(result.UnitPrice);
$("#hfPrice").val(result.UnitPrice);
});
}
});
});
$(document).on('click', '.value-control', function () {
var price = $(this).closest('tr').find($("#hfPrice")).val();
var action = $(this).attr('data-action')
var target = $(this).attr('data-target')
var value = parseFloat($('[id="' + target + '"]').val());
if (value > 0) {
if (action == "plus") {
value++;
}
if (action == "minus") {
value--;
}
$('[id="' + target + '"]').val(value);
var totalPrice = parseInt(value) * parseFloat(price == '' ? 0 : price);
$(this).closest('tr').find($("#Price")).text(totalPrice.toFixed(2));
}
})
</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>
<tr>
<td id="Product"></td>
<td>
<div class="input-group">
<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>
<input type="hidden" id="hfPrice" />
</td>
<td id="Price"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Screenshot
