1

我正在触发基于 ASP.NET UpdatePanel 中的事件的客户端脚本。它在页面实际刷新时起作用，但在由 UpdatePanel 的事件之一触发相同代码时根本不起作用。谷歌图表控件似乎需要window.onload。有什么解决办法吗？

<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() 在字符串中返回以下内容：

    <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 来呈现调查问题 + 提交按钮，然后是“感谢参与调查”消息，最后在谷歌图表中呈现调查结果。

该图表在页面刷新时有效，但我无法使用异步事件使其工作。

我发布了很多代码，但基本问题是当我们在 Timer_Tick 事件触发后重新输入 Page_PreRender 时，我们执行以下行： ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "DrawChart1", GetDrawGoogleChartsScript() ， 错误的）;

（这与我们在完成调查后重新加载页面时执行的代码相同。）但是什么也没有发生！脚本根本没有加载。

条形图的参数实际上是动态计算的，所以我必须使用 ScriptManager.RegisterClientScriptBlock 将其添加到页面中。

在异步事件的情况下，javascript 甚至没有进入页面源，即使我可以看到调用 ScriptManager.RegisterClientScriptBlock 的行被执行。

经过4天的努力，我对此非常“挑战”，因此您可以提供的任何帮助将不胜感激。

干杯，

特雷卡罗尔

4

2 回答 2

0

Google 脚本不依赖于window.onload; 我怀疑发生了什么是这样的：

  1. 定时器事件触发，脚本块被呈现给客户端
  2. 客户端脚本加载 Google 可视化库，触发drawChart回调 --> 没有任何反应，因为Panel3还不可见
  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();
}

这应该会导致图表正确呈现。

于 2012-09-18T20:24:19.273 回答
0

我认为您的问题与您在代码隐藏或客户端设置控制可见性这一事实有关。你不能同时做这两个并且让它正常工作。你知道吗？由于这种限制，我有很多头痛。

于 2012-09-18T19:45:35.407 回答