如何在Razor区域中调用JS变量实现下拉框级联筛选功能

首先明确核心逻辑：
Razor 是服务端预渲染技术，所有Razor代码会在页面返回给客户端之前执行完成，生成静态HTML；而JavaScript运行在客户端浏览器，页面加载完成后无法直接把JS变量回传给已经执行完毕的Razor逻辑。你可以根据数据量大小选择以下两种方案实现联动：

方案1：前端直接过滤（适合数据量较小的场景） #

提前把全量关联数据序列化到前端，切换国家时直接用JS过滤后重渲染下拉框即可。

1. 首先在Razor页面中将全量城市数据暴露为前端全局变量：

<script>
    // 序列化服务端全量城市数据
    const allCities = @Json.Serialize(Model.Cities);
</script>

2. 修改原有onChange函数，过滤后重渲染城市下拉：

function onChange() {
    const countryId = $('#country option:selected').val();
    // 过滤当前国家对应的城市
    const filteredCities = allCities.filter(city => city.countryId === countryId);
    const citySelect = $('#city');
    // 清空原有选项
    citySelect.empty();
    // 插入新的选项
    filteredCities.forEach(city => {
        citySelect.append(`<option value="${city.cityId}">${city.name}</option>`);
    });
    // 如果你使用的是selectpicker插件，需要调用refresh方法刷新样式
    citySelect.selectpicker('refresh');
}

其余需要联动的下拉框可以复用相同逻辑实现。

方案2：AJAX请求服务端获取数据（适合数据量较大的场景） #

如果关联数据量级较大，前端存全量会影响页面加载速度，可以切换国家时异步请求服务端接口获取对应过滤后的数据再渲染。

1. 后端新增接口接收countryId，返回对应城市列表，示例为ASP.NET Core接口：

[HttpGet]
public IActionResult GetCitiesByCountry(Guid countryId)
{
    var cityList = _dbContext.Cities.Where(c => c.CountryId == countryId).ToList();
    return Json(cityList);
}

2. 修改onChange函数发起异步请求：

function onChange() {
    const countryId = $('#country option:selected').val();
    $.get('/你的控制器名/GetCitiesByCountry', { countryId: countryId }, function(result) {
        const citySelect = $('#city');
        citySelect.empty();
        result.forEach(city => {
            citySelect.append(`<option value="${city.cityId}">${city.name}</option>`);
        });
        citySelect.selectpicker('refresh');
    });
}

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