My current project creates a Single Page Application (SPA) using ASP.NET MVC and AngularJs with data from ASP.NET MVC webapi REST webservices. With the buzzwords out of the way, let me describe the issue we had.

Some data from the webservice contains strings with special characters like “COÖRPERATIE” (dutch). After binding the json data with curly braces the webpage would show malformed strings like “COÃ-RPERATIE”.

Image courtesy of Kittikun Atsawintarangkul / FreeDigitalPhotos.net

We started looking for a solution with ngSanitize. Google gave lots of answers, but none helped. We tried filters, no chocolate. HTML escaping. The horror!

Right after the $http.get we added a $log of the string and found that it already was wrong. But Fiddler said it was correct? Seems to be a header you can send in the request: Accept-Charset: UTF-16

We added the extra header to our request and it worked. No more gibberish. The code samples below add the header to requests.

// client script angular
$http.get(url, headers : { 'Accept-Charset' : 'utf-16' })
     .then(function(response) { });

// client csharp code
var client = new System.Net.WebClient();
client.Headers.Add("Accept-Charset", "utf-16");

Since we always want to return UTF16 we made it the default response over UTF8. With the code below the webservice is configured to use the UTF16 encoding for the json formatter.

// add to global.asax or startup.cs
var utf8json = GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings[0];
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings.Add(utf8json);
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SupportedEncodings.RemoveAt(0);

The webservice can stil return UTF8 but the client must explicitly request it.