ASP.NET 核心 - 如何在 CSHTML 上设置 ID 为 HTML 元素的名称

Question

如何在 CSHTML 上设置 ID 为 HTML 元素的名称？

<tr>
    <td>
        @item.Items.ItemID
    </td>
    <td>
        @item.Items.ItemModelDescription
    </td>
    <td class="text-right">
        <input id="@item.Items.ItemID + 'UnitPrice'" class="form-control text-right" value="@item.Items.ItemUnitPrice" />
    </td>
    <td class="text-right">
        <input id="@item.Items.ItemID + 'Quantity'" class="form-control text-right" value="@item.Quantity" oninput="return change_quantity('@item.Items.ItemID')"/>
    </td>
    <td class="text-right">
        @(item.Quantity * item.Items.ItemUnitPrice)
    </td>
    <td>
        <a class="btn btn-sm btn-danger btn-rounded" asp-controller="purchaseorderheader" asp-action="Remove" asp-route-id="@item.Items.ItemID"><span class="fa fa-trash"></span></a>
    </td>
</tr>

我无法使用 javascript 获取 HTML 元素的值是否有任何方式或正确的方法来设置每个数量输入的 ID？或者关于这个的任何关键字搜索。

Answer 1

根据你的代码和描述，我假设你想根据数量和物品单价来计算成本。如果是这种情况，请参考下面的示例代码，您可以参考它来更改您的代码：

视图模型：

public class ItemViewModel
{
    public int ItemId { get; set; }
    public string ItemDescription { get; set; }

    public decimal ItemUnitPrice { get; set; }
    public decimalc Quantity { get; set; }
}

Index.cshtml：我们可以像这样设置id属性id='Quantity_@item.ItemId'，渲染后，输出像Quantity_XXX:

@model IEnumerable<WebApplication6.Models.ItemViewModel>

<table class="table">
    <thead>
        <tr> 
           ...
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.ItemId
                </td>
                <td>
                    @item.ItemDescription
                </td>
                <td class="text-right">
                    <input id="ItemUnitPrice_@item.ItemId" class="form-control text-right" type="text" value="@item.ItemUnitPrice" />
                </td>
                <td class="text-right">
                    <input id='Quantity_@item.ItemId' class="form-control text-right txtquantity" type="text" value="@item.Quantity" oninput="return change_quantity(this,@item.ItemId)"  />
                </td>
                <td class="text-right">
                    @(item.Quantity * item.ItemUnitPrice)
                </td>
                <td>
                    <a class="btn btn-sm btn-danger btn-rounded" asp-controller="purchaseorderheader" asp-action="Remove" asp-route-id="@item.ItemId"><span class="fa fa-trash"></span></a>
                </td>
            </tr>
            }
    </tbody>
</table>

然后在Index.cshtml页面的末尾，添加下面的JavaScript：我们可以使用parent()和closest()方法来查找当前行，并且然后找到这一行中的相关元素。

@section Scripts{ 
<script>
    function change_quantity(e, itemid) {
        //find the item unit price.
        var price = $("#" + "ItemUnitPrice_" + itemid).val(); 
        //find the quantity value.
        var quantity = $("#" + "Quantity_" + itemid).val();
        //calculate the cost and change the html content.
        $(e).parent().closest("tr").find(".text-right:last").html((price * quantity).toFixed(2).toString());
    } 
</script>
}

输出如下：

Answer 2

你可以使用这种方法

  @foreach (var item in Model)
    {
        <tr id="tr-@item.ItemId">
            <td>
                @item.ItemId
            </td>
            <td>
                @item.ItemDescription
            </td>
            <td class="text-right">
                <input id="ItemUnitPrice_@item.ItemId" class="form-control text-right" type="text" value="@item.ItemUnitPrice" />
            </td>
            <td class="text-right">
                <input id='Quantity_@item.ItemId' class="form-control text-right txtquantity" type="text" value="@item.Quantity" oninput="return change_quantity(this,@item.ItemId)"  />
            </td>
            <td class="text-right">
                @(item.Quantity * item.ItemUnitPrice)
            </td>
            <td>
                <a class="btn btn-sm btn-danger btn-rounded" asp-controller="purchaseorderheader" asp-action="Remove" asp-route-id="@item.ItemId"><span class="fa fa-trash"></span></a>
            </td>
        </tr>
        }

ASP.NET 核心 - 如何在 CSHTML 上设置 ID 为 HTML 元素的名称

ASP.NET Core - How would I set a name with ID of HTML element on CSHTML

model-view-controller

asp.net-core