Is it possible for a controller to return an image based on parameters in a clean manner?

Question

I'm trying to use an a chart generation library (ChartDirector) in ASP MVC3.

ChartDirector is generating a bar chart and an HTML image map based on a fairly large data structure.

I am looking for a way to:

1. Use the image directly without having to write it to a file
2. Use the generated HTML image map

I can generate an image and display it just fine:

public ActionResult barChart() // ImageController
{
    // Code to make chart from hard-coded data
    var imageBytes = chart.makeChart2(Chart.PNG);
    var imageMap = chart.getHTMLImageMap();
    FileContentResult byteStream = new FileContentResult(image, "image/png");
    return byteStream;
}

And then reference the controller directly inside one of the views with something like:

<img src="/Image/barChart"/>

The problem is that I can't find a good way to get the necessary data from which to build the bar chart to the controller.

• I can't have a controller add the image data to a model, because HTML requires the image is linked from some URI -- a controller.
• None of the HTML helpers seem to allow me to send a model to a controller
• I've looked into making an HTML helper and an ImageResult type, but it doesn't solve the problem of the image map and the only method I could find to build the URI, "BuildUrlFromExpression", doesn't seem to exist in MVC3.

One way I can accomplish all this is to put the model needed to generate the chart into TempData, then call the controller which will use TempData, and have the controller spit the HTML image map into TempData as well, which will be read by the view. That seems remarkably ugly to me.

I can probably store the data by some sort of session ID, but that doesn't seem much better.

I've looking at (among others): Can an ASP.NET MVC controller return an Image? but it doesn't apply because that controller is reading some pre-generated image.

Answer 1

If I understand your problem, you are just looking for a way to supply model data to the controller to use to generate the image?

The URL in your img tag should be able to include parameters just like any other URL. That is, you should be able to do:

<img src="/Home/ImageData/4?src=maps" />

and it will call this method:

class HomeController
{
    public ActionResult ImageData ( int id, string src )
    {
    }
}

Generating the links in the view would then just be a matter of using UrlHelper.ActionLink and supplying the correct parameters.

Answer 2

To me, the issue here is that you're trying to combine too many things (which shows as the question actually has several different questions in it). The image request is a separate request from the HTML request. Look at it this way - what happens if I copy the image URL and send it to someone else because I want to show them the chart and not the rest of the page? Hot linking happens.

To deal with that, you can't generate the image when someone hits the controller for the HTML page. You need to do it when that second request is made specifically for the chart. So your image request actually has to look very similar to the request for the webpage itself: it needs to contain enough information in the URL that the controller serving the image can get the necessary model data back from the database (or wherever it's coming from) in order to generate the chart. So if the controller action that creates the webpage you want to display the chart on is this:

public ActionResult Details(int id)

Then in the same controller you need another action like this:

public ActionResult DetailsChart(int id)

The second one will go get the data, use the chart library you have to create the image, then return it. You'll reference it like this:

<img src="/SomeController/DetailsChart/6" />

So that gets you the chart on the webpage, or wherever it was requested from. Now to display it without having to read the image off disk, you need to tell your chart control to not write to disk. If it's got another MakeChart() that writes to a Stream then you're good to go because you can write it to Response.OutputStream (or to a MemoryStream if you don't want to write it to the HTTP response right away for some reason).

As for the ImageMap... that's another thing again. ImageMaps are either HTML put on the page that tells the browser where to go depending on where the user clicks, or a server one where you need a third controller action to take a click on the image and handle it. You don't send that at the same time as you're sending the image, because that stuff's not image data.