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 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