jquery对话框中的asp.net图表

尝试构建一个较小的图表页面（asp控件对象），然后当我们单击图像时，会弹出一个样式化的jquery模式/对话框，显示图表的较大版本。我正试图通过执行以下操作来实现这一点，但我的模态显示为空白

我的“放大”函数背后的代码被调用（当我调试时，弹出窗口被设置为Chart1的值）。我猜我的更新面板错了？完成后，我将把图表移到一个自定义控件上，但是有没有更好的方法可以在不将“ok”返回到“myhide”的情况下执行此操作

.aspx

---

看起来您将放大的图表加载到一个隐藏范围（#myhide）。因此，它不会仅仅通过显示模态而变得可见

您可以尝试添加显示#myhide的回调

---

我无法阅读asp部分，但我假设，如果您直接（通过浏览器）调用图表的url“mypage.aspx？放大=1”，您会得到放大的图表。

我怀疑问题在于，从jQuery AJAX调用到服务器的往返过程没有按照您预期的方式工作。通过jQuery进行的AJAX调用可能不会发送普通更新面板调用会发送的视图状态

尝试将缩略图图表div添加到更新面板，使其成为服务器控件，并使单击成为服务器端事件。可能是这样的：

<form runat="server" id="form1">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>                
        <div class="chart-div" runat="server" onclick="EnlargeChart('Chart1')">
            <asp:chart id="Chart1" runat="server"></asp:chart>
        </div> 
        <div id="PopUp">
            <asp:Chart runat="server" ID="PopUpChart"></asp:Chart>
            <span id="myhide" style="display:none"></span>
        </div>
     </ContentTemplate>
    </asp:UpdatePanel>
</form>

我唯一能想到的另一种方法是保持现有状态，但在服务器上创建图表，并将图表图像源作为AJAX响应的一部分发送回
 如果我取消隐藏'myhide'，在ajax调用之后，它只会显示'OK'，因为后面的代码中的'放大（）'会清除它。我认为问题在于“PopUpChart”正在更新，但是更新的对象没有显示在对话框中，尽管它位于更新面板中。我正在考虑做一个图像源ajax响应，正如你在文章的后半部分所说的，但我认为我会丢失一些东西，如深入选项和数据点上的工具提示。今晚我一定会把你的第一个建议付诸实施。谢谢
<script type="text/jscript">
    $(document).ready(function () {
        $('#PopUp').hide();  //hide on startup
    });

    function JScript_EnlargeChart(x) { //ajax call to create a dialog box to enlarge a given chart
        $('#myhide').load('mypage.aspx?Enlarge=' + x); //refresh

        $('#PopUp').modal({  //do popup
            title: 'Enlarged Chart',
            height: 400,
            width: 700,
            buttons: {
                'Close': function (win) { win.closeModal(); }
            }
        });
    };
</script>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load        

    If Not IsNothing(Request.QueryString("Enlarge")) Then
        Response.Write(Enlarge(Request.QueryString("Enlarge")))
        Response.Flush()
        Response.End()
    Else
        GenerateCharts()
    End If

End Sub

Function Enlarge(ByVal chartid As String) As String
    If chartid = "Chart1" Then
        PopUpChart = Chart1
        PopUpChart.Width = 412
        PopUpChart.Height = 296
        UpdatePanel1.Update()
    ElseIf chartid = "Chart2" Then
        PopUpChart = Chart2
        UpdatePanel1.Update()
    End If
    Return "OK"
End Function

$('#myhide').load('mypage.aspx?Enlarge=' + x, function(){ $('#myhide').show(); }); 

<form runat="server" id="form1">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>                
        <div class="chart-div" runat="server" onclick="EnlargeChart('Chart1')">
            <asp:chart id="Chart1" runat="server"></asp:chart>
        </div> 
        <div id="PopUp">
            <asp:Chart runat="server" ID="PopUpChart"></asp:Chart>
            <span id="myhide" style="display:none"></span>
        </div>
     </ContentTemplate>
    </asp:UpdatePanel>
</form>