Angular $http post with ASP.NET MVC
Question
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
}
2 answers
solution1
1 ACCPTED 2015-08-15 16:49:30
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:
Regards,
solution2
0 2015-08-15 16:19:39
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: ''
}
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.