Json Ember Cli和ASP.NET webapi-连接数据
我有一个在localhost:4200上运行的Ember Cli项目和一个在localhost:56967上运行的asp.net webapi项目。两个项目分别运行良好:我可以启动我的Ember应用程序并测试多个路由,外观良好,我可以访问我的api(例如:api/产品),并看到我的响应 我的问题是把这两件事联系起来 适配器Json Ember Cli和ASP.NET webapi-连接数据,json,ember.js,asp.net-web-api,ember-data,ember-cli,Json,Ember.js,Asp.net Web Api,Ember Data,Ember Cli,我有一个在localhost:4200上运行的Ember Cli项目和一个在localhost:56967上运行的asp.net webapi项目。两个项目分别运行良好:我可以启动我的Ember应用程序并测试多个路由,外观良好,我可以访问我的api(例如:api/产品),并看到我的响应 我的问题是把这两件事联系起来 适配器 export default DS.RESTAdapter.extend({ host: 'http://localhost:56967', nam
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"}]
产品的余烬模型
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应用程序“可读”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序列化程序之后,我仍然无法让它工作。今天我发现这个项目:。它是一个Nuget包,帮助ASP.NET API的输出符合json.API标准。我很快就用我的余烬数据得到了这个。只需在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,这是需要记住的。主要问题是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的格式更容易
我将解释如何创建一个余烬序列化程序来执行此映射
请务必阅读博客文章以了解序列化程序中发生了什么。但作为参考,我认为您的序列化程序应该是这样的:
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
}
}
});
App.ProductSerializer=DS.RESTSerializer.extend({
primaryKey:'productId',
摘录:函数(存储、主类型、有效负载、id、请求类型){
if(有效载荷长度){
对于(变量i=0;i
我在这方面遇到了几个错误:缺少了几个分号,payloadWithRoot没有定义(所以我想你必须先将其设置为var?)-除此之外-在你的博客上超级阅读,澄清了很多!对所有模型使用一个序列化程序是否更好?还是每个型号都有一个?关系处理是否也正确?我一直在尝试将ToDo应用程序()转换为使用您的方法,但没有成功。示例应用程序在RESTSerializer中使用extractArray和extractSingle。()使用您的方法,我是否仍然需要实现这些方法,还是您的代码使这些方法变得无关紧要?谢谢为一个大型应用程序的每个模型和每个导航属性编写序列化程序似乎是一个巨大的过度。这基本上就是ember spa模板的功能。由@paul链接的博客帖子显示为404,但是如果你点击这个链接,它是目前唯一的搜索结果。你介意详细介绍一下你是如何让JSONAPI使用ember js的吗?您是否使用了ember json api()?几天来,我一直在努力让它发挥作用,任何帮助都将不胜感激!