更新购物车中的值

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属性从来都不是一个好主意，因为每个HTML页面的元素id必须是唯一的。

尝试将product-id附加到元素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重复该id ，这违反了一个规则，即页面应具有唯一ID
• 您没有使用任何javascript框架，尽管纯javascript是完成所需内容的一种方式，但是将来在执行更高级的任务时，您可能会遇到跨兄弟问题
• 您在td有一个onInput ，但应该在它自己的复选框中

您可以轻松使用自己的文本框标记：

<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>