本文介绍如何通过 jQuery 在按钮点击时自动获取其显示文本（如 Razor 中的 @item.Id），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与可维护性。
本文介绍如何通过 jquery 在按钮点击时自动获取其显示文本（如 razor 中的 `@item.id`），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与可维护性。
在 Web 开发中，常需为列表项（如表格行）绑定编辑按钮，并将当前项唯一标识（如 Id）传入模态框或表单进行后续操作。若为每个按钮单独写死 ID 或内联 onclick 事件，不仅冗余，还违背 DOM 解耦原则。jQuery 提供了简洁可靠的方案：利用事件上下文动态提取按钮内容。
核心思路是：在点击事件处理器中，使用 $(this) 指向被点击的按钮元素，再调用 .text() 方法获取其可见文本内容（即渲染后的 @item.Id 值），最后通过 .val() 将该值写入目标输入框（如 ）。
以下是完整、可直接运行的示例代码：
<!-- 引入 jQuery（建议置于 </body> 前） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 编辑按钮（Razor 语法中 @item.Id 会渲染为实际数值，如 123） --> <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button> <!-- 接收参数的目标输入框 --> <input type="text" id="Id" placeholder="ID will be auto-filled here" />
$(document).ready(function() {
$('#buttonEdit').on('click', function() {
const clickedId = $(this).text().trim(); // 获取按钮文本并去除首尾空格
$('#Id').val(clickedId);
});
});✅ 关键说明与最佳实践：
- 使用 .on('click', ...) 替代已废弃的 .click() 更符合现代 jQuery 规范；
- .text() 获取的是纯文本内容（不含 HTML 标签），安全可靠；.trim() 防止因模板换行或空格导致值异常；
- 若按钮内含图标（如 @item.Id），.text() 仍能正确提取数字部分，但建议保持按钮内容简洁；
- 如需支持多个同类按钮（例如每行一个编辑按钮），应改用类选择器 + 数据属性（如 class="btn-edit" 和 data-id="@item.Id"），避免 ID 重复，示例：
<button class="btn-edit" data-id="@item.Id">Edit</button>
$('.btn-edit').on('click', function() { const id = $(this).data('id'); // 更语义化、更健壮 $('#Id').val(id); });
掌握这一模式，你就能轻松实现“一处编写、多处复用”的参数传递逻辑，显著提升前端交互开发效率与代码质量。
