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的规则
你没有使用任何javascript框架，虽然纯javascript是一种完成你需要的方式，但是在将来你执行更多高级任务时可能会遇到一些跨越问题
您的onInput中有一个td，但它应该在自己的复选框中

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

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

更新购物车中的价值

2 个答案: