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

Question

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

邮递员（chrome 用于测试 APIs 的扩展）的输出给了我这个：

[
    {
        "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 returns 调用它是空的...我一直在阅读这个，我认为我必须做的是调整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(&quot;event&quot;, { path: &quot;:event_id&quot; });
    });
});

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(&quot;event&quot;);
    }
});

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>

我在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 错误：断言失败：您必须在传递给 push

的散列中包含 App.Event 的 id

我调试了它，发现 api 的响应在 json 中正确返回，但反序列化器无法正常工作。

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

Answer 1

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

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

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

Ember 默认采用的路径是：

GET /events `store.find('event')
POST /events 对于 store.createRecord('event', params)

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

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

让我知道它是否有效:)

Answer 2

我强烈建议您使用 JSON 响应 return 散列而不是数组。我相信 Ember 的 RESTAdapter 期望 JSON 的响应如下所示：

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

主要优点是您可以旁加载不同类型的记录，许多 API 最终这样做是为了避免对资源进行多次请求的开销，此外还可以更明确地说明您的确切内容return与您的回应相结合。

Answer 3

发生的事情是后端模型的属性以大写字母开头，并且由于约定使用 Ember，因此后端模型和前端模型之间的连接不正确。

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

故事的寓意，在使用 Ember 时始终使用驼峰式命名法。

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

Calling HTTP method GET from an ASP.NET Web API using Ember

javascript

c#

asp.net

ember.js

asp.net-web-api