.NET Core 6 - 如何在点击时传递数据

Question

我有一个 foreach 循环，它遍历模型并在 table 中显示数据。每当我单击与循环中的条目对应的按钮时，我想将 id（或模型中的任何数据）传递给 foreach 循环外的元素，我该怎么做？

示例：

<tbody>
    @foreach (var incident in Model)
    {
        <tr>
            <th>@incident.Title</th>
            <td>@incident.CustomerId</td>
            <td>@incident.ProductId</td>
            <td>@incident.DateOpened</td>
            @{
                var id = @incident.IncidentId;
            }
            <td><a asp-controller="Incident" asp-action="Edit" asp-route-id="@incident.IncidentId" ><i class="fa-solid fa-pen-to-square"></i></a></td>
            <td >
                <i class="fa-solid fa-trash-can hover:cursor-pointer" > <<-- When clicked, store the model id, modelId = @incident.IncidentId
                </i>
           </td>
       </tr>
    }         
</tbody>

//Now I should have access to the exact variable (id) and pass it to other elements 

Answer 1

你可以用 Javascript 来实现它。

概念

1. 用 class delete 标记删除按钮。
2. 使用 data-* 属性存储 id 值。
3. 为具有 (class) .delete.
的所有元素创建 click 事件侦听器

<tbody>
    @foreach (var incident in Model)
    {
        <tr>
            <th>@incident.Title</th>
            <td>@incident.CustomerId</td>
            <td>@incident.ProductId</td>
            <td>@incident.DateOpened</td>
            @{
                var id = @incident.IncidentId;
            }
            <td><a asp-controller="Incident" asp-action="Edit" asp-route-id="@incident.IncidentId" ><i class="fa-solid fa-pen-to-square"></i></a></td>
            <td>
                <i class="delete fa-solid fa-trash-can hover:cursor-pointer" data-id="@incident.IncidentId">
                </i>
           </td>
       </tr>
    }         
</tbody>

<div>
  <label>Selected Id:</label>
  <span id="selectedId"></span>
</div>

<script type="text/javascript">
    (function () {
        var deleteBtns = document.querySelectorAll('.delete');
        deleteBtns.forEach(btn => {
            btn.addEventListener('click', getSelectedId);
        });
    })();

    function getSelectedId() {
        var id = this.getAttribute("data-id");

        document.getElementById("selectedId").innerHTML = id;
    }

    window.onbeforeunload = function () {
        var deleteBtns = document.querySelectorAll('.delete');
        deleteBtns.forEach(btn => {
            btn.removeEventListener('click', getSelectedId);
        });
    }
</script>

Sample .JS Fiddle