MVC Web Api returning serialized response instead of css

Question

I am having an issue returning css from a web api controller. The code takes a request for a css file and returns it after reading it from the database.

The problem is that the web api code seems to be serializing the response and returning that instead of the css itself.

Here you can see a link tag that the browser is sending to the server which should return css. You can also see that the response looks like a serialization of my css instead of just the css string.

My request and response headers:

My controller looks like this:

public HttpResponseMessage Get(string fileName, string siteId, int id)
{
    var fileData = ReadSomeCssFromTheDatabase();

    var result = new HttpResponseMessage(HttpStatusCode.OK);
    result.Content = new ByteArrayContent(fileData);
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("text/css");

    result.Headers.CacheControl = new CacheControlHeaderValue();
    result.Headers.CacheControl.MaxAge = TimeSpan.FromHours(0);
    result.Headers.CacheControl.MustRevalidate = true;

    return result;
}

There is a “text/css” formatter installed that is being created but not being hit for some reason.

public class CssFormatter : MediaTypeFormatter
{
    public CssFormatter()
    {
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/css"));
    }

    public override Task<object> ReadFromStreamAsync(Type type, Stream readStream, HttpContent content, IFormatterLogger formatterLogger)
    {
        var taskCompletionSource = new TaskCompletionSource<object>();
        try
        {
            var memoryStream = new MemoryStream();
            readStream.CopyTo(memoryStream);
            var s = System.Text.Encoding.UTF8.GetString(memoryStream.ToArray());
            taskCompletionSource.SetResult(s);
        }
        catch (Exception e)
        {
            taskCompletionSource.SetException(e);
        }
        return taskCompletionSource.Task;
    }

    public override bool CanReadType(Type type)
    {
        return type == typeof(string);
    }

    public override bool CanWriteType(Type type)
    {
        return false;
    }
}

What am I doing wrong?

Answer 1

• Your formatter would not be hit because you are not going through content negotiation process (as you are returning HttpResponseMessage in your action...you could use Request.CreateResponse<> to make conneg process run)

• You are trying to 'write' the css content right?...but i see that CanWriteType is returning 'false' and also you seem to be overriding ReadFromStreamAsync instead of WriteToStreamAsync?

An example of how you could do(from what i understood about the above scenario):

public class DownloadFileInfo
{
    public string FileName { get; set; }
    public string SiteId { get; set; }
    public int Id { get; set; }

}

public HttpResponseMessage Get([FromUri]DownloadFileInfo info)
    {
        // validate the input

        //Request.CreateResponse<> would run content negotiation and get the appropriate formatter
        //if you are asking for text/css in Accept header OR if your uri ends with .css extension, you should see your css formatter getting picked up.
        HttpResponseMessage response = Request.CreateResponse<DownloadFileInfo>(HttpStatusCode.OK, info);

        response.Headers.CacheControl = new CacheControlHeaderValue();
        response.Headers.CacheControl.MaxAge = TimeSpan.FromHours(0);
        response.Headers.CacheControl.MustRevalidate = true;

        return response;
    }

public class CssFormatter : MediaTypeFormatter
{
    public CssFormatter()
    {
        SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/css"));
    }

    public override bool CanReadType(Type type)
    {
        return false;
    }

    public override bool CanWriteType(Type type)
    {
        return type == typeof(DownloadFileInfo);
    }

    public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext)
    {
        //use the 'value' having DownloadFileInfo object to get the details from the database.
        // Fead from database and if you can get it as a Stream, then you just need to copy it to the 'writeStream'
    }
}