Question

我们说我有以下观点：

for (var i = 0; i < Model.Count; i++)
{
    <table>
    <tr>
        <th>
            @Html.DisplayNameFor(m => m[i].Reviews[0].Quantity)
        </th>
        <th>
            @Html.DisplayNameFor(m => m[i].Reviews[0].Price)
        </th>
        <th>
            @Html.DisplayNameFor(m => m[i].Reviews[0].Value)
        </th>
    </tr>

    @for (var j = 0; j < Model[i].Reviews.Count; j++)
    {
        @Html.HiddenFor(m => m[i].Reviews[j].TempId)
        <tr>
            <td>
                @Html.TextBoxFor(m => m[i].Reviews[j].Quantity, new { id = "quantity", onblur = "calculateValue()" })
                @Html.HiddenFor(m => m[i].Reviews[j].Quantity)
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].Reviews[j].Price, new { id = "price", onblur = "calculateValue()" })
                @Html.HiddenFor(m => m[i].Reviews[j].Price)
            </td>
            <td>
                @Html.TextBoxFor(m => m[i].Reviews[j].Value, new { id = "value", @readonly = true })
                @Html.HiddenFor(m => m[i].Reviews[j].Value)
            </td>
        </tr>
    }
    </table>
}

在这个视图中，我还有一些JavaScript可以用价格和数量的乘积来计算价值：

function calculateValue() {
    var price = document.getElementById('price').value;
    var quantity = document.getElementById('quantity').value;

    var value = price * quantity;
    document.getElementById("value").value = parseFloat(value);
}

这个问题显而易见，我认为回答非常简单，但是我对JS几乎一无所知...所以这里有：

鉴于我正在使用getElementById方法并且有多个HTML元素（对于我的表中的每一行），目前共享price，quantity和{的相同元素ID {1}} ...目前的实施工作不会奏效。然后我如何分配唯一ID，将模型附加value作为唯一标识符，然后使用这些唯一ID在我的JS函数中进行计算以及显示相应的TempId in桌子？

Answer 1

我会使用jQuery并将你的id更改为类，并执行以下操作。这样就无需为输入元素生成任何唯一的东西。

$('.quantity, .price').on('blur', function(e) {
  var $parentRow = $(this).parents('tr');
  var quantity = parseInt($parentRow.find('.quantity').val());
  var price = parseInt($parentRow.find('.price').val());
  $parentRow.find('.value').val(quantity * price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" class="quantity" value="3">
    </td>
    <td>
      <input type="text" class="price" value="3">
    </td>
    <td>
      <input type="text" class="value">
    </td>
  </tr>
</table>

Answer 2

如果你没有在你的html中明确指定id = id =“quantity”，那么Quantity，Price和Value的每个文本框都会自动获取下面例示的格式的id; （有一件事，虽然我不确定你是怎么碰巧有模型[i]和m =＆gt; m [i]，所以我举例说明它是@Html.TextBoxFor（m =＆gt; m.Reviews [ j] .Quantity代替）：

Reviews_1__Quantity
Reviews_1__Price
Reviews_1__Value

所以在你的onblur函数的javascript中（将id传递给这个函数），你可以利用id的这个命名约定来获取Quantity，Price和计算Value的值：

var reviewId = id.substr(0, id.lastIndexOf('_') + 1); // will return Reviews_1__
var qty = $('#' + reviewId + 'Quantity').val(); // Reviews_1__Quantity
var price = $('#' + reviewId + 'Price').val(); // Reviews_1__Price
var total = qty * price;
$('#' + reviewId + 'Value').val(total); // Reviews_1__Value

具有模型

2 个答案: