如何在ASP.NET MVC中通过Ajax动态为asp-route-id赋值

我的视图代码 #

<p>
    <a id="deleteLink" asp-action="Delete" asp-controller="User" asp-route-id="">
        <input id="btnSetPay" class="button" type="button" value="Оплатить">
    </a>
</p>

<script>
    var deleteLink = document.getElementById('deleteLink');

    var id = document.getElementById("codeDrink").value;
    // or var id = 100;

    function getId() {
        fetch('/User/GetId/' + id, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                id = data.id;

                deleteLink.setAttribute('asp-route-id', id);
            })
            .catch(error => {
            });
    }
    getId();
</script>

我的控制器代码 #

public int GetId(int id)
{
    return _context.Drinks.Single(x => x.Id == id).Id;
}

问题分析与解决方案 #

核心问题 #

asp-route-id是ASP.NET MVC的Razor标签助手属性，仅在服务器端渲染页面时生效，用于生成<a>标签的href属性。客户端JavaScript修改这个属性不会自动更新<a>的实际跳转地址，所以你的代码无法达到预期效果。此外，控制器直接返回int类型，fetch解析JSON时会失败，因为纯数字不是标准的JSON对象格式。

修正后的代码 #

控制器代码修改

将返回类型改为JsonResult，把ID包装成匿名对象返回：

public JsonResult GetId(int id)
{
    var drinkId = _context.Drinks.Single(x => x.Id == id).Id;
    return Json(new { id = drinkId });
}

视图脚本修改

直接修改<a>标签的href属性，而不是asp-route-id：

<script>
    var deleteLink = document.getElementById('deleteLink');
    // 获取服务器渲染后的基础URL，移除末尾可能存在的空ID部分
    var baseUrl = deleteLink.href.replace(/\/$/, '');

    function getId() {
        // 实时获取codeDrink的值，避免页面加载时控件未初始化
        var codeDrinkValue = document.getElementById("codeDrink").value;
        if (!codeDrinkValue) return;

        fetch('/User/GetId/' + codeDrinkValue, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(data => {
            // 构造新的跳转URL并赋值给href
            deleteLink.href = `${baseUrl}/${data.id}`;
        })
        .catch(error => {
            console.error('获取ID出错:', error);
        });
    }
    getId();
</script>

额外说明 #

1. 如果codeDrink的值可能动态变化（比如用户输入后），需要在值变化时重新调用getId()函数，比如给codeDrink添加onchange事件：

<input id="codeDrink" onchange="getId()" />

2. 建议保留错误处理逻辑，避免请求失败时用户无感知。

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