MVC - FileContentResult Different depending on Dropdownlist selection

Question

In my MVC project I have a chart being generated on my view as so

<img alt="Report Chart" src="/Home/GetChart" /></div>

Which calls a controller that returns FileContentResult

Function GetChart() As FileContentResult
    Return File(MyChart(), "image/png")
End Function

Where mychart is a private sub that returns a byte array being the chart image.

Anyway, my problem is that I want this to generate different data off a dropdownlist I have on the View. So when the post is clicked I will read the selected item and generate the chart against it. Now the Dropdownlist and button work fine and on the post method I can read the selected dropdown item using "Request" or by passing the Dropdown id as a parameter however this does not work with the chart, I cannot read the dropdown selection or pass it in as the controller is being called in the html src tag. How can I get the value of the dropdown to this controller function. Any help appreciated, thanks

Answer 1

You can pass in the value (or ID) of the selected dropdown item into the actual src path it's self.

Something like:

<img alt="Report Chart" src="/Home/GetChart/<%=ViewData["DropDownValue"]%>" />

(Assuming you've made sure DropDownValue is safe to be used in a URL like this)

This will give you the routing address as {controller}/{action}/{id}

Depending on the id passed to the controller method, you can return the data you want for the image.

If you're wanting the image to change without a postback to the server then you'll need to change the src attribute value using Javascript, populating the {id} section with the new value from the dropdown.

Answer 2

Why not just pass it as parameter:

<img 
    alt="Report Chart" 
    src="<%= Url.Action("GetChart", "Home", new { id = Model.SomePropertyThatDropDownIsBoundTo }) %>" 
/>

Answer 3

You would need to use javascript to do this. Note that you'd also want to set the initial chart id using a Url.Action helper on a model parameter. I've used InitialChart as the variable to hold the default chart id.

$(function() {
   $('#chartDropdown').change( function() {
       $('#reportChart').attr( 'src', '<%= Url.Action( "Chart", "Home" ) %>'
           + '/' + $(this).val() );
   });
});

Then change your mark up (view)

<img id="reportChart"
     alt="Report Chart"
     src='<%= Url.Action( "Chart", "Home", new { id = Model.InitialChart } ) %>'
     />

and your action

Function GetChart(ByVal id as Integer) As FileContentResult
    Return File(MyChart(id), "image/png")
End Function

Answer 4

I might mention a simpler solution again I came across for future reference, similar to Jaime's above

<img alt="Report Chart" src="/Home/GetChart/<%=Request("ChartType") %>" /></div>

where ChartType is the dropdownlist, this returns the selected value rather than the full IEnumerable of SelectListItems.

Cheers again guys