MVC级联下拉框调用GetStores接口返回500错误，无法加载数据

第一个下拉框正常工作，第二个下拉框无法从控制器获取数据。DeptID能正常传递到GetStores方法参数，但无法填充第二个下拉框，报错：Failed to load resource: the server responded with a status of 500 ()

相关代码 #

C#控制器代码 #

public ActionResult HistoryView()
{
  var model = new TemplateViewModel();
  model.Depts = _uow.Repository<Dept>().GetAll();

  ViewBag.listCompanies = new SelectList(_uow.Repository<Dept>().GetAll(),"DeptID","Dept_Name");

  return View(model);
}

public JsonResult GetStores( int DeptID)
{
  TemplateViewModel templateViewModel = new TemplateViewModel
  {
    Dept = _uow.Repository<Dept>().Get(x => x.DeptID == DeptID),
    Templates = _uow.Repository<Template>().GetAll().ToList()
  };
  return Json(templateViewModel, JsonRequestBehavior.AllowGet);
}

视图代码 #

<div style="background-color:azure; border-color:black; border:solid">
  <br />
  <div>
    <b>选择公司:</b>
  </div>
  <div>
    @Html.DropDownList("DeptID", (IEnumerable<SelectListItem>)ViewBag.listCompanies,String.Empty,  new {style = "width: 200px;"})
  </div>
  <br />
  <div>
    <b>选择门店</b>
    <div>
      @Html.DropDownList("TemplateID", new SelectList(string.Empty, "Value", "Text"), "--选择门店--", new { style = "width:200px;" } )
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    $("#DeptID").change(function() {
      $("TemplateID").empty();
      $.getJSON('/HistoryLog/getstores', { DeptID: $('#DeptID').val() }, function(data) {
        $.each(data, function () {
          $('#TemplateID').append('<option value=' + this.Value + '>' + this.Text + '</option>');
        });
      });
    });
  });
</script>

问题原因及修复方案 #

1. 服务器500错误核心原因 #

GetStores方法返回的是完整TemplateViewModel对象，包含关联实体（Dept、Templates），JSON序列化时容易出现循环引用错误；同时前端期望的是可直接遍历的下拉选项数组，而非复杂对象结构。

2. 前端代码错误 #

• 清空下拉框时选择器缺失#：$("TemplateID").empty(); 应改为$("#TemplateID").empty();
• 遍历逻辑错误：返回的data是ViewModel对象，需指定遍历data.Templates，且要匹配实体的字段名（而非假设的Value/Text）

3. 修复后的控制器代码 #

直接返回下拉所需的选项集合，避免序列化复杂对象：

public JsonResult GetStores(int DeptID)
{
    // 根据DeptID筛选关联的Templates（需根据实际实体关联逻辑调整Where条件）
    var templateOptions = _uow.Repository<Template>()
                        .GetAll()
                        .Where(t => t.DeptID == DeptID)
                        .Select(t => new SelectListItem
                        {
                            Value = t.TemplateID.ToString(),
                            Text = t.Template_Name // 替换为Template实体的名称字段
                        })
                        .ToList();
    return Json(templateOptions, JsonRequestBehavior.AllowGet);
}

4. 修复后的前端代码 #

<script>
  $(document).ready(function() {
    $("#DeptID").change(function() {
      var $templateDropdown = $("#TemplateID");
      // 重置下拉框默认选项
      $templateDropdown.empty().append('<option value="">--选择门店--</option>');
      
      var selectedDeptId = $(this).val();
      if (!selectedDeptId) return;

      $.getJSON('/HistoryLog/GetStores', { DeptID: selectedDeptId }, function(data) {
        $.each(data, function(index, item) {
          $templateDropdown.append('<option value="' + item.Value + '">' + item.Text + '</option>');
        });
      })
      // 增加错误捕获便于调试
      .fail(function(jqXHR) {
        console.error("加载门店数据失败，状态码：" + jqXHR.status);
      });
    });
  });
</script>

额外检查项 #

• 确认Template实体与Dept的关联字段（如DeptID外键）是否正确，筛选逻辑需匹配实际业务关系
• 验证路由地址/HistoryLog/GetStores是否与控制器名称（HistoryLogController）、动作方法名一致
• 可通过浏览器开发者工具的Network标签查看请求详情，确认返回的JSON结构是否符合预期

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