AngularJS结合ASP.NET Core MVC无法获取及提交数据问题求助

我来帮你一步步排查问题，你现在遇到的两个核心问题：前端无法加载客户记录、新增时后端接收不到参数，咱们逐个解决：

一、前端无法获取并显示客户记录的问题 #

你提到后端GetCustomers方法能拿到数据，但前端没显示，主要有两个可能的原因：

1. 后端Json返回配置限制 #

ASP.NET MVC出于安全考虑，默认会阻止JsonResult响应GET请求。你需要修改GetCustomers方法，加上JsonRequestBehavior.AllowGet参数来允许GET请求返回Json数据：

public JsonResult GetCustomers()
{
    var Customers = db.Query<Customer>("Select * from Customer");
    // 允许GET请求返回Json
    return Json(Customers, JsonRequestBehavior.AllowGet);
}

2. HTML结构的ng-repeat位置不规范 #

你当前把ng-repeat放在<tbody>标签上，会生成多个<tbody>（每条记录对应一个），虽然功能可能勉强生效，但不符合HTML语义，也可能导致渲染异常。建议把ng-repeat移到<tr>标签上：

<tbody>
<tr ng-repeat="m in Customers">
    <!-- 原有列内容 -->
</tr>
</tbody>

调试小技巧：打开浏览器开发者工具（F12）的Network标签，查看GET请求的响应内容，确认后端是否真的返回了客户数据。

二、新增时后端接收不到参数的问题 #

这个问题出在前端数据格式和后端参数绑定的匹配上，需要两处修改：

1. 前端POST请求的序列化方式错误 #

你现在手动拼接JSON字符串的方式容易出现格式错误（比如输入内容带引号会破坏JSON结构），应该直接传入JavaScript对象，让Angular自动处理序列化：

$scope.Add = function () {
    if (!$scope.Name || !$scope.Country) { // 简化空值判断
        return;
    }
    var post = $http({
        method: "POST",
        url: "/Customer/InsertCustomer",
        // 直接传入对象，Angular会自动序列化为标准JSON
        data: { name: $scope.Name, country: $scope.Country },
        headers: { "Content-Type": "application/json" }
    });
    post.success(function (data, status) {
        $scope.Customers.push(data);
    }).error(function (error) {
        console.log("新增失败：", error); // 新增错误日志便于排查
    });
    $scope.Name = "";
    $scope.Country = "";
};

2. 后端参数绑定需要指定来源 #

ASP.NET MVC默认不会从JSON请求体中直接绑定单个字符串参数，推荐创建一个匹配前端数据的模型类来接收参数（更可靠且便于扩展）：

// 新增一个视图模型类
public class CustomerAddModel
{
    public string Name { get; set; }
    public string Country { get; set; }
}

// 修改InsertCustomer方法
[HttpPost]
public JsonResult InsertCustomer([FromBody] CustomerAddModel model)
{
    Customer customer = new Customer();
    customer.Name = model.Name;
    customer.Country = model.Country;
    db.Save(customer);
    return Json(customer);
}

如果不想创建模型类，也可以给单个参数加上[FromBody]标记，但注意一个请求只能用一次[FromBody]，所以这种方式只适合单个参数的场景，不推荐用于多个参数的情况。

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