更新购物车中的值答案

【问题标题】：update value in cart更新购物车中的值
【发布时间】：2015-07-28 06:37:23
【问题描述】：

我正在 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 中的值更改时更新 total。

我尝试使用 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;
}

【问题讨论】：

标签： javascript c# asp.net-mvc razor

【解决方案1】：

使用foreach 生成多个元素，然后对其中的元素使用id 属性绝不是一个好主意，因为元素id 在每个HTML 页面中必须是唯一的。

尝试将产品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）

【讨论】：

【解决方案2】：

首先，几点说明：

您在 HTML 中使用了 id，并通过 Model 重复它，这违反了一个页面应该具有唯一 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>

【讨论】：