asp.net - 使用 AngularJS 将数据从视图传递到 net-mvc 控制器
问题描述
public class Home
{
string CustEmail { get;set;}
string CustName { get; set;}
int id { get; set;}
}
模型
[HttpPost]
public void CreateCustomer(Home cust)
{
if (ModelState.IsValid)
{
}
}
控制器
angular.module('myFormApp', []).controller('CustomerController', function ($scope, $http, $location, $window) {
debugger;
$scope.cust = {};
$scope.message = '';
$scope.result = "color-default";
$scope.isViewLoading = false;
//get called when user submits the form
$scope.submitForm = function () {
$scope.isViewLoading = true;
console.log('Form is submitted with:', $scope.cust);
//$http service that send or receive data from the remote server
var cust = {
CustEmail: $scope.cust.CustEmail,
CustName: $scope.cust.CustName,
id: 1,
};
$http(
{
method: 'POST',
url: '/Home/CreateCustomer',
data: cust,
}).then(function (data, status, headers, config) {
$scope.errors = [];
if (data.success === true) {
$scope.cust = {};
$scope.message = 'Form data Submitted!';
$scope.result = "color-green";
$location.path(data.redirectUrl);
$window.location.reload();
}
else {
$scope.errors = data.errors;
}
})
$scope.isViewLoading = false;
}
}).config(function ($locationProvider) {
//default = 'false'
$locationProvider.html5Mode(true);
});
我在前端以正确的格式获取数据,并且回发调用也在工作,但我无法在 MVC 控制器中获得价值。我不知道我做错了什么。我已经尝试在控制器中使用单个项目然后它工作正常但我只希望它通过模型。
解决方案
Promise的.then
方法只公开一个值,而不是四个值。
$http(
{
method: 'POST',
url: '/Home/CreateCustomer',
data: cust,
̶}̶)̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
}).then(function (response) {
var data = response.data;
var status = response.status;
var headers = response.headers;
var config = response.config;
$scope.errors = [];
if (data.success === true) {
$scope.cust = {};
$scope.message = 'Form data Submitted!';
$scope.result = "color-green";
$location.path(data.redirectUrl);
$window.location.reload();
}
else {
$scope.errors = data.errors;
}
})
有关详细信息,请参阅
更新
.catch
您可以在控制台日志中添加一个块来记录任何错误:
$http(
{
method: 'POST',
url: '/Home/CreateCustomer',
data: cust,
̶}̶)̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶
}).then(function (response) {
var data = response.data;
var status = response.status;
var headers = response.headers;
var config = response.config;
$scope.errors = [];
if (data.success === true) {
$scope.cust = {};
$scope.message = 'Form data Submitted!';
$scope.result = "color-green";
$location.path(data.redirectUrl);
$window.location.reload();
}
else {
$scope.errors = data.errors;
}
console.log("OK:", response.data);
}).catch(function(response) {
console.log("ERROR:", response);
});
推荐阅读
- php - 如何将 Mysql 数据库中的阿拉伯语 Unicode 显示到我的 Android 应用程序
- next.js - useRouter/withRouter 在第一次渲染时收到未定义的查询
- c# - JetBrains Rider IDE 不会重定向来自文件的输入
- botframework - Bot Framework 网络聊天阅读更多功能
- python - 列表中列表的cumsum
- scala - 使用窗口函数对行进行排名
- angular - @viewchild 下拉菜单在 ngAfterViewInit 中未定义
- ios - 在文件应用程序 iOS 13 中显示 UIDocuments
- css - CSS:如何更改圆笔画填充角度(从左填充而不是从右填充)
- querydsl - 在父子表上使用谓词多个条件的Querydsl