使用Angularjs从Ajax调用在服务器代码处获得的值变为空

Question

I have built a MVC application to insert form data into DB. I used angularjs library with html5 & bootstrap.

Below is the some major lines in HTML. form tag:

 <form ng-app='MyData' ng-controller='DataController'>

Button ():

<input type="button" value="Submit" ng-click="addUser();" id="btnSubmitAddUsr" class="btn btn-success" />

Below is the ajax call using Jquery & angular js:

var myData = angular.module('MyData', []);
myData.controller("DataController", function ($scope, $http) {
     $scope.addUser = function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify($scope.usrFName, $scope.usrEmail, $scope.usrPhone, $scope.selectApp.id, $scope.usrRole),
                    url: '/Home/AddUser',
                    success: function (data, status) {
                        $scope.clear();
                    },
                    error: function (status) { }
                });
            };
 });

C# method:

[HttpPost]
public JsonResult AddUser(string usrFName, string usrEmail, string usrPhone, string usrApp, string usrRole)
    {
        var db = new SchedulerEntities();
        db.Users.Add(new User { Name = usrFName, Password = "testPwd", Email = usrEmail, Phone = usrPhone, ApplicationId = Convert.ToInt32(usrApp), RoleId = Convert.ToInt32(usrRole) });
        db.SaveChanges();
        return null;
    }

The above C# methods gets called; but the parameters shows null. Also when I check the $scope variables from browser; the form values shows correct there.

Please suggest.

Answer 1

You generally don't want to use $scope as your model and instead create an object for your model on the scope...you'll run into some other issues with prototype inheritance the way you are currently doing it. When you use ng-model, you should always have a '.' in the expression.

You should also use $http instead of $.ajax (it'll handle the serialization for you and run a digest cycle when the call completes).

var myData = angular.module('MyData', []);
myData.controller("DataController", function ($scope, $http) {
     $scope.form = {usrFName: '', usrEmail: '', usrApp: ''}; // initialize any other form variables 
     $scope.addUser = function () {
         $http.post('/Home/AddUser', $scope.form)
             .success(function(){$scope.clear();});
     };
 });