Question

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

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

的.aspx

<div class="chart-div" onclick="JScript_EnlargeChart('Chart1')">
    <asp:chart id="Chart1" runat="server"></asp:chart>
</div>

<div id="PopUp">
   <form runat="server" id="form1">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>                
            <asp:Chart runat="server" ID="PopUpChart"></asp:Chart>
        </ContentTemplate>
       </asp:UpdatePanel>
   </form>
    <span id="myhide" style="display:none"></span>
</div>

的javascript

<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

Answer 1

看起来您将放大的图表加载到隐藏的范围（#myhide）。因此，仅通过显示模态就无法看到它。

您可以尝试添加显示#myhide

的回调

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

我无法读取asp部分，但我认为，如果您直接（通过浏览器）'mypage.aspx?Enlarge=1'调用图表的网址，则会获得放大的图表。

Answer 2

我怀疑问题是从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>

我为无法测试而道歉，但我认为你需要类似的东西。关键是你需要让ASP.Net处理AJAX，以便它正确地发送状态并可以密切关注服务器端控件。

要在更新面板完成后打开弹出窗口，请尝试此问题中的技巧：How can I run some javascript after an update panel refreshes?

我能想到的另一种方法就是按照你的方式保存，但是在服务器上创建图表，只需将图表图像源作为AJAX响应的一部分发回。 An article on how to do that

asp.net图表里面有一个jquery对话框

2 个答案: