Ajax请求中ViewBag传值失效及前端下拉数据处理错误求助

错误原因分析 #

1. 后台手动将商品列表序列化为JSON字符串返回，导致前端拿到的data.items是字符串类型，而非数组，直接遍历会触发类型错误
2. 前端循环中dropdownOptions每次被重新赋值为单元素数组，无法累积所有选项
3. 循环条件错误：使用i < data.items而非数组长度判断
4. 字段大小写不匹配：后台返回的字段是Id/Text（大写开头），前端误用id/text导致取不到值

修正方案 #

第一步：优化后台代码（可选但更规范）

无需手动序列化对象，JsonResult会自动处理序列化逻辑，同时简化重复的ToList()调用：

public JsonResult AutocompleteSupplierFromName(int SupplierID) 
{
  var Supplier = db.Suppliers.Where(x => x.ID == SupplierID).ToList();

  if (Supplier.Count() == 0) {
    return Json(new { Success = false });
  } else {
    DropDownJasonData data = new DropDownJasonData();
    data.Results = GetSupplierItem(SupplierID);
    data.Pagination = new Pagination { More = true };

    // 直接返回对象列表，去掉手动序列化步骤
    return Json(new {
      Success = true,
      items = data.Results,
      supName = Supplier.First().Supplier_Name,
      supID = Supplier.First().ID,
      supAddress01 = Supplier.First().Supplier_Address_Line01,
      supAddress02 = Supplier.First().Supplier_Address_Line02,
      supContact = Supplier.First().ContactNumber
    }, JsonRequestBehavior.AllowGet);
  }
}

private List<Result> GetSupplierItem(int SupID) 
{
  List<SelectListItem> Items = (from i in db.Items 
                                where i.Supplier_Id == SupID && i.Status == true 
                                select new SelectListItem {
                                  Text = i.ItemName_Number, 
                                  Value = i.ID.ToString()
                                }).ToList();

  List<Result> dataList = new List<Result>();
  if (Items.Count != 0) {
    foreach(var record in Items) {
      dataList.Add(new Result {
        Text = record.Text, 
        Id = int.Parse(record.Value)
      });
    }
  }
  return dataList;
}

第二步：修正前端代码

处理数组类型的items，修复循环逻辑和字段匹配问题：

function getSupDt(supID) {
    try {
        $.ajax({
            url: rootDir + 'Ajax/AutocompleteSupplierFromName',
            type: 'POST',
            dataType: 'json',
            cache: false,
            async: false,
            data: { SupplierID: supID },
            success: function (data) {
                if (data.Success == true) {
                    // 填充供应商基础信息
                    document.getElementById('AddressLine01').value = data.supAddress01;
                    document.getElementById('AddressLine02').value = data.supAddress02;
                    document.getElementById('ContactNumber').value = data.supContact;
                    document.getElementById('Supplier_Name').value = data.supName;
                    $(".SupplierIDClass").val(data.supID);

                    // 处理商品下拉选项
                    var dropdownOptions = [];
                    // 遍历数组，注意字段大小写匹配后台的Id/Text
                    for (var i = 0; i < data.items.length; i++) {
                        dropdownOptions.push({
                            value: data.items[i].Id,
                            text: data.items[i].Text
                        });
                    }
                    console.log(dropdownOptions);

                    // 可选：将选项插入到目标下拉框（示例）
                    // var $itemDropdown = $('#ItemDropdown');
                    // $itemDropdown.empty();
                    // dropdownOptions.forEach(opt => {
                    //     $itemDropdown.append($('<option>').val(opt.value).text(opt.text));
                    // });
                } else {
                    alert('未找到指定供应商');
                }
            },
            // 添加错误处理，方便调试
            error: function(xhr, status, err) {
                console.error('请求失败:', err);
            }
        });
    } catch (e) {
        console.error('代码执行出错:', e);
    }
}

若无法修改后台的兼容方案

如果必须保留后台手动序列化的逻辑，前端需要先将JSON字符串解析为数组：

// 在success函数中处理items前添加解析步骤
var itemsArray = JSON.parse(data.items);
var dropdownOptions = [];
for (var i = 0; i < itemsArray.length; i++) {
    dropdownOptions.push({
        value: itemsArray[i].Id,
        text: itemsArray[i].Text
    });
}

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