ASP.NET Core MVC：HTTP POST方法无法返回视图并更新页面

切换下拉列表选项时，控制器的POST方法已触发并完成数据处理，但页面无任何变化且未刷新，无法展示返回的新数据。

视图（View）代码 #

@Html.DropDownList("bolumler", null,  "lutfen bolum secin", 
                   new {@class = "form-control", 
                   @onchange="SelectedIndexChanged(this)"})

<script type="text/javascript">
    function SelectedIndexChanged(item) {
        var value = item.value;

        $.ajax({
            type: "POST",
            url: "@Url.Action("GoTo")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( value ),
            success: function (data) {
                alert(data);
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>        

控制器（Controller）代码 #

[HttpPost]
public async Task<IActionResult> GoTo([FromBody] string d)
{
    var personeller = await _iluPersonelService.getPersonelWithDepartment(d);

    List<SelectListItem> valuesForPersonel = (from x in personeller
                                              select new SelectListItem
                                                  {
                                                      Text = x.Name,
                                                  }).ToList();

    ViewBag.personeller = valuesForPersonel;

    return View();
}

问题核心在于：AJAX请求不会自动刷新页面或替换视图内容，且当前控制器返回的完整View与前端AJAX预期的JSON数据类型不匹配，导致无法正确渲染。以下两种方案可解决：

方案一：返回JSON数据，前端手动更新DOM #

1. 修改控制器返回JSON #

[HttpPost]
public async Task<IActionResult> GoTo([FromBody] string d)
{
    var personeller = await _iluPersonelService.getPersonelWithDepartment(d);
    // 直接返回人员名称列表的JSON
    return Json(personeller.Select(x => x.Name));
}

2. 前端AJAX回调更新页面 #

假设页面已存在用于展示人员的下拉框（id="personeller"），修改JS代码：

function SelectedIndexChanged(item) {
    var value = item.value;

    $.ajax({
        type: "POST",
        url: "@Url.Action("GoTo")",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(value),
        success: function (personNames) {
            var personSelect = $('#personeller');
            // 清空原有选项
            personSelect.empty();
            // 循环添加新选项
            personNames.forEach(name => {
                personSelect.append($('<option>', { text: name }));
            });
        },
        error: function (errMsg) {
            alert(errMsg.responseText);
        }
    });
}

3. 页面添加人员下拉框 #

<select id="personeller" class="form-control"></select>

方案二：返回部分视图（Partial View），前端替换指定区域 #

适合需要渲染复杂HTML结构的场景：

1. 创建部分视图_PersonelList.cshtml #

@model List<SelectListItem>
@Html.DropDownList("personeller", Model, "Lütfen personel seçin", new { @class = "form-control" })

2. 修改控制器返回部分视图 #

[HttpPost]
public async Task<IActionResult> GoTo([FromBody] string d)
{
    var personeller = await _iluPersonelService.getPersonelWithDepartment(d);
    List<SelectListItem> valuesForPersonel = personeller.Select(x => new SelectListItem { Text = x.Name }).ToList();
    // 返回部分视图
    return PartialView("_PersonelList", valuesForPersonel);
}

3. 前端AJAX替换容器内容 #

function SelectedIndexChanged(item) {
    var value = item.value;

    $.ajax({
        type: "POST",
        url: "@Url.Action("GoTo")",
        dataType: "html", // 改为接收HTML类型
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(value),
        success: function (html) {
            // 将返回的HTML插入到指定容器中
            $('#personelContainer').html(html);
        },
        error: function (errMsg) {
            alert(errMsg.responseText);
        }
    });
}

4. 页面添加容器 #

<div id="personelContainer"></div>

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