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 App中使用它。

这是我对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"}] 

产品的灰烬模型

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而言“可读”。 现在的问题：更改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"
    }
]
}

它仍处于Alpha状态，但看起来很有希望。 关于复数的小注释：只需在模型名称中添加-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中创建序列化程序以将来自Asp Web API的数据映射为Ember的格式更加容易。

我写了一篇详细的博客文章 ，解释了如何创建Ember 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
    }
  }
});