如何将RCL组件选中值传递给ASP.NET Core MVC控制器

1. RCL组件侧改造 #

根据你需要整页提交还是无刷新提交，选对应实现即可：

整页提交（无JS依赖，兼容性最好） #

直接给Years下拉框套表单，设置提交地址，下拉框加change事件触发表单提交，注意下拉框必须配置name属性，否则值无法被表单携带：

<!-- RCL内置组件中的Years下拉框代码 -->
<form method="get" action="@YearSubmitUrl">
    <select 
        id="Years" 
        name="selectedYear" 
        class="form-select"
        onchange="this.form.submit()">
        @* 原有年份选项绑定逻辑保留 *@
        @foreach (var year in YearList)
        {
            <option value="@year">@year年</option>
        }
    </select>
</form>

为了保证RCL组件的复用性，不要硬编码表单提交地址，在组件的模型/参数中定义public string YearSubmitUrl { get; set; }，由宿主MVC应用调用组件时传入实际接口地址即可。

AJAX无刷新提交（不触发整页重载） #

给下拉框绑定change事件，选中时直接发请求传值，示例用原生JS实现，无第三方依赖：

// 放在RCL组件关联的JS脚本中，确保宿主应用能正常加载该脚本
document.addEventListener('DOMContentLoaded', function() {
    const yearDdl = document.getElementById('Years');
    if (!yearDdl) return;

    yearDdl.addEventListener('change', async function(e) {
        const selectedYear = e.target.value;
        const submitUrl = e.target.closest('form')?.dataset.submitUrl || '/Home/FilterByYear';
        
        const res = await fetch(submitUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'Fetch',
                // 开启防伪令牌验证时需要携带该值
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]')?.value || ''
            },
            body: `selectedYear=${encodeURIComponent(selectedYear)}`
        });

        // 后续业务逻辑：比如把后端返回的局部视图渲染到指定容器
        const partialHtml = await res.text();
        document.getElementById('resultContainer').innerHTML = partialHtml;
    })
})

2. MVC后端控制器配置 #

控制器Action的参数名和前端传值的键名保持一致即可自动完成模型绑定，不需要额外解析请求：

public class HomeController : Controller
{
    private readonly IDataService _dataService;
    // 依赖注入你的业务服务
    public HomeController(IDataService dataService)
    {
        _dataService = dataService;
    }

    // 对应GET提交用[HttpGet]，对应POST提交用[HttpPost]
    [HttpPost]
    [ValidateAntiForgeryToken] // 开了防伪令牌就加这个特性
    public IActionResult FilterByYear(int selectedYear)
    {
        // 这里直接拿到选中的年份值，执行业务查询
        var data = _dataService.GetListByYear(selectedYear);

        // 异步请求返回局部视图/JSON，整页提交返回完整视图
        if (Request.Headers["X-Requested-With"].FirstOrDefault() is "Fetch" or "XMLHttpRequest")
        {
            return PartialView("_YearFilterResult", data);
        }
        return View("Index", data);
    }
}

3. 常见踩坑说明 #

• 下拉框必须配置name属性，否则表单提交、常规序列化逻辑都不会携带该控件的值
• RCL中的静态脚本、样式资源要正确配置暴露规则，确保宿主MVC应用能正常加载，否则事件绑定不会生效
• 前端传值的键名和后端Action的参数名要匹配，ASP.NET Core模型绑定默认大小写不敏感，但名称不能错，比如前端传selectedYear，后端参数不要写成chooseYear，如果要自定义参数名，给参数加[FromForm(Name = "selectedYear")]/[FromQuery(Name = "selectedYear")]绑定特性即可
• 调用RCL组件时记得传入提交地址参数，比如用视图组件Tag Helper调用时写法：<vc:year-selector year-submit-url="@Url.Action("FilterByYear","Home")" />

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