为何Axios GET请求参数无法传递至ASP.NET后端Method2方法？

参数传递失败的原因及解决方案 #

核心问题 #

前端请求的URL格式不符合后端参数绑定规则，导致parameterValue无法被正确识别并绑定。

具体原因与对应解决方法 #

1. URL拼接未携带参数名

当前代码直接把参数值拼在URL末尾，生成的请求地址类似/Controler2/Method2123，后端无法将123映射到parameterValue参数。

解决方法：
手动在URL中添加参数名与问号，修正请求代码：

App.Value2OnChange = (e) => {
    let elem = $(e);
    alert("parameter value " + elem.val());

    axios.get(`${urls.Value2Validate}?parameterValue=${elem.val()}`).then((response) => {
        if (response.data === 'ok') {
             //dispay msg ('PASSED');
        } else {
            //dispay msg ('Failed');
        }
    });
}

2. 推荐使用Axios的params配置（更规范）

直接拼接URL容易出现编码问题或格式错误，Axios的params参数可自动处理GET请求的参数拼接与编码：

App.Value2OnChange = (e) => {
    let elem = $(e);
    alert("parameter value " + elem.val());

    axios.get(urls.Value2Validate, {
        params: {
            parameterValue: elem.val()
        }
    }).then((response) => {
        if (response.data === 'ok') {
             //dispay msg ('PASSED');
        } else {
            //dispay msg ('Failed');
        }
    });
}

该方式会自动生成/Controler2/Method2?parameterValue=xxx格式的URL，同时处理特殊字符的URL编码。

3. 路由匹配不匹配（若想用REST风格URL）

如果希望通过/Controler2/Method2/xxx这种路径传参，需要给后端Action添加路由特性指定参数名：

[Route("Controler2/Method2/{parameterValue}")]
public async Task<JsonResult> Method2(string parameterValue)
{
    var response = await MediatR.Send(new ValidateionQuery(parameterValue));
    return JsonSuccess(response ? "ok" : "error");
}

同时前端修改URL拼接方式：

axios.get(`${urls.Value2Validate}/${elem.val()}`).then(...)

额外检查点 #

• 确认Razor中Url.Action生成的URL是否正确：检查Controler2的拼写是否与后端控制器类名一致（控制器类名应为Controler2Controller，若实际是Controller2Controller，则Url.Action中的控制器名应改为Controller2）。
• 再次确认elem.val()返回的是预期的非空值（你的alert已经验证，但可进一步确认参数类型是否符合后端要求）。

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