Tutorial :MVC - FileContentResult Different depending on Dropdownlist selection


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


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  


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.


Why not just pass it as parameter:

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


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »