.NET MVC下拉框值变更时无法触发Ajax调用问题排查

云上老周

2026-8-1

.NET MVC下拉框变更无法触发控制器方法的问题排查与修复

问题概述

在基于.NET Framework的MVC Web应用中，下拉框statusselect值变更时，无法调用WorkforceRequests控制器中的GetSelectedDropDownChanged方法，断点始终无法命中，表格dtbl也无法更新数据。

初始问题代码

前端下拉框

<th>
    <select class="form-control" id="statusselect" name="statusselectName">
       
        <option value="1">Pending Request</option>
        <option value="2">All requests </option>
    </select>
</th>

初始JS代码

<script>
  $(function () {
        $(document)
            .on('change', '#statusselect', function () {
                var valueofDropDown = $(this).val();
                var url = '/WorkforceRequests/GetSelectedDropDownChanged';
                var dataToSend = { selectedValue: valueofDropDown }

                $.ajax({
                    url: url,
                    data: dataToSend,
                    type: 'GET',
                    success: function (dataReceived) {
                        //update control on View
                        var receivedValue = dataReceived.myResult;
                        $('YourControlIDToUpdate').val(receivedValue);
                    }
                })
            });
    };
</script>

后端控制器方法

public class WorkforceRequestsController : Controller
{   
    [HttpGet]
    public JsonResult GetSelectedDropDownChanged(string selectedValue) 
    {
        List<WorkforceRequest> workforceRequest = new List<WorkforceRequest>();
        if (selectedValue == "1")
        {                  
            workforceRequest = Workforce.GetPendingOnPalnningSection();                        
        }
        else
             workforceRequest = Workforce.GetAllRequestsData();

        return Json(new { myResult = workforceRequest }, JsonRequestBehavior.AllowGet);
    }
}

表格代码

<table id="dtbl" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.WorkforceRequestID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Section)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RequiredPosition)
            </th>
           
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
               
                <td>
                    @Html.DisplayFor(modelItem => item.WorkforceRequestID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DepartmentCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Section)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RequiredPosition)
                </td>
                
            </tr>
        }
    </tbody>

</table>

更新后仍有问题的代码

@model IEnumerable<HR.WorkforceRequisition.Models.WorkforceRequest>

@{
    ViewBag.Title = "Pending Requests";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Pending Requests</h2>
<hr />
@if (!string.IsNullOrWhiteSpace(ViewBag.msg))
{
    <div class="alert alert-success">
        @ViewBag.msg
    </div>
}
@if (!string.IsNullOrWhiteSpace(ViewBag.errorMsg))
{
    <div class="alert alert-danger">
        @ViewBag.errorMsg
    </div>
}
@if (Session[BLL.Common.SessionKeys.RoleCode].ToString() == "REC" || Session[BLL.Common.SessionKeys.RoleCode].ToString() == "PLNG")
{
    <th>
        <select class="form-control" id="statusselect" >
            @*<option>Select Status</option>*@
            <option value="1">Pending Request</option>
            <option value="2">All requests </option>
        </select>
    </th>
}
<table id="dtbl" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.WorkforceRequestID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Section)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RequiredPosition)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.JobTitle)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportingTo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NationalityCategory)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.StatusRemark)
            </th>
            <th>
                Requestor
            </th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.ActionLink("Details", "Details", new { id = item.WorkforceRequestID })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.WorkforceRequestID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DepartmentCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Section)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RequiredPosition)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.JobTitle)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReportingTo)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.NationalityCategory)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StatusRemark)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreatedByName)
                </td>
            </tr>
        }
    </tbody>

</table>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

   
@section scripts
    {
    <script>
        $(document).ready(function () {
            $("#statusselect").change(function () {
                var valueofDropDown = $("#statusselect").val();
                console.log(valueofDropDown);
                var url = @Url.Action("GetSelectedDropDownChanged", "WorkforceRequests");
                var dataToSend = { selectedValue: valueofDropDown }

                $.ajax({
                    url: url,
                    data: dataToSend,
                    type: 'GET',
                    success: function (dataReceived) {
                        //update control on View
                        var receivedValue = dataReceived.myResult;
                        $('YourControlIDToUpdate').val(receivedValue);
                    }
                })
            });
    }
    </script>
}

问题排查与修复步骤

1. 修复JS语法错误

补充缺失的代码闭合：$(document).ready函数块末尾缺少});，导致JS无法正常解析。
URL添加引号：var url = @Url.Action(...)需用单引号包裹，否则生成无效JS代码，修改为：
```
var url = '@Url.Action("GetSelectedDropDownChanged", "WorkforceRequests")';
```

