使用Ember从ASP.NET Web API调用HTTP方法GET

Question

我正在ASP.NET中构建一个API，并且试图用Ember来调用它……我现在想要开始工作的是简单的GET（查找全部）。

postman的输出（用于测试API的chrome扩展）给了我：

[
    {
        "Id": 1,
        "Name": "psilva",
        "Project": "a",
        "Objectives": "s",
        "City": "a",
        "Country": "s",
        "EventStart": "2015-02-06T11:06:23.673",
        "Departure": "2015-02-06T11:06:23.673",
        "Arrival": "2015-02-06T11:06:23.673",
        "Registration": "a",
        "NationalTransportation": "a",
        "Accommodation": "a",
        "AcNumberNights": 1,
        "AcPreferHotel": "a",
        "AcPreferHotelUrl": "a",
        "Flight": "a",
        "FlDeparture": "2015-02-06T11:06:23.673",
        "FlDepartPrefer": "a",
        "FlDepartPreferUrl": "a",
        "FlReturn": "2015-02-06T11:06:23.673",
        "FlRetPrefer": "a",
        "FlRetPreferUrl": "a",
        "Notes": "a",
        "Files": "a",
        "Status": "a"
    },
    {
        "Id": 2,
        "Name": "psilva",
        "Project": "a",
        "Objectives": "s",
        "City": "a",
        "Country": "s",
        "EventStart": "2015-02-06T11:06:23.673",
        "Departure": "2015-02-06T11:06:23.673",
        "Arrival": "2015-02-06T11:06:23.673",
        "Registration": "a",
        "NationalTransportation": "a",
        "Accommodation": "a",
        "AcNumberNights": 1,
        "AcPreferHotel": "a",
        "AcPreferHotelUrl": "a",
        "Flight": "a",
        "FlDeparture": "2015-02-06T11:06:23.673",
        "FlDepartPrefer": "a",
        "FlDepartPreferUrl": "a",
        "FlReturn": "2015-02-06T11:06:23.673",
        "FlRetPrefer": "a",
        "FlRetPreferUrl": "a",
        "Notes": "a",
        "Files": "a",
        "Status": "a"
    },
    {
        "Id": 3,
        "Name": "psilva",
        "Project": "a",
        "Objectives": "s",
        "City": "a",
        "Country": "s",
        "EventStart": "2015-02-06T11:06:23.673",
        "Departure": "2015-02-06T11:06:23.673",
        "Arrival": "2015-02-06T11:06:23.673",
        "Registration": "a",
        "NationalTransportation": "a",
        "Accommodation": "a",
        "AcNumberNights": 1,
        "AcPreferHotel": "a",
        "AcPreferHotelUrl": "a",
        "Flight": "a",
        "FlDeparture": "2015-02-06T11:06:23.673",
        "FlDepartPrefer": "a",
        "FlDepartPreferUrl": "a",
        "FlReturn": "2015-02-06T11:06:23.673",
        "FlRetPrefer": "a",
        "FlRetPreferUrl": "a",
        "Notes": "a",
        "Files": "a",
        "Status": "a"
    },
    {
        "Id": 5,
        "Name": "psilva",
        "Project": "a",
        "Objectives": "s",
        "City": "a",
        "Country": "s",
        "EventStart": "2015-02-06T11:06:23.673",
        "Departure": "2015-02-06T11:06:23.673",
        "Arrival": "2015-02-06T11:06:23.673",
        "Registration": "a",
        "NationalTransportation": "a",
        "Accommodation": "a",
        "AcNumberNights": 1,
        "AcPreferHotel": "a",
        "AcPreferHotelUrl": "a",
        "Flight": "a",
        "FlDeparture": "2015-02-06T11:06:23.673",
        "FlDepartPrefer": "a",
        "FlDepartPreferUrl": "a",
        "FlReturn": "2015-02-06T11:06:23.673",
        "FlRetPrefer": "a",
        "FlRetPreferUrl": "a",
        "Notes": "a",
        "Files": "a",
        "Status": "a"
    }
]

这意味着该API正在运行，但是用Ember调用将返回空...我一直在阅读有关此内容，我认为我需要做的是调整Serializer和RESTAdapter，但是我不确定如何使用它。 。 有任何想法吗？

这是Ember代码：

模型：

