ASP.NET Core - 如何在 CSHTML 上设置带有 HTML 元素 ID 的名称答案

【问题标题】：ASP.NET Core - How would I set a name with ID of HTML element on CSHTMLASP.NET Core - 如何在 CSHTML 上设置带有 HTML 元素 ID 的名称
【发布时间】：2021-04-19 00:55:50
【问题描述】：

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

<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 的正确方法？或任何要搜索的关键字。

【问题讨论】：

标签： asp.net-core model-view-controller

【解决方案1】：

根据您的代码和描述，我假设您要根据 Quantity 和 ItemUnitPrice 计算成本。如果是这种情况，请参考以下示例代码，您可以参考它来更改代码：

视图模型：

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='Quantity_@item.ItemId'这样设置id属性，渲染后输出像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>
}

输出如下：

【讨论】：

非常感谢您的帮助

【解决方案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>
        }

【讨论】：