Question

我正在基于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来显示调查问题+提交按钮，然后是“感谢您接受调查”消息，最后在Google图表中显示调查结果。

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

我发布了很多代码，但基本问题是当我们在Timer_Tick事件触发后重新进入Page_PreRender时，我们会执行以下行： ScriptManager.RegisterClientScriptBlock（Page，Page.GetType（），“DrawChart1”，GetDrawGoogleChartsScript（），false）;

（这与我们在完成调查后重新加载页面时执行的代码相同。）但没有任何反应！该脚本根本没有加载。

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

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

经过4天的反对，我对此非常“挑战”，所以你能提供的任何帮助都将非常赞赏。

干杯，

Trey Carroll

Answer 1

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

Answer 2

Google脚本不依赖window.onload;我怀疑发生了什么事：

计时器事件触发，脚本块呈现给客户端
客户端脚本加载Google可视化库，触发drawChart回调 - ＆gt;没有任何反应，因为Panel3尚未显示
计时器再次触发，现在Panel3可见。客户端脚本再次运行，但这次google.setOnLoadCallback(drawChart)不会触发回调，因为Google脚本已经加载

为了纠正这个问题，我建议进行简单的测试。检查Google API是否已加载;如果不是，请手动调用drawChart函数：

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

这会导致图表正确呈现。

Update Chart不会在UpdatePanel的ScriptManager.RegisterClientScriptBlock调用上绘制

2 个答案: