我正在研究 angularjs 和 web.api v2 。
我正在尝试向web.api 2控制器提交一个简单的javascript对象 控制器做的不多:接收一个对象并将其返回(web.api):
[RoutePrefix("api/v1")]
public class UsersController : ApiController
{
[HttpPost]
[Route("users")]
public IHttpActionResult Save([FromBody] User user)
{
return Ok(user);
}
}
这是用户类(web.api):
public class User
{
public int Code { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Telephone { get; set; }
public string Email { get; set; }
}
在我的客户端应用程序中,我复制了对象模型。我的控制器返回类似这样的东西(angularjs):
vm.user = {
firstName: '',
lastName: '',
address: '',
city: '',
telephone: '',
email: ''
};
这是我的观点:
<div class="list card" ng-controller="userregistration as vm">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Nome:</span>
<input type="text" placeholder="" ng-model="vm.user.firstName">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Cognome</span>
<input type="text" placeholder="" ng-model="vm.user.lastName">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Indirizzo</span>
<input type="text" placeholder="" ng-model="vm.user.address">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Città</span>
<input type="text" placeholder="" ng-model="vm.user.city">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Telefono:</span>
<input type="text" placeholder="" ng-model="vm.user.telephone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="" ng-model="vm.user.email">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="vm.registerUser(vm.user);">Crea Utente</button>
</div>
</div>
这是我控制器中的 registerUser 方法(angularjs):
vm.registerUser = function (user)
{
dataService.registerUser(user)
.then(
function (result) {
device.showAlert(result.Code, config.name, 'CONGRATULAZIONI');
},
function (reason) {
device.showAlert(reason, config.name, 'ATTENZIONE');
}
);
}
我的服务模块(angularjs)接收用户对象并将其POST到我的web.api控制器:
function saveUser(token, user)
{
var deferred = $q.defer();
$http({
method: 'POST', url: config.webAPIsBaseUrl + '/api/v1/users',
// headers: { 'Authorization': 'Bearer ' + token },
data: { user: user }
})
.success(function (data, status, headers, config) {
console.log('saveUser() => success.');
deferred.resolve(data);
}
)
.error(function (data, status, headers, config) {
if (data.Message) {
console.log('saveUser() => error 1.');
deferred.reject(data.Message);
}
else {
console.log('saveUser() => error 2.');
deferred.reject("An error occured while registering user!", status);
}
}
);
return (deferred.promise);
}
当我将user
对象发送到我的API时,我的控制器无法正确反序列化用户。
所有字段均为空。
我用小提琴手调查了一下,我发现对象是这样包裹的:
{"user":{"firstName":"LeftyX","lastName":"","address":"","city":"","telephone":"","email":""}}
我试图删除user
包装器:
{"firstName":"LeftyX","lastName":"","address":"","city":"","telephone":"","email":""}
现在一切都按预期工作了。
的问题:
有没有办法将javascript对象绑定到我的控制器模型?
答案 0 :(得分:2)
不要将data: { user: user }
传递给$http()
,而是像这样传递user
......
$http({
method: 'POST', url: config.webAPIsBaseUrl + '/api/v1/users',
// headers: { 'Authorization': 'Bearer ' + token },
data: user
})