AngularJS与ASP.NET MVC数据插入为Null问题求助

我来帮你排查下数据插入为Null的问题，主要有几个关键的地方需要修正：

1. ASP.NET MVC控制器缺少[FromBody]特性 #

当你通过POST请求发送JSON数据到MVC控制器时，必须在参数上添加[FromBody]特性，否则框架无法正确解析请求体中的JSON数据。同时记得加上[HttpPost]明确接收POST请求：

[HttpPost]
public string Insert_Employee([FromBody] User User)
{
    if (User != null)
    {
        using (Database1Entities Obj = new Database1Entities())
        {
            Obj.Users.Add(User);
            Obj.SaveChanges();
            return "Employee Added Successfully";
        }
    }
    else
    {
        return "Employee Not Inserted! Try Again";
    }
}

2. AngularJS的$http请求配置错误 #

你的请求缺少Content-Type请求头，服务器无法识别请求体是JSON格式；另外AngularJS会自动序列化JavaScript对象，不需要手动调用JSON.stringify()。修改请求代码：

$http({
    method: "POST",
    url: "http://localhost:2776/Account/Insert_Employee",
    headers: { 'Content-Type': 'application/json' }, // 必须添加这个头
    data: $scope.User // 直接传对象即可
}).then(function (response) {
    alert("inserted");
}, function(error) {
    // 新增错误处理，方便排查问题
    console.error("插入失败：", error);
    alert("插入失败，请查看控制台日志");
});

3. DOB字段绑定完全错误 #

你的三个日期下拉框（日/月/年）没有绑定到Angular的$scope属性，导致$scope.DOB始终为null。需要同时修改HTML和AngularJS代码：

修正HTML的下拉框绑定： #

<!-- 日 -->
<select class="form-control" id="day" ng-model="day">
    <option value="" disabled selected>Day</option>
    <!-- 保留原来的日期选项 -->
</select>

<!-- 月 -->
<select class="form-control" id="month" ng-model="month">
    <option value="" disabled selected>Month</option>
    <!-- 保留原来的月份选项 -->
</select>

<!-- 年 -->
<select class="form-control" id="year" ng-model="year">
    <option value="" disabled selected>Year</option>
    <!-- 保留原来的年份选项 -->
</select>

在AngularJS中拼接DOB： #

在InsertData方法里，把选中的日/月/年拼接成有效的日期对象（如果数据库是字符串类型，可以转成YYYY-MM-DD格式）：

$scope.InsertData = function () {
    var Action = document.getElementById("btnSave").getAttribute("value");
    if (Action == "Submit") {
        // 处理月份转换（因为Date对象的月份是0开始的）
        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        const monthIndex = monthNames.indexOf($scope.month);
        // 构造Date对象
        const dobDate = new Date($scope.year, monthIndex, $scope.day);

        // 构造完整的用户数据
        $scope.User = {
            Username: $scope.Username,
            Password: $scope.Password,
            Email: $scope.Email,
            Phone: $scope.Phone,
            DOB: dobDate // 如果数据库存字符串，改成 dobDate.toISOString().split('T')[0]
        };

        // 发送请求（用上面修正后的$http代码）
        $http({
            method: "POST",
            url: "http://localhost:2776/Account/Insert_Employee",
            headers: { 'Content-Type': 'application/json' },
            data: $scope.User
        }).then(function (response) {
            alert("inserted");
        }, function(error) {
            console.error("插入失败：", error);
            alert("插入失败，请查看控制台日志");
        });
    }
};

4. 额外检查点 #

• 确保你的User实体类属性名称和前端传递的完全一致（JSON是大小写敏感的，比如前端传Username，后端实体类也要是Username）。
• 打开浏览器开发者工具（F12），查看Network标签下的POST请求Payload，确认前端是否正确传递了数据，这能快速定位是前端传值还是后端接收的问题。

按照这些步骤修改后，应该就能解决数据插入为Null的问题了。

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