使用ASP.NET MVC的Angular $ http发布
[英]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. 我试图将2个字段（CustomerID和CompanyName）从我的视图传递到控制器中。 When I put a break point on my controller's action, both custID and Company name are null. 当我在控制器的动作上设置断点时，custID和公司名称均为空。 I'm sure whatever I'm missing is easy but I'm just not getting into Angular. 我敢肯定，我所缺少的都是容易的，但我只是没有进入Angular。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Thanks! 谢谢！
HTML 的HTML
<input type="text" class="form-control" ng-model="new.CustomerID" />
<input type="text" class="form-control" ng-model="new.CompanyName" />
Javascript Java脚本
$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# 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 的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 的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 C＃控制器
[HttpPost]
public void GetCustomer(int customerID, string customerName, string customerEmail)
{
//do something with values
}
2 个解决方案
解决方案1
1 已采纳 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: 我的意思是您的问题是因为Web api使用的绑定基于querystring，所以请更新您的代码，我举一个例子：
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: 和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, 问候，
解决方案2
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: ''
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.