Ember Cli和ASP.NET webapi - 挂起数据

Question

我有一个在localhost:4200上运行的Ember Cli项目和一个在localhost:56967上运行的asp.net webapi项目.两个项目分别运行良好:我可以启动我的Ember应用程序并测试几条路线,看起来很好,我可以访问我的api(例如:api/products),我看到了我的回复.

我遇到的问题是彼此挂起两件事.

适配器

 export default DS.RESTAdapter.extend({
      host: 'http://localhost:56967',
      namespace: 'api'
 });

我第一次遇到一些Cors问题,但是我在我的Ember应用程序中修复了contentSecurityPolicy,并在我的Api上启用了Cors.

当我进入产品路线时,我可以看到对Api的请求被接受,Api回复了Json的回答.但是,我没有序列化模型,所以我可以在我的Ember应用程序中使用它.

这是我对Api的回应

  [{"ProductId":1,"Name":"Product 1","Description":"Category 1"},{"ProductId":2,"Name":"Product 2","Description":"Category 2"},{"ProductId":3,"Name":"Product 3","Description":"Category 3"}] 

产品的Ember模型

export default DS.Model.extend({
    name : DS.attr('string'),
    description: DS.attr('string')
});

Asp.net产品型号:

public class Product
{
    public int ProductId { get; set; }
    [Required]
    public string Name { get; set; }
    public string Description { get; set; }
}

我知道我必须序列化Api响应,使其成为我的Ember App的"可读"Json.现在的问题是:更改Api的格式是否更好？或者做一个好的序列化器？我如何制作序列化器？很难找到一些体面的教程.我尝试了这个,但这不起作用:

 export default DS.RESTSerializer.extend({
      primaryKey: 'productId'
  });

这是我得到的错误:

  Error while processing route: products No model was found for '0' Error: No model was found for '0'

编辑 在尝试建议的序列化程序和一些ASP.NET序列化程序后,我仍然无法使其工作.今天我找到了这个项目:http://jsonapi.codeplex.com/.它是一个Nuget包,可以帮助您的ASP.NET API输出符合json.api标准.我立即使用了我的Ember数据.只需在您的rest适配器中添加正确的标头,它看起来像这样:

 import DS from 'ember-data';

 export default DS.RESTAdapter.extend({
       host: 'http://localhost:57014',
       namespace: 'api',
       headers:{
          "Accept": "application/vnd.api+json"
        }
 });

在你的Asp.net模型中添加

[JsonObject(Title="product")]
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

}

它会将您的输出多元化为:

{
"products": [
    {
        "id": "1",
        "name": "Product 1",
        "description": "Category 1"
    },
    {
        "id": "2",
        "name": "Product 2",
        "description": "Category 2"
    },
    {
        "id": "3",
        "name": "Product 3",
        "description": "Category 3"
    }
]
}

它仍然处于阿尔法州,但看起来很有希望.关于复数化的一个小注释:它只是将-s添加到您的模型名称中,需要注意的事项.

Answer 1

主要问题是Asp Web API返回以下响应:

[
  {
    "ProductId":1,
    "Name":"Product 1",
    "Description":"Category 1"
  }
]

但Ember Data希望服务器使用以下格式进行响应:

{
  "products": [
    {
      "productId": 1,
      "name": "Product 1",
      "description": "Category 1"
    }
  ]
}

您可以将Web API服务器的响应更新为Ember期望的格式,但在Ember中创建Serializer以将Asp Web API中的数据映射到Ember格式更容易.

我写了一篇详细的博客文章,解释了如何创建Ember Serializer来执行此映射.

请务必阅读博客文章,了解Serializer中发生的情况.但作为参考,我认为你的序列化器应该是这样的:

App.ProductSerializer = DS.RESTSerializer.extend({
  primaryKey: 'productId',

  extract: function(store, primaryType, payload, id, requestType) {
    if (payload.length) {
      for (var i = 0; i < payload.length; i++) {
        this.mapRecord(payload[i]); 
      }
    } else {
      this.mapRecord(payload);
    }

    payloadWithRoot = {};
    payloadWithRoot[primaryType.typeKey] = payload;

    this._super(store, primaryType, payloadWithRoot, id, requestType)
  },

  mapRecord: function(record) {
    for (var property in record) {
      var value = record[property];
      record[property.camelize()] = value;
      delete record[property];
      return record;
    }
  },

  serializeIntoHash: function(hash, type, record, options) {
    var recordJSON = record.toJSON();
    for (var property in recordJSON) {
      var value = recordJSON[property];
      hash[property.capitalize()] = value
    }
  }
});