本文介绍如何通过 jQuery 在按钮点击时自动提取其显示文本（如 @item.Id），并将其设置为指定表单元素（如 ）的值，避免硬编码，提升代码复用性与可维护性。
本文介绍如何通过 jquery 在按钮点击时自动提取其显示文本（如 @item.id），并将其设置为指定表单元素（如 ）的值，避免硬编码，提升代码复用性与可维护性。
在实际开发中（尤其在 ASP.NET MVC 或 Razor Pages 场景下），我们常需将服务端渲染的动态数据（如 @item.Id）传递至前端 JavaScript 逻辑中。一种常见但不推荐的做法是直接在 JS 中写死参数（如 $('#Id').val('parameter')），这会导致逻辑耦合、难以维护，且无法适配多条记录。
更健壮、可扩展的方案是：让按钮自身“携带”数据，并在点击时由 jQuery 动态读取。核心思路是利用 $(this).text() 获取当前被点击按钮的可见文本内容，并将其赋值给目标表单控件。
以下是完整、可直接运行的实现示例：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<!-- 引入 jQuery（建议置于 </body> 前或使用模块化加载） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 动态渲染的按钮（Razor 示例） --> <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#EditRecord">@item.Id</button> <!-- 目标输入框（用于接收 ID 值） --> <input type="text" id="Id" placeholder="ID will be populated here" />
$(document).ready(function () {
$('#buttonEdit').on('click', function () {
const clickedId = $(this).text().trim(); // 安全获取并去除首尾空格
$('#Id').val(clickedId);
});
});✅ 关键要点说明：
- $(this) 指向当前被点击的 DOM 元素（即该
- .text() 获取按钮的纯文本内容（不包含 HTML 标签），比 .html() 更安全；
- .trim() 防止因模板换行或空格导致的意外空白字符；
- 使用 .on('click', ...) 替代已废弃的 .click()，符合现代 jQuery 最佳实践；
- 若页面存在多个编辑按钮（如表格中每行一个），应避免重复 id="buttonEdit"（ID 必须唯一），此时推荐改用 class="btn-edit" 并结合 data-id="@item.Id" 属性传递值，再通过 $(this).data('id') 读取——这是更规范、可扩展的方案。
⚠️ 注意事项：
- 确保目标元素（如 #Id）在 DOM 加载完成后存在；若该输入框位于模态框（Modal）内且初始未渲染，需在模态框 shown.bs.modal 事件中赋值，或使用事件委托；
- 在服务端渲染场景中，@item.Id 应已正确输出为数字或字符串，无需额外 JSON 编码；若含特殊字符（如引号、换行），建议改用 data-* 属性方式传递结构化数据。
通过这一模式，前端逻辑彻底解耦于服务端变量名，既保障了类型安全（文本即 ID），又为后续支持批量操作、异步加载等场景打下坚实基础。
