1

我正在使用 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 模型），其中包含大量计算的结果，以及一些“汇总”行（总计、平均值等）

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

要求：

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

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

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

2) 计算需要时间！

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

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

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

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

4

2 回答 2

0

你有一些不同的问题混合在一起。您应该将它们分别放在一个问题中。对于您的问题标题，-通过 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
        });
    });
});

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

于 2011-09-25T07:03:50.373 回答
0

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

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链接，modal都会启动，里面会被替换（其实就是modal的所有内容都会被替换）。不要忘记包含“Scripts/jquery.unobtrusive-ajax.js”和“Scripts/jquery.validate.unobtrusive.js”以使 Ajax 链接正常工作。

于 2011-09-26T20:20:15.123 回答