如何使用javascript从剃刀视图计算总价值? MVC项目

时间:2019-01-31 10:47:28

标签: asp.net-mvc razor

我有一个使用MVC和Razor的.Net项目。 我将包含产品的列表传递到视图,其中我具有ProdutoValor(产品值),以及每个iten的QuantidaVenda(售出的数量)的TextboxFor。我想为每个项目获取值“ QuantidadeVenda * ProdutoValor”,并在文本框中显示总值。如何使用javascript做到这一点?

我想在用户输入数量后立即计算总数

这是我的观点:

            @for (int i = 0; i < Model.Produtos.Count; i++)
            {

                <tr>

                    <td>
                        @Html.HiddenFor(model => model.Produtos[i].ProdutoId)
                        @Html.HiddenFor(model => model.Produtos[i].ProdutoDescricao)
                        @Html.DisplayFor(model => model.Produtos[i].ProdutoNome)@Html.HiddenFor(model => model.Produtos[i].ProdutoNome)
                    </td>
                    <td>
                        @Html.DisplayFor(p => p.Produtos[i].ProdutoValor, new { @class = "form-control", Value = Model.Produtos[i].ProdutoValor }) @Html.HiddenFor(model => model.Produtos[i].ProdutoValor)
                    </td>
                    <td>
                        @Html.DisplayFor(p => p.Produtos[i].ProdutoEstoque, new { @class = "form-control", Value = Model.Produtos[i].ProdutoEstoque })@Html.HiddenFor(model => model.Produtos[i].ProdutoEstoque)
                    </td>
                    <td>
                        @if (Model.Produtos[i].ProdutoEstoque < 1)
                        {
                            @Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, disabled = "disabled" })
                        }
                        else
                        {
                            @Html.TextBoxFor(p => p.Produtos[i].QuantidadeVenda, new { value = 0, @id = "quantidade" })
                            if (Model.Produtos[i].ProdutoEstoque < Model.Produtos[i].QuantidadeVenda)
                            {<p>valor invalido</p>}
                        }
                    </td>
                </tr>

            }

     [enter image description here][1]

how the list looks like

1 个答案:

答案 0 :(得分:0)

有关的Javascript:

Onchange Event for  QuantidadeVenda(quantity):
function onchange()
{
var total=  document.getElementById("name of total textbox").Value* 
            document.getElementById("name of quantity textbox").value
  document.getElementById("name of total textbox").innerHTML=total
}

jQuery:

on change or LostFocus Event
$("input").change(function(){
   var total=  $("#name of total textbox").val()* 
               $("#name of quantity textbox").val()
      $("#name of total textbox").val=total
});

更新代码

HTML:

<table  border="1">
        <tr>
        <td>product</td>
        <td>quantity</td>
        <td>total</td>
        </tr>
        <tr>
            <td>
                10
            </td>
            <td>
                <input type="text" name="txt" value="" onchange="myFunction(this)">
            </td>
            <td><label>_</label></td>
        </tr>
        <tr>
            <td>
                10
            </td>
            <td>
                <input type="text" name="txt" value="" onchange="myFunction(this)">
            </td>
            <td><label>_</label></td>
        </tr>
    </table>

Javascript:

 function myFunction($this) {
        debugger           $($this).parent().siblings(":last").find('label').text($($this).parent().siblings().first().text().trim() * $this.value)

    }