ASP.NET MVC 5页面加载后jQuery函数未触发的问题排查

核心错误点 #

1. 重复引入jQuery导致冲突
   你的_Layout页面已经通过@Scripts.Render("~/bundles/jquery")加载了jQuery，视图顶部又重复引入了jQuery 3.3.1，这会导致jQuery对象被覆盖或冲突，直接破坏后续jQuery代码的执行。

2. 服务器端与客户端代码混淆
   脚本中的@Model.ProjectFilter = $(this).val();是完全错误的写法：@Model.ProjectFilter是服务器端变量，在页面渲染到浏览器前就已经生成固定值，客户端JavaScript无法直接修改服务器端的Model对象，这行代码会引发语法错误，导致整个脚本中断执行。

3. 脚本加载顺序问题
   你把脚本放在body顶部，可能在jQuery未完全加载时就执行，而_Layout中预留了@RenderSection("scripts")，应该把自定义脚本放在这个区块中，确保在jQuery加载完成后再执行。

修正后的正确代码 #

视图中的脚本部分（替换原有脚本）

@section scripts {
    <script type="text/javascript">
        $(function () {
            alert('jQuery Load. If this message box shows it means jQuery is correctly referenced and can be used on this page');

            $('#pid').change(function () {
                // 获取下拉框当前选中的值
                var selectedValue = $(this).val();
                // 弹出选中值
                alert(selectedValue);

                // 如果需要将选中值同步到服务器端Model，需使用AJAX请求
                // 示例：提交到服务器的Action方法
                // $.post('@Url.Action("UpdateProjectFilter")', { projectFilter: selectedValue }, function(response) {
                //     // 这里可以处理服务器返回的响应
                // });
            });
        });
    </script>
}

保留原下拉框代码

@Html.DropDownList("ProjectFilter", null, htmlAttributes: new { @id="pid", @class = "form-control" })

移除视图顶部的重复jQuery引入

删除这一行：

<script src="//code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

额外说明 #

• 如果需要更新服务器端的Model.ProjectFilter值，不能直接在客户端脚本中赋值，必须通过AJAX请求将选中值提交到对应的Controller Action方法，由服务器端代码更新Model或保存数据。
• 确保_Layout中的@RenderSection("scripts", required: false)保留在jQuery和Bootstrap脚本之后，这样自定义脚本会在依赖库加载完成后执行。

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