Google Chart가 UpdatePanel의 ScriptManager.RegisterClientScriptBlock 호출에 그려지지 않았습니다.

Question

저는 ASP.NET UpdatePanel의 이벤트를 기반으로 클라이언트 측 스크립트를 트리거하고 있습니다. 페이지가 실제로 새로 고쳐지지만 동일한 코드가 UpdatePanel의 이벤트 중 하나에 의해 트리거 될 때 작동하지 않을 때 작동합니다. Google 차트 컨트롤에 window.onload가 필요합니다. 주변에 어떤 문제가 있습니까? ,

<script type='text/javascript'> 
     google.load('visualization', '1.0', {'packages':['corechart']}); 
     google.setOnLoadCallback(drawChart); 

     function drawChart(){ 
     data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Agreement'); 
     data.addColumn('number', 'choice'); 
     data.addRows([['Strongly Disagree', 3],['Disagree', 1],['Neutral', 1],['Agree', 1],['Strongly Agree', 2]]) 
     var options = { 'title': 'My manager has taken positive steps to increase engagement since the Q12 Survey.', 'width': 400, 'height': 300 }; 
     var chart = new     google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
</script> 

나는 설문 조사 질문을 제시 + 버튼을 제출하는 ASP.NET UpdatePanel을 사용하고 있습니다 :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
<ContentTemplate > 
    <asp:Timer ID="Timer1" runat="server" Enabled="False" Interval="3000" ontick="Timer1_Tick"> 
</asp:Timer> 
    <asp:Panel ID="Panel1" runat="server" Visible="True"> 
     <asp:Label ID="QuestionText" runat="server" Text=""></asp:Label> 
     <br /> 
     <asp:RadioButtonList ID="ResponseList" runat="server"> 
     </asp:RadioButtonList> 
     <br /> 
     <asp:Button ID="SubmitResponse" runat="server" Text="Submit" onclick="SubmitResponse_Click" /> 
    </asp:Panel> 
    <asp:Panel ID="Panel2" runat="server" Visible="False"> 
     <div> 
      Thank you for taking this poll...     
     </div> 
    </asp:Panel> 
    <asp:Panel ID="Panel3" runat="server" Visible="False"> 
     <div id="chart_div"> 
      Google Chart showing Survey Results should appear here. 
     </div> 
    </asp:Panel> 
</ContentTemplate> 

protected void Page_PreRender(object sender, EventArgs e) 
    { 
     GetPoll(); 
     string drawGoogleChartScript = GetDrawGoogleChartsScript(); 

     if (!UserHasResponded(SPContext.Current.Web.CurrentUser.Name))    
     {    
      QuestionText.Text = Poll.Question; 
      ResponseList.DataSource = Poll.PossibleResponses; 
      ResponseList.DataBind(); 
      Panel1.Visible = true; 
      HiddenPollId.Value = Poll.PollId; 
     } 
     else if(_submitButtonClicked && !_thankYouMessageHasBeenDisplayed) 
     { 
      //Return and wait for the Timer event to fire 
      return; 
     } 
     else if(!_submitButtonClicked && _thankYouMessageHasBeenDisplayed) 
     { 
      //The Timer event has fired 
      _thankYouMessageHasBeenDisplayed = false; 
      ScriptManager.RegisterStartupScript(Page, Page.GetType(), "DrawChart1", GetDrawGoogleChartsScript(), false); 
     } 
     else 
     { 
      //The user has already taken the poll - visible on every visit after they take it. 
      if (Panel1.Visible == true) 
      { 
       Panel1.Visible = false; 
      } 
      if (Panel3.Visible == false) 
      { 
       Panel3.Visible = true; 
      } 

      ScriptManager.RegisterStartupScript(Page, this.Page.GetType(), "DrawChart2", GetDrawGoogleChartsScript(), false);        
     } 
    } 


protected void SubmitResponse_Click(object sender, EventArgs e) 
    { 
     _submitButtonClicked = true; 
     using(SPSite site = new SPSite(SiteUrl)) 
     { 
      using(SPWeb web = site.RootWeb) 
      { 
       SPList responseList = web.Lists[ResponseListName];      
       SPListItem item = responseList.AddItem(); 

       item["Response"] = ResponseList.SelectedItem.Text; 
       item["PollId"] = HiddenPollId.Value; 
       item["UserId"] = SPContext.Current.Web.CurrentUser.Name; 

       item.Update(); 
      } 
     } 

     //Hide the Question 
     Panel1.Visible = false; 

     //Show "Thank you for taking the poll message" 
     Panel2.Visible = true; 

     //Start the Timer - (countdown to swith over to the results) 
     Timer1.Enabled = true; 

    }  



    protected void Timer1_Tick(object sender, EventArgs e) 
    { 
     _submitButtonClicked = false; 
     _thankYouMessageHasBeenDisplayed = true; 

     //Hide the "Thank you for taking the poll" message 
     Panel2.Visible = false; 

     //Show panel with the 'char_div' where the chart will be injected 
     Panel3.Visible = true; 

     //Stop the timer 
     Timer1.Enabled = false; 

    } 

GetDrawGoogleChartsScript()는 문자열에 다음 반환 "설문 조사에 응 해주셔서 감사합니다"라는 메시지를 보내고 마지막으로 설문 조사 결과를 Google 차트에 표시하십시오.

차트는 페이지를 새로 고칠 때 작동하지만 비동기 이벤트를 사용하여 작동하도록 가져올 수 없습니다. "DrawChart1을 ScriptManager.RegisterClientScriptBlock (페이지, Page.GetType() :

나는 많은 코드를 게시하도록하겠습니다하지만 중요한 문제는 우리가 때 Timer_Tick 이벤트가 발생 후에 Page_PreRender를 다시 입력 있다는 것입니다, 우리는 줄을 실행 ", GetDrawGoogleChartsScript(), false);

(설문 조사를 마친 후 페이지를 새로 고침 할 때 실행되는 코드와 동일합니다.)하지만 아무 일도 일어나지 않습니다! 스크립트가 전혀로드되지 않았습니다.

막 대형 차트의 매개 변수는 실제로 동적으로 계산되므로 ScriptManager.RegisterClientScriptBlock을 사용하여 페이지에 추가해야합니다.

ScriptManager.RegisterClientScriptBlock이 실행되는 줄을 볼 수는 있지만 JavaScript가 Async 이벤트의 경우 페이지 소스에 삽입되지 않습니다.

내 머리를 두 번 부딪 히고 4 일이 지나면 나는 매우 도전적입니다. 따라서 당신이 제공 할 수있는 도움은 으로 크게입니다.

건배,

트레이 캐롤

Answer 1

나는 문제는 코드 숨김 또는 클라이언트 측에 두 세트를 제어 가시 하였다는 사실과 관련이있다 생각합니다. 둘 다 할 수없고 올바르게 작동 할 수 없습니다. 이거 알고 있니? 나는이 제약으로 인해 많은 두통을 앓고있다.

Answer 2

Google 스크립트는 window.onload에 의존하지 않습니다. Panel3 아직 표시되지 않기 때문에,> 아무 일도 발생하지 않습니다 -

1. 타이머 이벤트가 발생하고, 스크립트 블록은
2. 클라이언트 스크립트가 구글 시각화 라이브러리를로드 클라이언트에 렌더링됩니다, drawChart 콜백 화재 : 나는 무슨 일이의 것은이 의심
3. 타이머가 다시 발생하고 이제 Panel3이 표시됩니다.클라이언트 스크립트를 다시 실행되지만 구글 스크립트가 이미이를 해결하기 위해

로드되어 있기 때문에이 시간 google.setOnLoadCallback(drawChart)이 콜백을 트리거하지 않습니다, 나는 간단한 테스트를 제안한다. Google API가 이미로드되었는지 확인합니다. 그렇지 않은 경우, 수동으로 drawChart 함수를 호출 :

if (typeof google.visualization == 'undefined') { 
    google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 
} 
else { 
    drawChart(); 
} 

이 차트가 제대로 렌더링하게한다.