ASP.NET Web应用中如何用@Html.DropDownList传选中值至分部视图

你的问题核心在于：当前代码仅在前端修改了id变量，但分部视图是服务器在页面加载时一次性渲染完成的，前端变量变化无法触发服务器重新生成分部视图内容。需要通过AJAX异步请求动态获取并更新分部视图，具体修改方案如下：

1. 修改PatientController，新增异步获取患者列表的Action #

using HospitalManagement.Models;
using System.Linq;
using System.Web.Mvc;

namespace HospitalManagement.Controllers
{
    public class PatientController : Controller
    {
        private PatientDbContext db = new PatientDbContext();
        private DoctorDbContext db1 = new DoctorDbContext();

        public ActionResult Data()
        {
            var viewModel = new ViewModel
            {
                Doctors = db1.doctors.ToList(),
                // 初始加载默认展示ID=1的医生患者（可根据需求调整为第一个医生）
                Patients = db.patients.Where(p => p.doctor_id == 1).ToList()
            };
            return View(viewModel);
        }

        // 新增：返回患者列表分部视图的接口
        public PartialViewResult PatientList(int doctorId)
        {
            var targetPatients = db.patients.Where(p => p.doctor_id == doctorId).ToList();
            return PartialView(targetPatients);
        }
    }
}

2. 修改Data.cshtml页面，实现AJAX动态更新 #

将分部视图放入容器中，通过下拉框切换事件触发AJAX请求，替换容器内容：

@{ 
    ViewBag.Title = "Data";
    var viewModel = Model as HospitalManagement.Models.ViewModel;
}

<h2>Patient's Data</h2>
@Html.DropDownList("DoctorsList", 
    new SelectList(viewModel.Doctors, "doctor_id", "doctor_name", viewModel.Doctors.FirstOrDefault()?.doctor_id),
    "请选择医生",
    new { @class = "btn btn-light dropdown-toggle mt-3 mb-3" })

<!-- 用容器包裹分部视图，方便AJAX替换内容 -->
<div id="patientListContainer">
    @Html.Partial("PatientList", viewModel.Patients)
</div>

<script>
    $(document).ready(function () {
        // 下拉框切换事件
        $('#DoctorsList').change(function () {
            var selectedId = $(this).val();
            if (selectedId) {
                $.ajax({
                    url: '@Url.Action("PatientList", "Patient")',
                    type: 'GET',
                    data: { doctorId: selectedId },
                    success: function (htmlContent) {
                        $('#patientListContainer').html(htmlContent);
                    },
                    error: function () {
                        $('#patientListContainer').html('<p>加载患者列表失败，请重试</p>');
                    }
                });
            } else {
                $('#patientListContainer').html('<p>请选择一位医生查看患者</p>');
            }
        });
    });
</script>

3. PatientList.cshtml分部视图无需修改 #

保持原有渲染逻辑即可，它仅负责接收患者列表并生成表格HTML。

额外优化建议 #

• 可以在AJAX请求过程中添加加载动画，提升用户体验
• 若医生列表为空，可在页面添加友好提示
• 确保doctor_id为数值类型，避免前端传递参数时出现类型不匹配问题

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