Posting NULL Data to asp.net core controller using angularjs

Question

i am posting data from angularjs to .net core controller, but i am getting null values

StudentController

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

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

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

Module.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 = "";
    }
});

Index.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>

}

I just want you to check my POST function, i tried to check console.log as well its working fine i am getting data but when i check in asp.net core i am not getting data.

Answer 1

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

Answer 2

You need to add [FromBody] to you controller, like this:

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

The above is an example of what's called model binding.
Model binding is the process where the MVC pipeline takes the raw HTTP request and converts that into the arguments for an action method invocation on a controller.

You also need to add name attributes to the input fields of your form, like this:

name="employeeName"

name="employeeAddress"

name="employeeEmail"

The controller will read the name attributes and bind the input to the corresponding properties in your model.