单击鼠标（jquery？）时在弹出窗口/模式中显示图表而不先加载图表？ （MVC3/剃刀）

Question

我正在使用 FileStreamResult （或 FileResult）方法在剃刀视图页面上显示图表（来自控制器操作），这按预期工作。

但是，我想知道是否可以仅在单击 html 元素时显示图表。

例如，单击一个元素，在模式弹出窗口中显示图表。

我可以使用 Jquery 获取模式来显示...但前提是我已经将图表加载到 div 中。

我希望在没有图表的情况下加载页面（出于性能原因），然后仅在单击时生成/加载图表。

我想我需要某种 Ajax 调用...但我对如何继续有点困惑，谷歌搜索没有返回任何有用的东西（只是照片的灯箱）

伪代码：

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>

编辑

说明：

控制器生成一个 ViewModel（来自 EF4 模型），其中包含大量计算的结果，以及一些“摘要”行（总计、平均值等）

视图将结果 (ViewModel) 显示为表格。

要求：

单击摘要行之一，打开模式窗口，显示该摘要行的图表。

想要避免发送 ViewModel 的参数并从头开始重新生成它（再次进行所有计算等），原因有两个：

1）后端数据库中的数字可能已经改变......所以图表没有变化反映表格中显示的内容。

2）计算需要时间！

我还想仅在单击该行时生成图表，而不是始终加载图表并使用 jquery hide() show() 。

我考虑过 ajax 调用，但不确定如何返回图像或如何打开新页面。

在 Url.Action() 方法中找不到传递复杂模型的方法。

认为缓存可能是最好的选择，并让 click 方法为新窗口调用“老式”javascript，传递参数以从缓存中获取对象？

Answer 1

你有很多方法可以做到这一点，但这就是我要做的。

1/ 创建一个操作，该操作返回具有良好 src 的标签（假设您的控制器的名称是 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/ 我假设，在你看来，你有一个 div 包含你的模态内容（就像 jQuery-ui 那样），里面有一个 img，用于图表。

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

3/ 对于每一行，您必须创建一个 Ajax 链接，该链接将调用您的“GetImage”操作并将“chart-div”替换为您的 .您可以指定一个“OnBegin”Javascript 函数，您将在此处放置代码以启动模式。

@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
                                                                                        });

每次单击 Ajax 链接时，都会启动模态框，并且内部会被替换（实际上，模态框的所有内容都会被替换）。
不要忘记包含“Scripts/jquery.unobtrusive-ajax.js”和“Scripts/jquery.validate.unobtrusive.js”以使 Ajax 链接正常工作。

Answer 2

你有一些不同的问题混合在一起。您应该将它们分成一个问题。对于您的问题标题，-通过 AJAX 加载图像-您可以使用下面的代码片段：

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
        });
    });
});

如果您有任何问题或需要澄清，请告诉我任何部分或者您想知道如何对 div id="chartholder" 进行 css 处理以将其显示为模式。干杯。