Hi rajeesh,
Check the below example.
Model
public class ItemModel
{
public int Id { get; set; }
public string Name { get; set; }
public int Price { get; set; }
public int Quantity { get; set; }
public int Total { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
@model TextBoxFor_Calculation_Third_MVC.Models.ItemModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript">
function CalculateTotal() {
var price = document.getElementById('txtPrice').value;
var quantity = document.getElementById('txtQuantity').value;
if (isNaN(price) || price == "") {
price = 0;
}
if (isNaN(quantity) || quantity == "") {
quantity = 0;
}
document.getElementById('txtTotal').value = parseFloat(price) * parseFloat(quantity);
}
</script>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table>
<tr>
<th>Name:</th>
<td>@Html.TextBoxFor(m => m.Name, new { @id = "txtName", @Value = "Chai" })</td>
</tr>
<tr>
<th>Price:</th>
<td>@Html.TextBoxFor(m => m.Price, new { @id = "txtPrice", onkeyup = "CalculateTotal();" })</td>
</tr>
<tr>
<th>Quantity:</th>
<td>@Html.TextBoxFor(m => m.Quantity, new { @id = "txtQuantity", onkeyup = "CalculateTotal();" })</td>
</tr>
<tr>
<th>Total:</th>
<td>@Html.TextBoxFor(m => m.Total, new { @id = "txtTotal" })</td>
</tr>
</table>
}
</body>
</html>
Screenshot
