本文讲解如何通过 jQuery 在按钮点击时自动获取其显示文本（如 @item.Id），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与健壮性。
本文讲解如何通过 jquery 在按钮点击时自动获取其显示文本（如 `@item.id`），并将其赋值给指定表单字段，避免硬编码，提升代码复用性与健壮性。
在 Web 开发中，常需将按钮上显示的动态数据（例如 Razor 视图中的 @item.Id）作为参数传入 JavaScript 逻辑中，用于填充模态框表单、发起 AJAX 请求等场景。直接在 HTML 中内联 onclick="handleClick(@item.Id)" 易引发语法错误（如未转义引号或特殊字符），且破坏 HTML 与 JS 的关注点分离原则。更专业、安全的做法是：利用 jQuery 在事件处理函数中动态读取按钮自身内容，并注入目标元素。
✅ 推荐实现方式
使用 $(this).text() 获取当前被点击按钮的可见文本内容（注意：text() 返回纯文本，不包含 HTML 标签；若按钮含内联标签，可改用 $(this).html() 并谨慎处理 XSS），再通过 .val() 赋值给目标输入框：
<!-- 示例按钮（Razor 语法中渲染实际 ID 值） --> <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button> <!-- 目标输入框（通常位于模态框内） --> <input type="text" id="Id" name="Id" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#buttonEdit').click(function() {
const parameter = $(this).text(); // 动态获取按钮文本，如 "123"
$('#Id').val(parameter); // 写入到 #Id 输入框
});
});
</script>⚠️ 注意事项与最佳实践
-
ID 唯一性：上述示例使用 id="buttonEdit"，适用于单个按钮。若页面存在多个编辑按钮（如 @foreach 循环生成），应改用类选择器 + 事件委托，避免 ID 重复：
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<button class="btn-edit" data-id="@item.Id" data-toggle="modal" data-target="#EditRecord">编辑</button>
$(document).on('click', '.btn-edit', function() { const id = $(this).data('id'); // 推荐：用 data-* 属性存储结构化数据 $('#Id').val(id); }); 数据类型与安全性：$(this).text() 返回字符串。若后端需整型 ID，应在提交前转换（如 parseInt(id)），但注意验证非空与有效性；切勿将用户可控内容直接插入 HTML 或执行 eval()。
-
模态框初始化时机：若 #Id 输入框位于 Bootstrap 模态框内，确保在 data-target 触发模态框打开之后再赋值（或监听 shown.bs.modal 事件），否则可能因 DOM 尚未渲染而赋值失败：
$('#EditRecord').on('shown.bs.modal', function () { $('#Id').val($(event.relatedTarget).data('id')); });
掌握这种“事件源驱动”的参数传递模式，不仅能准确传递 @item.Id，还能轻松扩展为传递多字段（如 data-name="@item.Name"）、支持批量操作，是构建可维护前端交互的基础能力。
