ASP.NET MVC中触发下拉框jQuery change事件并向Action传参

首先，咱们来梳理下你当前遇到的核心问题：

• 你的控制器搜索方法标记了[HttpPost]，但jQuery.load()默认发起GET请求，导致无法命中处理搜索的Post Action，反而调用了无参数的Get版本返回全量数据。
• jQuery代码里的参数传递语法错误，既没传递下拉框DropSearch的值，term的取值时机也不对（页面加载时就取了初始值，不是用户输入后的实时值）。
• 还有个容易忽略的细节：视图里下拉框的Value值和控制器里的判断字符串拼写不一致，比如视图里是stSeach，控制器里写的是stSearch，这会导致搜索逻辑完全不生效。

下面分步骤给出完整的解决方案：

1. 优化控制器代码（规范且易维护） #

把DropSearch作为参数直接绑定到Action上，避免依赖Request对象，同时统一拼写错误：

public ActionResult searchWithDropsAj() 
{ 
    return View(db.movieTbls.ToList()); 
} 

[HttpPost]
// 添加DropSearch参数，让MVC自动绑定请求参数
public ActionResult searchWithDropsAj(string term, string DropSearch) 
{ 
    var productSearch = new List<movieTbl>();

    if (string.IsNullOrEmpty(term))
    {
        // 没有搜索关键词时返回全量数据
        productSearch = db.movieTbls.ToList();
    }
    else
    {
        switch(DropSearch)
        {
            case "conSearch":
                productSearch = db.movieTbls.Where(pr => pr.movieName?.Contains(term) ?? true).ToList();
                break;
            case "stSeach": // 与视图里的Value值统一
                productSearch = db.movieTbls.Where(pr => pr.movieName?.StartsWith(term) ?? true).ToList();
                break;
            case "endSearsh": // 与视图里的Value值统一
                productSearch = db.movieTbls.Where(pr => pr.movieName?.EndsWith(term) ?? true).ToList();
                break;
            default:
                productSearch = db.movieTbls.ToList();
                break;
        }
    }

    return View(productSearch); 
}

2. 修正jQuery代码（核心解决请求不匹配问题） #

因为控制器的搜索方法是[HttpPost]，咱们需要用$.post()发送POST请求，而不是默认GET的load()，同时实时获取用户的输入值：

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#DropSearch').change(function () {
            // 实时获取当前的搜索词和下拉框选中值
            var currentTerm = $('#term').val().trim();
            var currentSearchType = $('#DropSearch').val();

            // 发送POST请求到控制器Action，成功后更新目标元素内容
            $.post('@Url.Action("searchWithDropsAj", "movieTbls")', 
                  { term: currentTerm, DropSearch: currentSearchType }, 
                  function(response) {
                      $("#getOurSlider").html(response);
                  });
        });
    });
</script>

如果你更倾向于用load()方法，可以修改控制器，新增一个支持GET请求的搜索Action：

[HttpGet]
public ActionResult searchWithDropsAj(string term, string DropSearch) 
{ 
    // 逻辑和Post版本完全一致，这里省略重复代码
    var productSearch = new List<movieTbl>();
    // ... 搜索逻辑 ...
    return View(productSearch); 
}

对应的jQuery代码改为：

$('#DropSearch').change(function () {
    var currentTerm = $('#term').val().trim();
    var currentSearchType = $('#DropSearch').val();
    
    $('#getOurSlider').load('@Url.Action("searchWithDropsAj", "movieTbls")', 
                           { term: currentTerm, DropSearch: currentSearchType });
});

额外注意事项 #

• 确保视图中存在id="getOurSlider"的元素，否则无法渲染返回的搜索结果。
• 处理空搜索词的情况，避免空字符串导致的逻辑异常。
• 时刻检查视图和控制器的参数名称、枚举值拼写，这类细节错误很容易导致功能失效。

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