如何在 Razor 视图中将 input type="number" 的值传递给 JS

Question

我有一个观点，这是其中的一个片段：

@foreach (var item in Model.Items.ToList())
{
    <tr>
        <td>
            <input type="checkbox" name="productIdCheckbox" value="@item.sLabel">
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sLabel)    
        </td>
        <td>    
            @Html.DisplayFor(modelItem => item.Text)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.OEMCode)
        </td>
        <td>
            <input type="number" name="qty" id="qty" min="1" max="1000" step="1" value="@item.Quantity" />
        </td>
        <td>
            <input type="submit" data-url='@Url.Action("AddToCart", "Cart", new { id = item.Id, qty = // I DON'T KNOW HOW TO PASS IT HERE // })' class="addProductToCartBtn btn btn-success" value="Add to cart" />
        </td>
    </tr>
}

此代码调用 CartController 中的 AddToCart 方法：

$('.addProductToCartBtn').click(function (event) {
    var url = $(this).data('url');
    $.ajax({
        url: url,
        type: 'GET',
        success: function (resultFrom_CartSummaryLine) {
            // some logic here..
        }
    });
});

但我无法将 qty 输入的值传递给此方法。我该怎么做？

需要明确的是，这是 CartController 的一个方法，我想在其中传递 qty 参数的值：

public PartialViewResult AddToCart(CartModel cart, int id, int qty)
{
    GetItemListProcedure_Result item = _itemRepository.GetItemByItemId(id).FirstOrDefault();
    if (item != null)
    {
        cart.AddItem(item, qty);
    }
    return PartialView("_CartSummaryLine", cart);
}

Answer 1

您也可以使用 HTML 帮助程序输入 name="qty" 数字。像这样的：

@Html.TextBoxFor(modelItem => modelItem.Quantity, new {type = "number"})

然后您应该能够像任何其他输入元素一样检索该值。

这是你要求的吗？还是你特别需要通过 JS 来检索这个值？

已编辑：

在您的 JS 方法中，您可以检索所有值。此外，将其设为 POST ajax 调用，这样您就不必在 data-url 中获取 URL。您可以在 ajax 调用中添加参数。还要在控制器操作方法上方添加一个[HttpPost] 属性。

$('.addProductToCartBtn').click(function (event) {
        var url = $(this).data('url');
        var idVal = $('[name="productIdCheckbox"]').val();
        var qtyVal = $('#qty').val()
        var cart = {
            sLabel: $('#...'), //whatever your selector for this is
            Text: $('#...'),
            OEMcode: $('#...') 
        };
        $.ajax({
            url: url,
            type: 'POST',
            data: {cart: cart, id: idVal, qty: qtyVal},
            success: function (resultFrom_CartSummaryLine) {
                // some logic here..
            }
        });
    });
});