ASP.NET Core中下拉框值变更后调用控制器的实现方法

嘿，我来帮你搞定这个下拉框选值变更时调用控制器方法的需求！按照下面的步骤来做就能实现：

1. 补全视图里的下拉框代码 #

先把你给出的视图代码补全，确保下拉框正确绑定模型数据，这里我帮你完善了结构：

<form asp-controller="CompetitorsMarketplace" asp-action="Index" method="get" class="form-filters">
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label class="control-label">Marketplace</label>
                <select id="selectChangedValue" class="form-control" asp-for="MarketplaceName" 
                        asp-items="Model.MarketplaceSelectList">
                    <option value="">请选择...</option> <!-- 加个默认空选项更友好 -->
                </select>
            </div>
        </div>
    </div>
</form>

这里asp-for会自动绑定你模型里的MarketplaceName属性，asp-items负责渲染下拉选项列表，完全符合ASP.NET Core的Tag Helper用法。

2. 用JS监听选择变更事件 #

接下来要给下拉框加个change事件监听，当用户选了不同的值，就触发控制器的Index方法并传参。我给你两种方案，选你项目里用的就行：

方案一：用jQuery（项目里已经引入jQuery的话优先用这个） #

$(document).ready(function() {
    $('#selectChangedValue').on('change', function() {
        const selectedVal = $(this).val();
        // 只有选中有效值才发起请求，空值的话跳回无参数的Index页面
        if (selectedVal) {
            // 用Url.Action生成正确的路由，避免硬编码URL
            const targetUrl = '@Url.Action("Index", "CompetitorsMarketplace")?MarketplaceName=' + encodeURIComponent(selectedVal);
            window.location.href = targetUrl;
        } else {
            window.location.href = '@Url.Action("Index", "CompetitorsMarketplace")';
        }
    });
});

方案二：原生JS（不用依赖jQuery） #

document.addEventListener('DOMContentLoaded', function() {
    const selectBox = document.getElementById('selectChangedValue');
    selectBox.addEventListener('change', function() {
        const selectedVal = this.value;
        const baseUrl = '@Url.Action("Index", "CompetitorsMarketplace")';
        
        if (selectedVal) {
            window.location.href = `${baseUrl}?MarketplaceName=${encodeURIComponent(selectedVal)}`;
        } else {
            window.location.href = baseUrl;
        }
    });
});

这里用encodeURIComponent是为了处理参数里的特殊字符（比如空格、中文），防止传递过程中出现乱码或者路由错误。

3. 确保控制器能接收参数 #

最后，你的CompetitorsMarketplaceController里的Index方法得能接住这个参数，代码大概是这样：

public IActionResult Index(string marketplaceName)
{
    // 这里写你的业务逻辑，比如根据选中的marketplaceName筛选数据
    var viewModel = new YourViewModel();
    // 别忘了重新生成下拉选项列表（如果需要保持选中状态的话）
    viewModel.MarketplaceSelectList = // 你的选项生成逻辑，比如从数据库取数据转成SelectList
    return View(viewModel);
}

要是怕参数名大小写或者映射有问题，可以用[FromQuery]特性明确指定：

public IActionResult Index([FromQuery(Name = "MarketplaceName")] string marketplaceName)
{
    // 逻辑同上
}

额外小提示 #

如果你不想刷新整个页面，而是异步加载数据更新页面部分内容，可以把window.location.href换成AJAX请求，比如用jQuery的$.get或者原生的fetch，然后把返回的数据渲染到页面上就行。

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