App.Event = DS.Model.extend({
    Id: DS.attr(),
    Name: DS.attr('string'),
    Project: DS.attr('string'),
    Objectives: DS.attr('string'),
    City: DS.attr('string'),
    Country: DS.attr('string'),
    EventStart: DS.attr('isodate'),
    Departure: DS.attr('isodate'),
    Arrival: DS.attr('isodate'),
    Registration: DS.attr('string'),
    NationalTransportation: DS.attr('string'),
    Accommodation: DS.attr('string'),
    AcNumberNights: DS.attr('number'),
    AcPreferHotel: DS.attr('string'),
    AcPreferHotelUrl: DS.attr('string'),
    Flight: DS.attr('string'),
    FlDeparture: DS.attr('isodate'),
    FlDepartPrefer: DS.attr('string'),
    FlDepartPreferUrl: DS.attr('string'),
    FlReturn: DS.attr('isodate'),
    FlRetPrefer: DS.attr('string'),
    FlRetPreferUrl: DS.attr('string'),
    Notes: DS.attr('string'),
    Files: DS.attr('string'),
    Status: DS.attr('string')
});

控制器：

App.EventsController = Ember.ArrayController.extend({});

路线：

App.Router.map(function () {
    this.resource('sessions', function () {
        this.route('logout');
        this.route('login');
    });

    this.resource('help');

    this.resource('events', function () {
        this.route('list'),
        this.route('new'),
        this.route("event", { path: ":event_id" });
    });
});

App.EventsNewRoute = Ember.Route.extend({
    model: function (params) {
        return this.store.createRecord('event', params);
    }
});

App.EventsListRoute = Ember.Route.extend({
    controllerName: 'events',
    model: function () {
        return this.store.find("event");
    }
});

index.html的：

<script type="text/x-handlebars" data-template-name="events/list">
        <section id="events">
            <div class="container-fluid">
                <div class="page-header">
                    <h1>Events Calendar</h1>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">Events</h2>
                    </div>
                    <div class="panel-body">
                        {{#each event in events}}
                            {{#link-to "events.event"}}
                                <p>{{Name}}</p>
                            {{/link-to}}
                        {{else}}
                            <h2>No Events</h2>
                        {{/each}}
                    </div>
                </div>
            </div>
        </section>
    </script>

我在邮递员中使用的网址是：

HTTP：//本地主机：60590 // API /活动

适配器：

App.ApplicationAdapter = DS.RESTAdapter.extend({
    host: 'http://localhost:60590/',
    namespace: 'api'
});

串行：

App.EventSerializer = DS.RESTSerializer.extend({
    /* add root element on incoming json */
    normalizePayload: function (payload) {
        return {event: payload};
    },
    /* remove root element from outgoing json */
    serializeIntoHash: function (hash, type, record, options) {
        Ember.merge(record.get("data"), this.serialize(record, options));
        Ember.merge(hash, record.get("data"));
    }
});

运行时控制台上出现错误消息：

处理路线时出错：events.list断言失败：必须在传递给push的哈希中包含App.Event的id错误：断言失败：您必须在传递给push的哈希中包含App.Event的id

我调试了它，发现api的响应在json中正确返回了，但是解串器无法正常工作。

如果你需要更多的信息，我真的需要尽快让这个工作，谢谢。

Answer 1

您应该使用序列化器。 尝试这样的事情：

App.EventSerializer = DS.RESTSerializer.extend({
  normalizePayload: function(payload) {
    return {
      "event": payload
    };
  }
});

这应该可以帮助Ember了解event模型在响应中的位置。

Ember默认采用的路径为：

• GET /events for`store.find（'event'）
• 用于store.createRecord('event', params) POST /events

然后，如果要更改它，您应该实现适配器：

App.EventAdapter = DS.RESTAdapter.extend({
  namespace: '/api',
  pathForType: function(type) {
    return 'Events';
  }
});

让我知道它是否有效:)

Answer 2

我强烈建议您让JSON响应返回哈希而不是数组。 我相信Ember的RESTAdapter期望JSON响应如下所示：

{ 
  "events": [
    {
      "Id": 1,
      "Name": "psilva",
      "Project": "a",
      "Objectives": "s",
      "City": "a",
      "Country": "s",
...

主要优点是您可以侧载不同类型的记录，许多API最终会这样做以避免产生多个资源请求的开销，此外还要更明确地了解您的响应返回的确切内容。

Answer 3

发生的事情是后端的模型有一个以大写字母开头的属性，因为Ember被惯例使用，它在后端模型和前端模型之间没有正确连接。

将后端属性更改为camelCase解决了这个问题。

故事的道德，在与Ember合作时总是使用camelCase。