类 当我将 Timer 与 updatePanal 一起使用时发生冲突

Question

我正在尝试使用 updatePanal 作为此代码构建 asp.net 应用程序：

      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
    <ContentTemplate>

            <div class="col-xs-6 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body easypiechart-panel">
                        <h4>Humidity </h4>
                        <div   class="easypiechart" id="easypiechart-blue" data-percent="4" ><span class="percent">92%</span>
                        </div>
                                                                            <button class="btn btn-primary">Adjust Humidity</button><br /><br /><br />

                    </div>
                </div>
            </div>
        </ContentTemplate>
            </asp:UpdatePanel>

更新前这是我的div！ :

更新后变成这样：

为什么会这样？

Answer 1

您可能必须在计时器计时时再次调用构建 easypiechart 的 javascript 函数。

protected void Timer1_Tick(object sender, EventArgs e) 
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "buildPie", "YourBuildPieFunction();", true);
}

更新

首先你的代码不完整。在您发表的 javascript 评论中，您有行 document.getElementById('percentH').innerText = percentage + "%";。但是 "percentH" 不存在。 <span> 元素必须具有该 ID <span id="percentH" class="percent">92%</span>。

其次，饼图不是由该代码构建的。如果你使用 https://rendro.github.io/easy-pie-chart/ 或类似的东西，页面上的某处应该有这样的东西：

$(function() {
    $('.easypiechart').easyPieChart({
        //your configuration goes here
    });
});

这是需要由 ScriptManager 调用的 javascript 代码部分。