ASP.NET MVC视图未更新模型：下拉框选中值无法同步到Display控件

你的问题核心很明确：AJAX请求成功拿到了更新后的视图，但你没有把返回的内容同步到当前页面的DOM中，所以浏览器显示的还是初始的item1。AJAX本身只是异步获取数据，不会自动帮你刷新页面，必须手动处理响应来更新DOM。

下面给你两种可行的解决方案，从简单实现到高效优化：

方案一：复用返回的视图HTML更新页面 #

首先给你的DisplayFor控件套一个容器，方便后续定位替换：

@model MyModel
@Html.DropDownListFor(model => model.SelectedItem, new SelectList(@Model.Items), new { onchange = "SelectedItemChanged(this);" })
<!-- 新增容器，用于定位更新 -->
<div id="selectedItemDisplay">
    @Html.DisplayFor(model => model.SelectedItem)
</div>

然后修改你的AJAX脚本，在success回调里提取返回视图中的目标内容，替换到当前页面的容器中：

function SelectedItemChanged(selectObj) {
    const itemName = selectObj.value;
    $.ajax({
        type: 'POST',
        url: '@Url.Action("OnSelectedItemChanged","Home")',
        data: { 'itemName': itemName },
        success: function(response) {
            // 从返回的完整视图HTML中筛选出我们需要的display内容
            const newDisplayContent = $(response).find('#selectedItemDisplay').html();
            // 更新当前页面的容器内容
            $('#selectedItemDisplay').html(newDisplayContent);
        }
    });
}

方案二：只返回选中值（更高效） #

返回整个视图HTML有点冗余，其实我们只需要拿到选中的文本值就可以了。修改控制器返回JsonResult：

[HttpPost]
public JsonResult OnSelectedItemChanged(string itemName) {
    // 这里可以添加你需要的业务逻辑，比如验证、数据处理等
    return Json(new { selectedItem = itemName });
}

然后修改AJAX脚本，直接用返回的JSON数据更新DOM：

function SelectedItemChanged(selectObj) {
    const itemName = selectObj.value;
    $.ajax({
        type: 'POST',
        url: '@Url.Action("OnSelectedItemChanged","Home")',
        data: { 'itemName': itemName },
        dataType: 'json', // 指定接收JSON格式数据
        success: function(data) {
            // 直接更新display容器的文本内容
            $('#selectedItemDisplay').text(data.selectedItem);
        }
    });
}

额外说明 #

你的模型和控制器逻辑本身没有问题，控制器确实接收到了参数并生成了正确的视图，只是缺少了DOM更新的步骤。第二种方案更推荐，因为传输的数据量更小，响应速度更快。

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