鼠标点击(jquery?)，在弹出/模式中显示图表先装填图表吗？(mvc3 3/剃刀)
我使用FileStreamResult (或FileResult)方法在剃须刀视图页面(来自Controller )上显示图表，这与预期的一样。
但是，我想知道是否有可能只在单击html元素时才显示图表。
点击一个元素，在模态弹出中显示图表。
只有当我已经将图表加载到div中时，我才能使用Jquery...but获得一个显示模式。
我希望在没有图表的情况下加载页面(出于性能原因)，然后只在单击图表时生成/加载图表。
我想我需要一个Ajax调用的somekind...but，我有点卡在如何继续和谷歌没有返回任何有用的东西(只是光盒的照片)
伪码：
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的参数，并从零开始重新生成参数(再次执行所有的calcs等)，原因有两个。
1)后端数据库中的数字可能有changed...so，图表没有反映表中显示的内容。
( 2)打电话需要时间！
我还希望只在单击行时生成图表，而不是始终加载图表，并使用jquery隐藏() show()。
我考虑过ajax调用，但不确定如何返回图像或如何打开新页面。
看不到在Url.Action()方法中传递复杂模型的方法。
认为缓存可能是最好的选择，让click方法调用新窗口的“老式”javascript，通过参数从缓存中获取对象？
回答 2
Stack Overflow用户
发布于 2011-09-26 20:20:15
你有很多方法可以做到这一点，但我会这样做。
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那样)，其中包含一个img，用于图表。
<div id="modal-div">
<div id="chart-div"></div>
</div>3/对于每一行，您必须创建一个Ajax链接，该链接将调用您的"GetImage“操作，并将”chart“替换为您的。您可以指定一个"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链接时，模式都会被启动，内部将被替换(实际上，模态的所有内容都将被替换)。不要忘记包含“Script/jquery.unobtrusione-ajax.js”和“Script/jquery.valdate.unobtrusive.js”，这样Ajax链接才能工作。
Stack Overflow用户
发布于 2011-09-25 07:03:50
你有一些不同的问题混合在一起。你应该把它们分成一个问题。对于您的问题的标题，-loading是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"显示为一个模式。干杯。
https://stackoverflow.com/questions/7510305
复制相似问题
腾讯云开发者