2. 移除重复jQuery引用

同时引入jQuery 1.9.1和2.0.0会导致冲突，保留一个版本即可，比如删除1.9.1的引用：

<!-- 移除该行 -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

3. 修正下拉框DOM结构

下拉框当前放在独立的<th>标签中，不在表格的<tr>内，导致DOM结构异常，将其移至表格表头行：

<table id="dtbl" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            @if (Session[BLL.Common.SessionKeys.RoleCode].ToString() == "REC" || Session[BLL.Common.SessionKeys.RoleCode].ToString() == "PLNG")
            {
                <th>
                    <select class="form-control" id="statusselect" >
                        <option value="1">Pending Request</option>
                        <option value="2">All requests </option>
                    </select>
                </th>
            }
            <th></th>
            <!-- 其他表头列 -->
        </tr>
    </thead>
    <!-- 表格内容 -->
</table>

4. 实现表格数据更新逻辑

原代码未针对表格做更新处理，需动态生成表格行：

success: function (dataReceived) {
    var tableBody = $('#dtbl tbody');
    tableBody.empty(); // 清空原有内容
    // 遍历返回数据生成行
    $.each(dataReceived.myResult, function(index, item) {
        var row = '<tr>' +
            '<td><a href="/WorkforceRequests/Details/' + item.WorkforceRequestID + '">Details</a></td>' +
            '<td>' + item.WorkforceRequestID + '</td>' +
            '<td>' + item.DepartmentCode + '</td>' +
            '<td>' + item.Section + '</td>' +
            '<td>' + item.RequiredPosition + '</td>' +
            '<td>' + item.JobTitle + '</td>' +
            '<td>' + item.ReportingTo + '</td>' +
            '<td>' + item.NationalityCategory + '</td>' +
            '<td>' + item.StatusRemark + '</td>' +
            '<td>' + item.CreatedByName + '</td>' +
            '</tr>';
        tableBody.append(row);
    });
}

5. 调试请求错误

在AJAX中添加错误回调，方便排查请求失败原因：

error: function(xhr, status, error) {
    console.log("请求错误: " + error);
}

修复后的完整JS代码

@section scripts
{
    <script>
        $(document).ready(function () {
            $("#statusselect").change(function () {
                var valueofDropDown = $(this).val();
                console.log(valueofDropDown);
                var url = '@Url.Action("GetSelectedDropDownChanged", "WorkforceRequests")';
                var dataToSend = { selectedValue: valueofDropDown }

                $.ajax({
                    url: url,
                    data: dataToSend,
                    type: 'GET',
                    success: function (dataReceived) {
                        var tableBody = $('#dtbl tbody');
                        tableBody.empty();
                        $.each(dataReceived.myResult, function(index, item) {
                            var row = '<tr>' +
                                '<td><a href="/WorkforceRequests/Details/' + item.WorkforceRequestID + '">Details</a></td>' +
                                '<td>' + item.WorkforceRequestID + '</td>' +
                                '<td>' + item.DepartmentCode + '</td>' +
                                '<td>' + item.Section + '</td>' +
                                '<td>' + item.RequiredPosition + '</td>' +
                                '<td>' + item.JobTitle + '</td>' +
                                '<td>' + item.ReportingTo + '</td>' +
                                '<td>' + item.NationalityCategory + '</td>' +
                                '<td>' + item.StatusRemark + '</td>' +
                                '<td>' + item.CreatedByName + '</td>' +
                                '</tr>';
                            tableBody.append(row);
                        });
                    },
                    error: function(xhr, status, error) {
                        console.log("请求错误: " + error);
                    }
                })
            });
        });
    </script>
}

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

.NET MVC下拉框值变更时无法触发Ajax调用问题排查

问题概述 #

初始问题代码 #

前端下拉框 #

初始JS代码 #

后端控制器方法 #

表格代码 #

更新后仍有问题的代码 #

问题排查与修复步骤 #

1. 修复JS语法错误 #

2. 移除重复jQuery引用 #

3. 修正下拉框DOM结构 #

4. 实现表格数据更新逻辑 #

5. 调试请求错误 #

修复后的完整JS代码 #