current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

What am I missing here? I'm trying to pass 2 fields(CustomerID and CompanyName) from my view into my controller. When I put a break point on my controller's action, both custID and Company name are null. I'm sure whatever I'm missing is easy but I'm just not getting into Angular. Any help would be greatly appreciated. Thanks!

HTML

<input type="text" class="form-control" ng-model="new.CustomerID" />
<input type="text" class="form-control" ng-model="new.CompanyName" />

Javascript

$scope.AddCustomer = function () {
    debugger;
    var urlPost = "/Home/SaveCustomer/";

    console.log($scope.new);
    alert(urlPost);
    $http({
        method: 'POST',
        url: urlPost,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },

        data: { custID: $scope.new.CustomerID, CompanyName: $scope.new.CompanyName }

    }).success(function() {
        alert('Update Successfully!');
    });

}

C#

[HttpPost]
public void SaveCustomer(string custID, string CompanyName)
{

}

EDIT

A few weeks after this was posted and an answer was accepted, I found an easier way to accomplish this. Here is a code sample:

HTML

 <input type="number" placeholder="CustomerID" ng-model="newCustomer.CustomerID" class="form-control" style="width: 130px" required/>
 <input type="text" placeholder="Customer Name" ng-model="newCustomer.CustomerName" class="form-control" style="width: 200px" required />
 <input type="text" placeholder="Email" ng-model="newCustomer.CustomerEmail" class="form-control" style="width: 200px" required />

JavaScript

$scope.newCustomer = { 
    CustomerID: '',
    CustomerName: '',
    CustomerEmail: ''
};
$scope.addCustomer = function () {
    $http.post("/Home/GetCustomer",
        {
            customerID: $scope.newCustomer.CustomerID,
            customerName: $scope.newCustomer.CustomerName,
            customerEmail: $scope.newCustomer.CustomerEmail
        }).error(function (responseData) {
            alert(responseData);
        })
    .success(function () {
        alert('Updated Successfully');
});

C# Controller

[HttpPost]
public void GetCustomer(int customerID, string customerName, string customerEmail)
{

    //do something with values
}
share|improve this question
    
$scope.new = { CustomerID: '', CompanyName: '', } – Mohan Singh Aug 15 '15 at 16:14
    
plnkr.co/edit/DUmAZp?p=preview – Mohan Singh Aug 15 '15 at 16:32
    
Can you please check the plunker and check console when click on add button – Mohan Singh Aug 15 '15 at 16:33
    
Hmmm..I just checked the console and it appears to be working as expected on plunker...I wonder what I could possible have wrong. – Anonymous Aug 15 '15 at 16:35
    
make your method httppost and action – ConvertToInt32 Aug 15 '15 at 16:38
up vote 1 down vote accepted

I mean your problem is because the binding that web api uses there is base on querystring, so please update your code, I do an example:

public class UsersController : ApiController
    {
        [HttpPost]
        [Route("Users/Save/{custID}/{CompanyName}")]
        public string Save(string custID, string CompanyName)
        {
            return string.Format("{0}-{1}",custID, CompanyName);
        }
    }

And the html:

<body ng-app="myApp">
<div ng-controller="myController">
    <h1>Demo</h1>
    <input type="button" value="Save" ng-click="AddCustomer()" />
</div>
<script src="~/Scripts/angular.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("myController", function($scope, $http) {
        $scope.new = {
            CustomerID: "CustId1",
            CompanyName: "Company 1"
        }

        $scope.AddCustomer = function () {
            var urlPost = "/Users/Save/" + $scope.new.CustomerID + "/" + $scope.new.CompanyName
            $http({
                method: 'POST',
                url: urlPost,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }

            }).success(function () {
                alert('Update Successfully!');
            });

        }
    });
</script>
</body>

And if I test:

enter image description here

Regards,

share|improve this answer
    
This solution is just nasty. – Phill Aug 15 '15 at 16:57
up vote 0 down vote

make these changes :

//either define parent object scope only
$scope.new  = {}  

//or if you want to define child object too . May be to show some default value . 
$scope.new = {
 CustomerID: '', //empty or may be some default value
 CompanyName: ''
}
share|improve this answer
    
I tried and they're still coming back as null :( – Anonymous Aug 15 '15 at 16: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.