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

Question

I'm building an API in ASP.NET and I'm trying to call it with Ember... what I'm trying to get to work right now is the simple GET (find all).

The output from postman (chrome extension for testing APIs) gives me this:

[
    {
        "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"
    }
]

Which means the API is working but calling it with Ember returns empty... I've been reading about this and what I think I have to do is tweak the Serializer and RESTAdapter, but I'm not sure how to use this... any ideas?

Here's the Ember code:

Model:

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')
});

Controller:

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

Route:

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>

The Url I used in postman is:

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

Adapter:

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

Serializer:

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"));
    }
});

Error Message on console when I run:

Error while processing route: events.list Assertion Failed: You must include an id for App.Event in a hash passed to push Error: Assertion Failed: You must include an id for App.Event in a hash passed to push

I've debugged it and found out that the response from the api is coming back correctly in json but it's the deserializer that's not working properly.

If you need any more information just ask, I really need to get this working ASAP, thanks.

Answer 1

you should use the serializer. Try something like this:

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

That should help Ember to understand where your event model is in the response.

The paths that Ember assumes by default will be:

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

Then, if you want to change that, you should implement the adapter:

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

Let me know if it worked :)

Answer 2

I would highly recommend that you have your JSON response return a hash instead of an array. I believe Ember's RESTAdapter is expecting the JSON response to look like the following:

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

The main advantage is that you can sideload records of different types, which many APIs end up doing to avoid the overhead of making multiple requests for resources, in addition to being a bit more explicit about exactly what you're returning with your response.

Answer 3

What was happening was that the model on the backend had it's properties starting with an uppercase letter and since Ember is used by conventions it wasn't connecting properly between the backend model and the frontend model.

Changing the backend properties to camelCase solved the problem.

Moral of the story, always use camelCase when working with Ember.