ASP.NET Core 6中OnClick事件失效，无法将Id保存至模型变量

核心问题原因 #

1. 页面加载时触发3次：你在onclick里写的@{guardarIdVet(@item.idVeterinario);}是服务器端C#代码，页面渲染阶段（服务器生成HTML时）会跟着foreach循环执行，循环3条记录就触发3次，和客户端点击无关。
2. 点击按钮无响应：服务器渲染完页面后，原来的onclick内容已经被执行完毕，客户端点击时没有有效的JavaScript代码，自然没反应。
3. asp:LinkButton是WebForms控件，MVC环境下不兼容，所以无效。

正确实现方式 #

方案1：用AJAX传递ID到控制器（打开模态框时保存） #

步骤1：修改编辑按钮，添加数据属性存储ID

@foreach (var item in Model.veterinarios)
{
    <tr>
        <!-- 其他列代码不变 -->
        <td>  
            <a href="#editEmployeeModal" class="edit" data-toggle="modal" data-id="@item.IdVeterinario">
                <i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i>
            </a>
            <a href="#deleteEmployeeModal" class="delete" data-toggle="modal" >
                <i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i>
            </a>
        </td>
    </tr>
}

步骤2：添加JavaScript监听模态框显示事件，发送AJAX请求

// 监听编辑模态框的显示事件
$('#editEmployeeModal').on('show.bs.modal', function (event) {
    // 获取触发模态框的按钮
    const triggerBtn = $(event.relatedTarget);
    // 从按钮的data-id属性获取兽医ID
    const vetId = triggerBtn.data('id');

    // 发送AJAX到控制器保存ID
    $.ajax({
        url: '@Url.Action("SaveVetId", "你的控制器名称")', // 替换成你的控制器名
        type: 'POST',
        data: { vetId: vetId },
        success: function(res) {
            // 保存成功后的可选处理
            console.log('ID已保存：', vetId);
        },
        error: function() {
            alert('保存ID失败');
        }
    });
});

步骤3：在控制器中添加接收ID的Action

[HttpPost]
public IActionResult SaveVetId(int vetId)
{
    // 根据业务需求存储ID，比如存入Session
    HttpContext.Session.SetInt32("CurrentVetId", vetId);
    // 返回JSON响应给前端
    return Json(new { success = true });
}

方案2：将ID存入模态框隐藏字段（提交表单时传递） #

如果不需要打开模态框就保存ID，而是提交表单时再传递，可采用此方案：

步骤1：在模态框的表单中添加隐藏字段

<!-- 编辑模态框内的表单 -->
<form id="editVetForm" asp-action="EditVet" method="post">
    <input type="hidden" id="hiddenVetId" name="vetId" value="" />
    <!-- 其他表单输入字段 -->
</form>

步骤2：用JavaScript给隐藏字段赋值

$('#editEmployeeModal').on('show.bs.modal', function (event) {
    const triggerBtn = $(event.relatedTarget);
    const vetId = triggerBtn.data('id');
    // 把ID赋值给隐藏字段
    $('#hiddenVetId').val(vetId);
});

步骤3：控制器接收ID

[HttpPost]
public IActionResult EditVet(int vetId, 你的视图模型类型 model)
{
    // 利用vetId执行编辑逻辑
    // ...
    return RedirectToAction("Index");
}

额外注意事项 #

• 移除视图中原来的@functions代码，服务器端方法无法被客户端事件直接调用。
• 确保项目已引入jQuery（Bootstrap模态框依赖jQuery），可通过本地文件或CDN引入。

内容的提问来源于stack exchange，提问作者Agustin Esposito