首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >鼠标点击(jquery?),在弹出/模式中显示图表先装填图表吗?(mvc3 3/剃刀)

鼠标点击(jquery?),在弹出/模式中显示图表先装填图表吗?(mvc3 3/剃刀)
EN

Stack Overflow用户
提问于 2011-09-22 06:12:00
回答 2查看 2.9K关注 0票数 1

我使用FileStreamResult (或FileResult)方法在剃须刀视图页面(来自Controller )上显示图表,这与预期的一样。

但是,我想知道是否有可能只在单击html元素时才显示图表。

点击一个元素,在模态弹出中显示图表。

只有当我已经将图表加载到div中时,我才能使用Jquery...but获得一个显示模式。

我希望在没有图表的情况下加载页面(出于性能原因),然后只在单击图表时生成/加载图表。

我想我需要一个Ajax调用的somekind...but,我有点卡在如何继续和谷歌没有返回任何有用的东西(只是光盒的照片)

伪码:

HTML:

代码语言:javascript
运行
复制
<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
    rest of page goes here...
</div>

C#:

代码语言:javascript
运行
复制
public FileStreamResult GetChart(){
    //generate any chart
    return FileStreamResult(newchartstream, "image/png");
}

JS:

代码语言:javascript
运行
复制
<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的参数,并从零开始重新生成参数(再次执行所有的calcs等),原因有两个。

1)后端数据库中的数字可能有changed...so,图表没有反映表中显示的内容。

( 2)打电话需要时间!

我还希望只在单击行时生成图表,而不是始终加载图表,并使用jquery隐藏() show()。

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

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

认为缓存可能是最好的选择,让click方法调用新窗口的“老式”javascript,通过参数从缓存中获取对象?

EN

Stack Overflow用户

发布于 2011-09-25 07:03:50

你有一些不同的问题混合在一起。你应该把它们分成一个问题。对于您的问题的标题,-loading是AJAX的图像-您可以使用下面的代码片段:

HTML:

代码语言:javascript
运行
复制
<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->

JS:

代码语言:javascript
运行
复制
$(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"显示为一个模式。干杯。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7510305

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档