ASP.Net MVC DropdownList选中项值无法在同一视图显示

核心问题是你发送AJAX请求后没有处理接口返回的响应结果，没有将返回内容更新到当前页面DOM中。后端虽然正确返回了填充好数据的视图，但前端直接丢弃了响应内容，页面自然不会展示对应数据。
同时代码里还有3个影响功能的错误：

• change事件绑定对象错误：你把事件绑在了id为cidd的span标签上，实际可触发选中变化的是id为custId的下拉框元素
• 开启了已被主流浏览器废弃的同步AJAX配置（async: "false"），会阻塞页面渲染线程
• AJAX请求时控制器返回了带布局页的完整视图，包含重复的html、head、script标签，直接渲染会出现DOM结构异常

第一步：拆分客户详情局部视图 #

新建名为_CustomerDetail.cshtml的局部视图，专门存放需要动态更新的客户详情内容：

@model PWBMS.WebUI_1.Viewmodels.CustomerViewModel
@if(Model != null)
{ 
   <span>@Model.ShortName</span>
   <!-- 后续需要展示的其他客户字段可直接追加在此处 -->
}

第二步：调整主Index视图结构 #

给详情展示区域加固定的占位容器，移除多余的span id配置：

@model PWBMS.WebUI_1.Viewmodels.CustomerViewModel 

<div class="row">
    <h3 class="col-md-3">
        <i class="glyphicon glyphicon-user"></i>
        <strong>
            &nbsp;&nbsp;&nbsp;Customer&nbsp;
            <span> 
                @Html.DropDownListFor(model => model.CustomerId, new SelectList(ViewBag.Customers, "CustomerId", "ShortName"), "Select Customers", htmlAttributes: new { @class = "form-control rtscustomtextboxmiddle", @id = "custId" })
            </span>
        </strong>
    </h3> 
</div>

<!-- 动态详情占位容器 -->
<div id="customerDetailBox">
    @if(Model != null)
    { 
        @Model.ShortName
    }
</div>

第三步：修改控制器逻辑 #

针对AJAX请求单独返回不带布局的局部视图，增加空值校验避免运行时报错：

public ActionResult Index(int? id)
{
    // 下拉列表数据源统一初始化，不用重复写
    ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
    if(id == null)
    {
        return View();
    }
    var customerInfo = db.Customers.SingleOrDefault(x => x.CustomerId == id);
    if(customerInfo == null)
    {
        if(Request.IsAjaxRequest())
        {
            return PartialView("_CustomerDetail", null);
        }
        return View();
    }
    CustomerViewModel cvm = new CustomerViewModel
    {
        CustomerId = customerInfo.CustomerId,
        ShortName = customerInfo.ShortName
    };
    // AJAX请求返回局部视图，普通请求返回完整视图
    if(Request.IsAjaxRequest())
    {
        return PartialView("_CustomerDetail", cvm);
    }
    return View(cvm);
}

第四步：修正jQuery事件逻辑 #

把事件绑定到正确的下拉框元素，去掉废弃的同步配置，在请求成功回调中把返回内容填充到占位容器：

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            // 事件直接绑定到下拉框元素
            $("#custId").change(function () {
                var selectedId = $(this).val();
                $.ajax({
                    url: "@Url.Action("Index", "Customer3")",
                    method: "get",
                    data: { id: selectedId },
                    success: function (response) {
                        // 将返回的局部视图内容插入到对应容器
                        $("#customerDetailBox").html(response);
                    },
                    error: function () {
                        alert("客户信息加载失败，请重试");
                    }
                });
            });
        });
    </script> 
}

你之前尝试局部视图时没有写AJAX的success回调，没有手动把接口返回的HTML片段插入到页面DOM中。AJAX是异步无刷新请求，浏览器不会自动把响应内容替换到当前页面，必须通过JS手动操作DOM完成内容更新。

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