CODEWITHSUNDEEP
asp.net-mvcangularjs
Anonymous
Anonymous

Reputation: 1979

Angular $http post with ASP.NET MVC

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
}

Upvotes: 0

Views: 2094

Answers (2)

Julito Avellaneda
Julito Avellaneda

Reputation: 2385

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,

Upvotes: 1

Anil Sharma
Anil Sharma

Reputation: 2962

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: ''
}

Upvotes: 0

Related Questions