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

Question

我正在 ASP.NET 中构建一个 API，我正在尝试使用 Ember 调用它...我现在想要开始工作的是简单的 GET（查找所有内容）。

邮递员的输出（用于测试 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");
    }
});

索引.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>

我在postman中使用的Url是：

http://localhost:60590//api/Events

适配器：

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 错误：断言失败：您必须在 App.Event 中包含 id传递给push的哈希

我已经对其进行了调试，发现来自 api 的响应在 json 中正确返回，但它是反序列化器无法正常工作。

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

Answer 1

您应该使用序列化程序。试试这样的：

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

这应该有助于 Ember 了解您的 event 模型在响应中的位置。

Ember 默认假定的路径是：

• GET /events for `store.find('event')
• POST /events 为store.createRecord('event', params)

那么，如果你想改变它，你应该实现适配器：

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 时始终使用驼峰命名法。