current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I'm trying to put together my first CRUD app using AngularJS and Asp.Net Web Api. I have setup the controller with a newMember object:

 $scope.newMember = {};

And then call the insert in the factory method as: 

dataService.insertMember($scope.newMember);

This calls the method in the dataService:

 var _insertMember = function(member) {
    return $http.post("/api/clubmembers/", member);
};

which fires the Web Api Post method

public HttpResponseMessage Post([FromBody]PersonViewModel member)
    {
        //if (_repo.AddClubMember(member) && _repo.Save())
        if (_repo.AddClubMember(member) && _repo.Save())
        {
            return Request.CreateResponse(HttpStatusCode.Created, member);
        }
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }

I have checked the data in the Angular part of the app and the correct data is passed via $scope.newMember, but when it reaches the Web Api Post method the member parameter is always Null.

If I modify the controller method to the following it passes the data to the Post method as expected:

var testData2 = {
        FirstName: $scope.newMember.FirstName,
        LastName: $scope.newMember.LastName
    };
    var a = 1;
    dataService.insertMember(testData2);

Is it possible to pass $scope.newMember as the parameter or do I have to fill in the details as of the amended code?

Thanks

Mark

share|improve this question

2 Answers 2

up vote 0 down vote accepted

Check your code carefully, I would say (based on your experience described in the question) there will be some typo.

Call with explicit {} - empty object

If you will call your service like this:

dataService.insertMember({}); // just created empty object

you will get instantiated object on your API Post method PersonViewModel member

Call with explicit null or undefined

but in case, that you will call one of these

dataService.insertMember(null);
dataService.insertMember(undefined);

the API Post method will be provided with NULL.

typo (incorrect property name), i.e. undefined

And what that means? that you most likely, somewhere in the call chain used something like this

$scope.newMember ...
...
dataService.insertMember($scope.newMemberXXX);

where newMemberXXX represents any undefined property, resulting in undefined to be passed

share|improve this answer
    
Thanks, but I've gone through the code and all properties match –  user918064 May 20 '14 at 10:30
    
Have just noticed I had a property and function called $scope.newMember –  user918064 May 20 '14 at 11:39
    
Yes that would be the issue. The point is, that the $scope.newMember in fact is not what we expect... –  Radim Köhler May 20 '14 at 11:40
    
Doh - Thanks for the help –  user918064 May 20 '14 at 11:40
    
Great to see that you manage to make it running. Enjoy combination web api and angular, good choice ;) –  Radim Köhler May 20 '14 at 11:41
up vote 0 down vote

If you add FirstName and LastName properties to newMember it should work fine:

$scope.newMember = {};
$scope.newMember.FirstName = "First Name";
$scope.newMember.LastName = "Last Name";

dataService.insertMember($scope.newMember);

Thing is, $scope.newMember has to match the properties and structure of PersonViewModel for the Web Api to be able to match the two types.

Let us know if this works.

share|improve this answer
    
Hi, tried this but the same error. Only way I've found around is to set the values at Post time –  user918064 May 20 '14 at 10:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.