asp.net圖表裏面的一個jQuery對話框

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

我懷疑問題是從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

Answer 2

像

加載放大圖，以一個隱藏的範圍（#myhide）看起來。所以它不會僅僅通過顯示模式就可以看到。

你可以嘗試添加一個回調，顯示#myhide

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

我無法讀取ASP的一部分，但我認爲，如果你調用圖表的URL直接（通過瀏覽器） 'mypage.aspx?Enlarge=1'，您會看到放大的圖表。