简体   繁体   中英

Posting data to MVC Controller using AngularJS

I have a simple html form with 2 textboxes and a button as following:

<div class="container" ng-controller="GetStudentController">
        <div class="form-group" style="padding-bottom:40px;">
            <h2 style="text-align:center;">Index</h2>
            <input id="Text1" class="form-group form-control" ng-model="ime" type="text" />


            <input id="Text1" class="form-group form-control" ng-model="prezime" type="text" />

            <input type="button" style="float:right;" class="form-group btn btn-primary" ng-click="snimi(ime,prezime)" value="Snimi" />
        </div>
</div>

And this is my AngularJS code:

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

app.service("GetStudentsService", function ($http) {
    this.getData = function ()
    {
        return $http({
            metod: "GET",
            url: "/Home/GetStudent"
        }).success(function (data) {
            return data;
        }).error(function () {
            alert("error");
            return null;
        });
    }
    this.PostData = function (data)
    {
        $http.post("/Home/SnimiStudenta",data)    
        .success(function () {
            getData();
        }).error(function (response) {
            alert(response);
        });
    }
});
app.controller("GetStudentController", function ($scope, GetStudentsService) {
    $scope.data = null;
    GetStudentsService.getData().then(function (response) {
        $scope.data = response.data;
    });
    $scope.snimi = function (ime, prezime) {
        var data = $.param({
            fName: ime,
            lName: prezime
        });
        GetStudentsService.PostData(data);
    };

});

And this is the action responsible for saving the record to the DB:

 [HttpPost]
        public void SnimiStudenta(// I would like to pass an Student object here)
        {
            Student s = new Student();
            s.Ime = "1";
            s.Prezime = "2";
            Connection.dc.Students.Add(s);
            Connection.dc.SaveChanges();
        }

I have a few questions:

  • How can I mark my values from my textboxes and pass them as an Student object into my action
  • How can I bind the table upon saving the new record into the DB. As you can see I'm calling the function getData(); but it says its undefined...

Can someone help me out with this please?

Thanks!

You have to build a js object which looks similar to your C# class (In terms of the property name) which you use as the parameter for your action method, and post the js object

$scope.snimi = function (ime, prezime) {
    var data = { Ime: ime, Prezime: prezime};
    GetStudentsService.PostData(data);
};

And your action method,

[HttpPost]
public void SnimiStudenta(Student s)
{
    Connection.dc.Students.Add(s);
    Connection.dc.SaveChanges();
}

As far as why you get an "undefined" error when you call getData() , it is not because getData is undefined, but because getData returns a promise containing just the data, not the whole response. So change:

 GetStudentsService.getData().then(function (response) {
        $scope.data = response.data;
 });

to:

GetStudentsService.getData().then(function (data) {
        $scope.data = data;
 });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM