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


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


Solution:2

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.


Solution:3

Why not just pass it as parameter:

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


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


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