Web API returns XML on JSON call

Question

I have a problem with interworking MS WebAPI and ExtJS

ExtJS does an API call from

proxy : {
    type : 'ajax',
    noCache: false,
    pageParam: false,
    startParam: false,
    limitParam: false,
    extraParams: {
        param1 : var1,
        param2 : var2,
    },
    api: {
        read    : 'api/DataSource',
    },

and my Web API application returns XML (I can see this in FireBug).

[System.Web.Http.AcceptVerbs("GET", "POST")]
[System.Web.Http.HttpGet]
public DataModel DataSource(int debug=0)
{
    DataSource dataSource = new dataSource();
    ...
    return dataSource
}

There is only one reason I can think of, why xml is returned: Firefox does not ask for application/json specifically on this ExtJS json call. If I change the default AcceptHeaders of Firefox to a more json-friendly one, JSON is returned.

As the user shall not have to change his browser settings, I see two solutions:
-> Tell the Javascript to ask for application/json.
-> Or tell MS to always return json.

I would prefer option 1, but I don't know whether or how I can change this?

Answer 1

When you're able to control what gets passed to the Ajax request, you can override the headers on each request:

Ext.Ajax.request({
    url: '...',
    headers: { 'Accept': 'application/json' },
    params: { ... },
    ...
});

When you don't have control over the request (i.e. it's indirectly called behind a layer of stores/proxies/etc), you have to dig around in the API to see if it allows you to customize the parameters of the request. In this case, the Ext.data.proxy.AjaxProxy class allows you to pass custom headers:

proxy : {
    type : 'ajax',
    headers: { 'Accept': 'application/json' },  // or whatever you need
    ...
}

I didn't want to have to do this all over the place, so I decided to monkeypatch my own defaultHeaders by overriding the Ext.Ajax singleton class:

Ext.define('MyApp.overrides.core.Ajax', {
    override: 'Ext.Ajax',

    defaultHeaders: {
        'Accept': '*/*'  // or whatever you need if this is too liberal
    }
});

Then you just have to make sure this class gets loaded when your application is bootstrapped. Doing it this way impacts every Ajax request, even those made by framework code through the Ext.Ajax module. Your mileage may vary with this solution.

Answer 2

Clear the formatters collection on the config object and just add back the JsonMediaTypeFormatter.