ASP.Net Core 2 Razor中如何实现带参数的AJAX GET请求

刚好我之前处理过类似的场景，给你一步步讲怎么实现下拉框选中值的传递，让你的OnGetTest2()方法能拿到前端的选中值：

1. 先搞定后台方法的参数接收 #

在你的Index.cshtml.cs里，只需要给OnGetTest2()方法添加一个参数就行，ASP.NET Core会自动从GET请求的QueryString里绑定这个参数。比如如果你的下拉框值是数字类型，就这么写：

public class IndexModel : PageModel
{
    // 这里的参数名要和前端传的键名对应上
    public IActionResult OnGetTest2(int selectedValue)
    {
        // 现在你可以用selectedValue来获取对应的数据了
        var targetList = GetDataBySelectedValue(selectedValue); // 假设这是你的数据获取逻辑
        
        // 返回JSON格式的数据给前端
        return new JsonResult(targetList);
    }

    // 模拟数据获取方法，你可以替换成自己的业务逻辑
    private List<string> GetDataBySelectedValue(int value)
    {
        return value switch
        {
            1 => new List<string> { "苹果", "香蕉", "橙子" },
            2 => new List<string> { "牛肉", "猪肉", "羊肉" },
            _ => new List<string> { "其他分类数据" }
        };
    }
}

如果你的下拉框值是字符串类型，把参数改成string selectedValue就可以了。

2. 前端AJAX传递选中值 #

接下来修改你的AJAX代码，核心是先获取下拉框的选中值，然后把它作为参数传递给后台。这里用jQuery的示例（如果你用原生JS思路是一样的）：

首先是HTML的下拉框（给它加个ID方便获取） #

<select id="categorySelect">
    <option value="1">水果分类</option>
    <option value="2">肉类分类</option>
    <option value="3">其他分类</option>
</select>

<!-- 可以加个按钮触发请求，或者直接监听下拉框的change事件 -->
<button id="loadDataBtn">加载对应列表</button>
<div id="resultList"></div> <!-- 用来展示返回的数据 -->

然后是AJAX请求代码 #

$(function() {
    // 绑定按钮点击事件，或者监听下拉框的change事件
    $('#loadDataBtn').click(function() {
        // 第一步：获取下拉框的选中值
        var selectedVal = $('#categorySelect').val();
        
        // 第二步：发起AJAX GET请求
        $.ajax({
            url: '/Index?handler=Test2', // 注意handler的值是Test2，对应后台的OnGetTest2
            type: 'GET',
            data: {
                selectedValue: selectedVal // 这里的键名要和后台方法的参数名完全一致
            },
            success: function(response) {
                // 请求成功后，把返回的数据渲染到页面
                var listHtml = '<ul>';
                response.forEach(item => {
                    listHtml += `<li>${item}</li>`;
                });
                listHtml += '</ul>';
                $('#resultList').html(listHtml);
            },
            error: function(xhr, status, err) {
                console.log('请求出错了:', err);
            }
        });
    });

    // 如果你想下拉框一改变就触发请求，可以换成这个事件
    // $('#categorySelect').change(function() {
    //     // 上面的AJAX代码直接搬过来就行
    // });
});

几个关键注意点 #

• 参数名匹配：前端data里的键名（比如selectedValue）必须和后台方法的参数名完全一致，ASP.NET Core才能正确绑定参数。
• 路由路径：如果你的页面不在根目录，比如/Home/Index，那AJAX的url要改成'/Home/Index?handler=Test2'。
• handler命名规则：后台方法OnGetXXX()对应的handler参数就是XXX，所以OnGetTest2对应handler=Test2，别写错了。
• 跨域问题：如果你的前端和后台不在同一域名下，需要配置CORS，但Razor页面一般都是同域的，这个大概率不用管。

这样调整之后，你的AJAX请求就能把下拉框的选中值传递给后台的OnGetTest2()方法了，然后后台根据这个值返回对应的数据，前端再渲染出来就搞定啦！

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