Значение обновления в корзине

Question

Я разрабатываю приложение корзины покупок в MVC 4, где мне нужно обновить сумму при изменении количества корзины.

@foreach (var item in Model) 
{ 
    <tr> 
     <td>@item.ProductId</td> 
     <td>@item.Product.ProductName</td> 
     <td id="PriceBx">@item.Product.UnitPrice</td> 

     <td id="QtyBx" oninput="calculate()">@Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td> 
     <td id="result">@String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td> 

    </tr> 
} 

В этом мне нужно обновить общую, когда значение в QuantityBox изменяется.

Я попытался с помощью Javascript

<script type="text/javascript"> 
function calculate() 
{ 

    var myBox1 = document.getElementById('QtyBx').value; 
    var myBox2 = document.getElementById('PriceBx').value; 
    var result = document.getElementById('result'); 
    var myResult = myBox1 * myBox2; 
    result.innerHTML = myResult; 
} 

Answer 1

Создание нескольких элементов с помощью foreach затем, используя id атрибут для элементов внутри него никогда не является хорошей идеей, потому что элемент id должен быть уникальным в HTML-страницы.

Try для добавления продукта идентификатора к элементу ID:

@foreach (var item in Model) 
{ 
    <tr> 
     <td>@item.ProductId</td> 
     <td>@item.Product.ProductName</td> 
     <td id="PriceBx@(item.ProductId)">@item.Product.UnitPrice</td> 

     <td id="QtyBx@(item.ProductId)" oninput="calculate(@(item.ProductId))">@Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td> 
     <td id="result@(item.ProductId)">@String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td> 

    </tr> 
} 

А в вашем Javascript:

function calculate(itemId) 
{ 
    var myBox1 = parseInt(document.getElementById('QtyBx' + itemId).value, 10); 
    var myBox2 = parseFloat(document.getElementById('PriceBx' + itemId).value); 
    var result = document.getElementById('result' + itemId); 
    var myResult = myBox1 * myBox2; 

    result.innerHTML = myResult; 
} 

(я взял на себя смелость, чтобы явно преобразовать значение ваших входов int и float соответственно)

Answer 2

Прежде всего, некоторые замечания:

• вы используете в вашем HTML в id и вы это повторять через Model, это нарушает правило, одна страницы должна иметь уникальные идентификаторы
• Вы не используете яваскрипт рамки, хотя чистый браузер способ сделать то, что вам нужно, но в будущем вы могли бы иметь некоторые проблемы кросс-broser при выполнении более авансовые задач
• у вас есть в вашем td в onInput, но это должно быть в флажком это сам

вы можете легко использовать свой собственный текстb вол разметки:

<td id="QtyBx" oninput="calculate()"> 
    @Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" }) 
</td> 
<td id="result"> 
    ... 
</td> 

изменение:

<td class="quantity"> 
    <input type="number" id="QuantityBox_@item.Product.ProductId" 
      value="@item.Quantity" 
      data-unitprice="@item.Product.UnitPrice" 
      data-productid="@item.Product.ProductId" 
      onchange="calculate(this)" /> 
</td> 

...

и, используя JQuery (для обработки data- проще) должно быть что-то вроде:

function calculate(elm) { 
    var chk = $(elm),    // the checkbox 
     vlu = chk.val(),    // the current qty value 
     pid = chk.data("productid"), // product id 
     unt = chk.data("unitprice"), // unit price 
     res = $(".result_" + pid), // the result for this product 
     tot = vlu * unt;    // total 

    res.text("$" + tot);    // write the value 
} 

живой пример: https://jsbin.com/gafaja/edit?html,js,output

---

если вы все еще хотите узнать/сделать это в простом JavaScript:

function calculate(elm) { 
    var vlu = elm.value,   // the current qty value 
     pid = elm.getAttribute("data-productid"), // product id 
     unt = elm.getAttribute("data-unitprice"), // unit price 
     res = document.getElementsByClassName("result_" + pid), // the result for this product 
     tot = vlu * unt;    // total 

    res[0].innerHTML = "$" + tot; // write the value 
} 

еще одну вещь ...

не добавляют style к элементам, просто добавьте таблицу стилей как:

<style> 
    .quantity input { width:50px; } 
</style>