使用 angularjs 将 NULL 数据发布到 asp.net 核心控制器

Question

我正在将数据从 angularjs 发布到 .net 核心控制器，但我得到的是空值

学生控制器

[HttpPost]
        public JsonResult AddStudent(Student stu)
        {
            if (stu != null)
            {

                    db.Students.Add(stu);
                    db.SaveChanges();
                    return Json(stu);

            }
            else
            {
                return Json("Some Error Occured");
            }
        }

模块.js

var myApp = angular.module('myApp', []);

Service.js

myApp.service("myService", function ($http) {

    //get All Eployee



    // Add Employee
    this.AddEmp = function (Employee) {
        var response = $http({
            method: 'post',
            url: 'Employee/AddStudent/',
            data: JSON.stringify(Employee),
            dataType: 'json'

        });
        console.log(JSON.stringify(Employee));
        return response;
    }


});

Controller.js

myApp.controller("myCntrl", function ($scope, myService) {
    $scope.divEmployee = false;
    GetAllEmployee();
    //To Get All Records 
    function GetAllEmployee() {

        var getData = myService.getEmployees();

        getData.then(function (emp) {
            $scope.employees = emp.data;
        }, function () {
            alert('Error in getting records');
        });
    }



    $scope.AddUpdateEmployee = function () {

        var Employee = {
            Name: $scope.employeeName,
            Email: $scope.employeeAddress,
            Age: $scope.employeeEmail
        };
        console.log(Employee);
        var getAction = $scope.Action;

        if (getAction == "Update") {
            Employee.Id = $scope.employeeId;
            var getData = myService.updateEmp(Employee);
            getData.then(function (msg) {
                GetAllEmployee();

                $scope.divEmployee = false;
            }, function () {
                alert('Error in updating record');
            });
        } else {
            var getData = myService.AddEmp(Employee);
            getData.then(function (msg) {
                GetAllEmployee();
                alert(msg.data);
                $scope.divEmployee = false;
            }, function () {
                alert('Error in adding record');
            });
        }
    }

    $scope.AddEmployeeDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divEmployee = true;
    }

    //$scope.deleteEmployee = function (employee) {
    //    var getData = myService.DeleteEmp(employee.Id);
    //    getData.then(function (msg) {
    //        GetAllEmployee();
    //        alert('Employee Deleted');
    //    }, function () {
    //        alert('Error in Deleting Record');
    //    });
    //}

    function ClearFields() {
        $scope.employeeId = "";
        $scope.employeeName = "";
        $scope.employeeEmail = "";
        $scope.employeeAdress = "";
    }
});

索引.cshtml

<div ng-controller="myCntrl">

    <h1> Employee Details Page</h1>

    <br />

    <input type="button" class="btnAdd" value=" Add Employee" ng-click="AddEmployeeDiv()" />

    <div class="divList">
        <p class="divHead">Employee List</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td><b>ID</b></td>
                <td><b>Name</b></td>
                <td><b>Email</b></td>
                <td><b>Age</b></td>
                <td><b>Actions</b></td>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>
                    {{employee.id}}
                </td>
                <td>
                    {{employee.StudentName}}
                </td>
                <td>
                    {{employee.StudnetAddress}}
                </td>
                <td>
                    {{employee.StudentEmail}}
                </td>
                <td>
                    <span ng-click="editEmployee(employee)" class="btnAdd">Edit</span>
                    <span ng-click="deleteEmployee(employee)" class="btnRed">Delete</span>
                </td>
            </tr>
        </table>
    </div>

    <div ng-show="divEmployee">
        <p class="divHead">{{Action}} Employee</p>
        <table>
            <tr>
                <td><b>Id</b></td>
                <td>
                    <input type="text" disabled="disabled" ng-model="employeeId" />
                </td>
            </tr>
            <tr>
                <td><b>Name</b></td>
                <td>
                    <input type="text" ng-model="employeeName" />
                </td>
            </tr>
            <tr>
                <td><b>Email</b></td>
                <td>
                    <input type="text" ng-model="employeeAddress" />
                </td>
            </tr>
            <tr>
                <td><b>Age</b></td>
                <td>
                    <input type="text" ng-model="employeeEmail" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="btnAdd" value="Save" ng-click="AddUpdateEmployee()" />
                </td>
            </tr>
        </table>
    </div>
</div>
@*New record Modal addition..*@
@section scripts{

<script src="~/lib/angular/Module.js"></script>
<script src="~/lib/angular/Service.js"></script>
<script src="~/lib/angular/Controller.js"></script>

}

我只是想让你检查我的 POST 功能，我试图检查 console.log 以及它工作正常我正在获取数据但是当我检查 asp.net 核心时我没有获取数据。

Answer 1

您正在尝试从转发器传递值，您需要将其包装在现有对象Employees中，而不是将其作为单个值传递

Answer 2

您需要将 [FromBody] 添加到您的控制器，如下所示：

[HttpPost] public JsonResult AddStudent([FromBody] Student stu)  

以上是所谓的模型绑定示例。
模型绑定是 MVC 管道获取原始 HTTP 请求并将其转换为控制器上的操作方法调用的参数的过程。

您还需要在表单的输入字段中添加名称属性，如下所示：

name="employeeName"

name="employeeAddress"

name="employeeEmail"

控制器将读取名称属性并将输入绑定到模型中的相应属性。