如何在Asp.net MVC中将两个文本框的值相乘 [英] How to multiply values of two textboxes in Asp.net MVC

问题描述

我有3个文本框，第1个代表数量，第2个代表价格，第3个代表总价格.

I have 3 textboxes, 1st for Quantity, 2nd for Price and 3rd for Total Price.

 <div class="form-group">
            @Html.LabelFor(model => model.quantity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.quantity, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                @Html.ValidationMessageFor(model => model.quantity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.price, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                @Html.ValidationMessageFor(model => model.price, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.totalprice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">  
                    @Html.EditorFor(model => model.totalprice, new { htmlAttributes = new { @class = "form-control", @type = "number" } })
                    @Html.ValidationMessageFor(model => model.totalprice, "", new { @class = "text-danger" })             
            </div>

这是控制器:

        [HttpPost]
        public ActionResult Add(Model model)
        {
            obj.Quantity = model.quantity;
            obj.Price = model.price;
            obj.TotalPrice = model.totalprice

            db.Details.Add(obj);
            db.SaveChanges();
            return RedirectToAction("");
        }

现在我想将第一和第二文本框的值相乘，并在第三文本框中显示它们.例如，如果用户在第一个文本框中输入5，在第二个文本框中输入100，则它将自动在第三个文本框中显示500，并且如果用户更改了第一个或第二个文本框的值，则第三个文本框的值也应相应地变化.谢谢.

now I want to multiply values of 1st and 2nd textboxes and show them in 3rd textbox. For example if users enter 5 in 1st textbox and 100 in 2nd textbox then it automatically shows 500 in 3rd textbox and if users changes value of 1st or 2nd textbox then value of 3rd textbox should also change accordingly. Thanks.

推荐答案

您可以在javascript中听文本框的 keyup 事件，读取值并进行乘法，并将结果值设置为第三个文本框.

You can listen to the keyup event of the textboxes in javascript, read the value and do the multiplication and set the resulting value to the third textbox.

假设您的页面中包含jQuery库.

Assuming your have jQuery library included in your page.

$(function(){

  $("#quantity,#price").keyup(function(e){

    var q=$("#quantity").val();
    var p=$("#price").val();
    var result="";

    if(q!=="" && p!=="" && $.isNumeric(q) && $.isNumeric(p))
    {
      result = parseFloat(q)*parseFloat(p);
    }
    $("#totalPrice").val(result);

  });

});

此处是一个有效的jsbin示例.

Here is a working jsbin sample.

这篇关于如何在Asp.net MVC中将两个文本框的值相乘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！