Home Posting NULL Data to asp.net core controller using angularjs
Reply: 2

Posting NULL Data to asp.net core controller using angularjs

Waqas Rauf
1#
Waqas Rauf Published in 2018-01-12 22:15:55Z

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.

Michael Henderson
2#
Michael Henderson Reply to 2018-01-14 21:23:39Z

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.

olpro123
3#
olpro123 Reply to 2018-01-13 07:07:34Z

You are trying to pass the values from repeater, you need to wrap it in existing object Employees, not pass it as single values

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.339421 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO