MVC项目中如何为动态HTML表格列添加跳转指定视图的超链接

修改位置 #

你需要把超链接渲染逻辑写在GetCustomers方法的AJAX成功回调里，也就是遍历返回的客户数据、逐行生成表格内容的$.each循环中，替换原本直接给手机号列写入纯文本的代码即可。另外你现有代码里在service_plan列前多写了一个无对应开标签的</a>闭合标签，属于无效HTML，需要一并删除，否则会导致页面结构错乱。

具体修改代码 #

找到循环内给索引为1的td（也就是手机号列）赋值的代码段，替换为拼接超链接的逻辑，修改后的完整$.each代码块如下：

$.each(customers, function (i, customer) {
    var table = $("#tblCustomers");
    var row = table[0].insertRow(-1);
    // 员工姓名列
    $(row).append("<td />");
    $(row).find("td").eq(0).html(customer.employee_name);
    // 手机号列：渲染为跳转链接
    $(row).append("<td />");
    const detailUrl = `/Home/ViewPage/${encodeURIComponent(customer.mobile_number)}`;
    $(row).find("td").eq(1).html(`<a href="${detailUrl}">${customer.mobile_number}</a>`);
    // 套餐列：删除原代码里多余的</a>无效标签
    $(row).append("<td />");
    $(row).find("td").eq(2).html(customer.service_plan);
    // 额度列
    $(row).append("<td />");
    $(row).find("td").eq(3).html(customer.usuge_limit);
});

补充说明 #

• 代码里用encodeURIComponent处理手机号参数，是为了兼容可能出现的特殊字符，避免路由匹配失败，如果你的手机号全为数字可以省略该处理，但保留该写法兼容性更好
• 请确认你的MVC项目中已经注册了对应路由：{controller}/{action}/{mobileNumber}，确保/Home/ViewPage/xxx的请求能正确命中对应的ActionResult方法，否则点击链接会返回404
• 如果后续需要改成弹窗编辑而不是页面跳转，只需要给a标签绑定点击事件，调用e.preventDefault()阻止默认跳转行为，再写对应的弹窗拉取详情逻辑即可

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