диаграмма asp.net внутри диалогового окна jquery

Question

пытается создать страницу диаграмм (объектов управления asp), которые являются маленькими, а затем, когда мы нажимаем на изображение, появляется стилизованный jQuery модальный/диалог, который отображает большую версия диаграммы. Я пытаюсь выполнить это, выполнив следующее, но мой модальный шрифт выглядит пустым.

Меня зовут функция «Увеличить» (и когда я отлаживаю, Popup получает значение с значениями Chart1). Я предполагаю, что моя панель обновления ошибочна? Я собираюсь переместить диаграммы в пользовательский элемент управления, когда это будет сделано, но может быть, лучший способ сделать это, не возвращая «хорошо» на «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 на сервер, который работает не так, как вы ожидаете. Вызов AJAX через jQuery, вероятно, не отправляет состояние просмотра, которое будет отправлять обычный вызов панели обновления.

Попробуйте добавить панель миниатюр к панели обновления, сделав ее серверной, и щелчок будет событием на стороне сервера. Что-то вроде этого, возможно:

<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(); }); 

Я не могу прочитать АСП-часть, но я полагаю, что, если вы звоните в URL для диаграммы прямого (через браузер) 'mypage.aspx?Enlarge=1', вы получаете увеличенный график.