AngularJS中JSON数组绑定至第二个HTTP GET请求的问题排查

看起来你遇到的核心问题是前后端参数不匹配，加上后端代码里的硬编码错误，导致第二个GET请求无法正常工作。咱们一步步拆解问题：

1. 核心错误点 #

后端参数类型不匹配 #

你的C#控制器方法GetDataSource接收的是int id（对应枚举的数值），但前端传递的是字符串类型的数据源名称（比如"Kpi"、"Loss events"），ASP.NET没办法自动把字符串转成整数，直接导致参数绑定失败，请求报错。

后端硬编码覆盖参数 #

你在控制器里写了这段代码：

var type = (DataSourceType)id; 
var o = _dashboarBusiness.GetDataSource(type = DataSourceType.KRI);

这里的type = DataSourceType.KRI是赋值操作，不管传入的id是什么，最终都会用KRI类型去获取数据，完全忽略了前端传递的参数，逻辑上就错了。

前端字符串与枚举名称不匹配 #

前端拿到的datasource是带空格的字符串（比如"Loss events"），但你的枚举名称是LOSSEVENTS（无空格、全大写），就算后端改接收字符串，也没法直接映射到枚举。

2. 解决方案 #

下面给你两种可行的修改方案，选一种适合你的业务场景：

方案一：后端接收字符串参数，自动映射到枚举 #

修改控制器方法，让它接收字符串类型的datasource参数，先把字符串转换成匹配枚举的格式，再调用业务逻辑：

[HttpGet]
public string GetDataSource(string datasource) 
{
    // 把前端传的字符串标准化：去掉空格、转大写，匹配枚举名称
    var normalizedDatasource = datasource.Replace(" ", "").ToUpper();
    
    // 尝试转换成枚举
    if (Enum.TryParse<DataSourceType>(normalizedDatasource, out var dataSourceType))
    {
        // 注意：这里不要硬编码KRI，用转换后的枚举值
        var data = _dashboardBusiness.GetDataSource(dataSourceType); 
        return Newtonsoft.Json.JsonConvert.SerializeObject(new { datasource = data });
    }
    
    // 处理不合法的数据源名称，返回错误信息
    return Newtonsoft.Json.JsonConvert.SerializeObject(new { error = "Invalid datasource name" });
}

前端代码不需要改参数传递部分，保持原来的params: { datasource: datasource }即可，因为现在后端参数名和前端一致了。

方案二：前端传递枚举对应的整数ID #

这种方案需要后端在返回Dashboard/GetDashboard时，给每个Widget加上枚举对应的ID字段，比如datasourceId：

修改后的JSON返回示例：

{ 
"Id":1, 
"UserId":2336276, 
"Name":"Data", 
"Widgets":[ 
{ "Id":0, "description":"Test1", "datasource":"Kri", "datasourceId":5, "charttype":"Bar", "x":0, "y":0, "width":3, "height":2 }, 
{ "Id":0, "description":"Test2", "datasource":"Kpi", "datasourceId":5, "charttype":"Heatmap", "x":3, "y":0, "width":3, "height":2 }, 
{ "Id":0, "description":"Test3", "datasource":"Loss events", "datasourceId":4, "charttype":"Pie", "x":6, "y":0, "width":3, "height":2 }, 
{ "Id":0, "description":"Test4", "datasource":"Loss events", "datasourceId":4, "charttype":"Area", "x":9, "y":0, "width":3, "height":2 } 
] 
}

然后前端获取这个ID传递给后端：

function activate() { 
    $http({ method: 'GET', url: 'Dashboard/GetDashboard' }).then(function successCallback(response) { 
        var dashboard = $scope.dashboard = response.data; // 变量名更清晰，避免混淆
        var datasourceId = dashboard.Widgets[1].datasourceId; // 获取枚举ID
        console.log(datasourceId); 
        
        $http({ 
            url: 'Dashboard/GetDataSource/', 
            params: { id: datasourceId }, // 传递id参数，对应后端的int id
            method: 'GET' 
        }).then(function succesCallback(response) { 
            $scope.datasource = response.data.datasource; 
        }); 
    }, function errorCallback(response) { 
        console.log(response); 
    }); 
}

同时修正后端的硬编码问题：

[HttpGet]
public string GetDataSource(int id) { 
    // 先验证id是否属于枚举的有效值
    if (!Enum.IsDefined(typeof(DataSourceType), id))
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(new { error = "Invalid datasource id" });
    }
    
    var type = (DataSourceType)id; 
    var data = _dashboardBusiness.GetDataSource(type); // 使用传入的枚举值
    return Newtonsoft.Json.JsonConvert.SerializeObject(new { datasource = data });
}

3. 额外小建议 #

• 前端代码里var id = $scope.dashboard = response.data;的变量名id容易混淆，改成dashboard更直观，避免和Widget的Id搞混。
• 后端的_dashboarBusiness看起来是拼写错误，应该是_dashboardBusiness，记得修正避免编译错误。

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