AJAX生成按钮Url.Action跳转引号嵌套及拼接用户ID参数问题

核心问题说明 #

@Url.Action是服务端Razor语法，仅在页面首次渲染时执行生成固定的路径字符串，无法直接读取客户端运行时的JS变量user[i].id，这是你之前写法报错的核心原因，引号嵌套是次要问题。

步骤1：调整后端路由适配ID参数 #

你的后端Action目前没有配置接收ID参数的规则，先修改路由和方法定义：

[RoutePrefix("Request")]
public class NewUserController : Controller
{
        // 新增{id?}表示id为可选参数，若要求必填可去掉?
        [Route("UserForm/{id?}")]
        [CustomAuthorize(Roles = UserRole.Any)]
        public ActionResult ManagerNewUserForm(int? id)
        {
            // 可在此处接收id参数处理业务逻辑
            return View("~/Views/Request/UserForm.cshtml");
        }
}

步骤2：前端路径拼接写法 #

方案A：拆分基础路径（推荐，完全规避引号嵌套） #

先在Razor部分提前生成基础跳转路径，AJAX循环时直接拼接用户ID即可：

// 这行代码在页面渲染时由服务端生成固定的基础路径字符串
const baseEditUrl = '@Url.Action("UserForm", "Request")';

// AJAX循环生成按钮时直接拼接，使用模板字符串的${}语法插入变量无需转义
row.append(`<td><button onclick="location.href='${baseEditUrl}/${user[i].id}'" >Edit</button></td>`);

方案B：直接写在模板字符串内 #

如果不想单独定义变量，也可以直接合并写法，模板字符串内不需要转义双引号：

row.append(`<td><button onclick="location.href='@Url.Action("UserForm", "Request")/${user[i].id}'" >Edit</button></td>`);

方案C：事件委托（最规范，彻底避免行内JS的引号问题） #

不写行内onclick，统一用事件委托绑定点击事件，后期维护更方便：

// 生成按钮时把用户ID存在data自定义属性中
row.append(`<td><button class="edit-btn" data-user-id="${user[i].id}" >Edit</button></td>`);

// 全局只需要绑定一次事件，不需要给每个按钮单独写onclick逻辑
$(document).on('click', '.edit-btn', function() {
  const userId = $(this).data('user-id');
  location.href = '@Url.Action("UserForm", "Request")/' + userId;
})

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