Firefox requests for XML format when performing a GET to Web API

Today while testing the Ext JS application I was writing on various browsers, something strange happened. The app works on IE and Chrome, while on Firefox it breaks.

It turns out if not configured correctly WebAPI will return data depending on the Accept HTTP header sent by browsers, and different browsers sent different HTTP Accept header.

More details in the SO answer: http://stackoverflow.com/a/31934984

Firefox prefers XML, so Web API try to serialize data in XML format to return to Firefox.

IE and Chrome doesn’t prefer one over other, so Web API chooses Json.

I solved this issue in Firefox by configuring the web api to always return JSON by adding the following line to WebApiConfig.cs

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue(“text/html”));

Using Ext JS proxy ajax writer

The default behaviour of Ext JS proxy ajax writer seems to be to always use POST. Whenever trying to create/update/delete a record, a JSON object will be sent to the server in the request payload through POST.

It might be possible to configure the proxy and writer to use other HTTP methods like PUT and DELETE, but I haven’t seen any documentation on this yet.

The Id field is always included. So there are 3 cases

  • When the request is to create/update the record, the fields with data will be included. Example: {“Id”:1, “Name”:”Tom”}. Using the Id the server can determine whether it’s a update or create request if a record with same Id already exists.
  • When deleting a record, only the Id is included in the JSON object. Example: {“Id”: 1}. The server can determine that it’s a delete request by checking the number of properties the JSON object has.

If the server is written in ASP.NET Web API, it’s important to read the request body and process it manually instead of using a parameter in the method and let the framework do the deserialization automatically, because then it will not be possible to count the number of properties the object original has, the deserialized object has all properties with default values for missing ones.

Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’ set to ‘.json’

This issue occurred today while I was trying to run an Ext JS application from IIS, because .json files are not accepted by IIS I tried to add this file extension to the application. But instead I got a 500 error when trying to browse the application.

After some digging and searching the MIME types section of the website and all other applications, I couldn’t find the conflicting extension.

I was able to solve the issue by editing the application’s web.config file, right before the mimeMap tag, add a remove tag like following:

<staticContent>

<remove fileExtension=“.json“/>

<mimeMap fileExtension=“.json“ mimeType=“application/json“ />

</staticContent>

I still have no idea why this works, but it works.

Ext JS component cannot display json data read from proxy

Not entirely sure why, but when using ajax proxies, specifying the URL is not enough, the data won’t be displayed on lists/panels.

A reader must also be defined in the proxy, otherwise the data will not be read correctly

proxy: {
type: ‘ajax’,
url: ‘data.json’,
reader:{
type:’json’,
rootProperty: ‘DATA’
}

}

Make sure that

  • the source data is working, test using Fiddler/POSTMan/etc
  • The model’s fields match the fields in json data, case-sensitive.
  • A reader is configured in the proxy
  • rootProperty is set correctly and match the json data, case-sensitive.

 

Differences between JSONP and JSON

Today I learned how Jsonp work, it basically makes use of HTML’s script tag to retrieve the JSON data from a different domain/origin.

The returned data is in the form of func({…}) where func is any function that can be defined before hand in the client. A script element will be added to the DOM that loads the data and execute it like any normal JavaScript file. Since there is no restriction imposed in the script element, it can load from any server in different domains/ports, unlike Ajax.

Basically it’s a hack. More details in the Stackoverflow answer: http://stackoverflow.com/a/2887218/5539403

Ext JS error [E] Layout run failed error

When I encountered this issue, it was because of the grid panel. According to this Stackoverflow answer http://stackoverflow.com/a/21740832/5539403 it is because the grid panel tries to shrink-wrap its content but there was no content at the time the layout run is executed.

I fixed it by setting the width of the grid panel somehow.