Posting data to MVC Controller using AngularJS

Question

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!

Shyju · Accepted Answer · 2016-02-20 20:24:43Z

2

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();
}

answered Feb 20, 2016 at 20:24

Shyju

220k106 gold badges420 silver badges498 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

perkes456 Over a year ago

Thanks that part worked :) But how to bind the table (refresh it) when data is posted and saved to the db?? .success(function () { getData();

Shyju Over a year ago

You can even return some response (some JSON data which indicates the action was successful) and upon checking the response, you can use the js object you posted to update your UI. or you can just make a new GET call (like you are doing now) and get data.

perkes456 Over a year ago

Can you show me an example of what you ment please ? :) do you mean like $http.get(url); ?? :)

David Deutsch · Accepted Answer · 2016-02-20 20:41:08Z

0

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;
 });

answered Feb 20, 2016 at 20:41

David Deutsch

19.3k5 gold badges49 silver badges55 bronze badges

1 Comment

perkes456 Over a year ago

Okay but how to bind the table (refresh it) when data is posted and saved to the db?? .success(function () { getData();

Collectives™ on Stack Overflow

Posting data to MVC Controller using AngularJS

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related