web.api无法正确绑定JSON对象

时间:2014-02-18 19:08:21

标签: angularjs asp.net-web-api2

我正在研究 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对象绑定到我的控制器模型?

1 个答案:

答案 0 :(得分:2)

不要将data: { user: user }传递给$http(),而是像这样传递user ......

$http({
    method: 'POST', url: config.webAPIsBaseUrl + '/api/v1/users',
    // headers: { 'Authorization': 'Bearer ' + token },
    data: user
})