ASP.NET Core MVC单选框切换调用控制器Action失效问题

1. HTML 单选按钮的错误 #

• onclick 语法错误：你给onclick加了多余的单引号，onclick="'getA1Rates()'" 应该改成 onclick="getA1Rates()"，否则点击时不会触发JS函数
• label 关联错误：label的for属性值要和对应input的id完全一致，比如A1的labelfor="flexRadioDefaultA1"要改成for="flexRadioA1"，不然点击label选不中单选框
• 缺少value属性：单选按钮没设置value，JS里$('#flexRadioA1').val()会拿到空值，需要给input加上value="A1"、value="A2"

修正后的HTML：

<div class="form-check">
    <input class="form-check-input" onclick="getA1Rates()" type="radio" name="flexRadioDefault" id="flexRadioA1" value="A1" checked />
    <label class="form-check-label" for="flexRadioA1"> A1 </label>
</div>
<div class="form-check">
    <input class="form-check-input" onclick="getA2Rates()" type="radio" name="flexRadioDefault" id="flexRadioA2" value="A2" />
    <label class="form-check-label" for="flexRadioA2"> A2 </label>
</div>

2. JavaScript AJAX 的错误 #

• URL 路径错误：ASP.NET Core路由里，控制器名不需要加Controller后缀，/CodesController/Index/ 要改成 /Codes/Index
• 参数名不匹配：前端AJAX传的是{ id: ... }，但后台POST方法的参数是string data，参数名不一致导致后台接收不到值，要改成统一的参数名（比如都用id，或者都用data）
• 配置项大小写问题：AJAX里的URL是大写，规范写法是小写url（避免潜在兼容问题）

修正后的JS：

<script type="text/javascript">
    function getA1Rates() {
        $.ajax({
            type: "POST",
            url: "/Codes/Index",
            data: { id: $('#flexRadioA1').val() },
            dataType: "json",
            success: function (result) {
                alert("success")
            },
            error: function () {
                alert("failed");
            }
        });
    }
    function getA2Rates() {
        $.ajax({
            type: "POST",
            url: "/Codes/Index",
            data: { id: $('#flexRadioA2').val() },
            dataType: "json",
            success: function (result) {
                alert("success")
            },
            error: function () {
                alert("failed");
            }
        });
    }
</script>

3. 控制器方法的参数修正 #

把POST方法的参数名改成和前端一致的id，确保能正确接收参数：

public async Task<IActionResult> Index()
{
    // 原有逻辑
}

[HttpPost]
public async Task<IActionResult> Index(string id)
{
    // 处理传入的id值（A1或A2）
}

额外优化建议 #

可以把两个JS函数合并成一个，通过判断选中的单选按钮来传值，减少重复代码：

<script type="text/javascript">
    function getRates() {
        var selectedValue = $('input[name="flexRadioDefault"]:checked').val();
        $.ajax({
            type: "POST",
            url: "/Codes/Index",
            data: { id: selectedValue },
            dataType: "json",
            success: function (result) {
                alert("success")
            },
            error: function () {
                alert("failed");
            }
        });
    }
</script>

对应的HTML里，两个单选按钮的onclick都改成onclick="getRates()"即可。

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