Display a chart in a pop-up/modal on mouse click (jquery?) without loading chart first? (mvc3/razor)

Question

I'm using the FileStreamResult (or FileResult) method to display a chart on a razor view page (from a Controller action) and this works as expected.

However, I'm wondering if it's possible to display the chart ONLY when an html element is clicked.

e.g. Click on an element, display chart in modal pop-up.

I can get a modal to display using Jquery...but ONLY if I have already loaded the chart into a div.

I'd like to have the page load without the chart (for performance reasons), and then only generate/load the chart when the is clicked.

I guess I need an Ajax call of somekind...but I'm a little stuck as to how to proceed and googling didn't return anything useful (just lightbox for photos)

Pseudo Code:

HTML:

<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
    rest of page goes here...
</div>

C#:

public FileStreamResult GetChart(){
    //generate any chart
    return FileStreamResult(newchartstream, "image/png");
}

JS:

<script>
$(document).ready(function(){
    $('#showchart').click(function(){
        //make ajax call to generate chart
        //show in modal with "close" button
        //OR
        //open a new page as a modal?
    });
});
</script>

EDIT

Clarification:

Controller generates a ViewModel (from an EF4 model) which contains the results of lots of calculations, and some "summary" rows (totals, averages etc)

View displays the results (ViewModel) as tables.

Requirement:

Click on one of the summary rows, opens modal window displaying a chart for that summary row.

Would like to avoid sendind the parameters for the ViewModel and re-generating it from scratch (doing all the calcs again etc) for two reasons

1) The figures in the back-end db may have changed...so the chart doesn't reflect whats being shown in the tables.

2) It takes time to do the calcs!

I'd also like to ONLY generate the chart if the row is clicked, as opposed to loading the chart always and hide() show() with jquery.

I've thought about an ajax call, but unsure about how to return an image, or how to open a new page.

Can't see a way to pass a complex model in the Url.Action() method.

Think caching may be the best option, and have the click method call "old fashioned" javascript for a new window, passing over the parameters to get the object from cache?

Answer 1

You have many ways to do that, but here is what I would do.

1/ Create an action which returns a tag with the good src (assuming that your controller's name is ChartsController).

    public ActionResult GetImage(int chartId = 0)
    {
        var image = @"<img id='chart' src='" + Url.Action("GetChart", new {controller = "Charts", chartId = chartId}) + @"'/>";
        return this.Content(image);
    }

2/ I assume that, in your view, you have a div somewhere which contains your modal's content (like jQuery-ui would do) with an img inside, for the chart.

<div id="modal-div">
    <div id="chart-div"></div>
</div>

3/ For every row, you have to create an Ajax link who will call your "GetImage" action and replace "chart-div" with your . You can specify a "OnBegin" Javascript function, this is where you will put your code to launch the modal.

@Ajax.ActionLink("Show me the chart!", "GetImage", "User", new { chartId = @Model.Rows[i]}, new AjaxOptions()
                                                                                        {
                                                                                            HttpMethod="GET",
                                                                                            OnBegin = "showModalWindow",
                                                                                            UpdateTargetId="modal-div",
                                                                                            InsertionMode = InsertionMode.Replace
                                                                                        });

Everytime you will click on an Ajax link, the modal will be launched and the inside will be replaced (in fact, all the content of the modal will be replaced). Don't forget to include "Scripts/jquery.unobtrusive-ajax.js" and "Scripts/jquery.validate.unobtrusive.js" for the Ajax links to work.

Answer 2

You have some difference question mixed in one. You should split them each in one question. For your question's title, -loading an image by AJAX- you can use code-snippet below:

HTML:

<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->

JS:

$(document).ready(function(){
    $("#showchart").click(function(){
        // Put your controller and action (and id if presented) below:
        var file = "/YourControllerToGetChart/GetChart/id"
        $("<img />").attr("src", file).load(function () {
            $(this) // the loaded image
                .css({"some-css-you-want":"some-value"})
                .appendTo($("#chartholder")); // fixed syntax
        });
    });
});

Let me know if you have any questions or need clarifications on any part or you want to know how to css the div id="chartholder" to display it as an modal. Cheers.