如何避免 asp:UpdatePanel 重复我的内容？答案

【问题标题】：How to avoid asp:UpdatePanel duplicate my contents?如何避免 asp:UpdatePanel 重复我的内容？
【发布时间】：2019-06-30 09:22:51
【问题描述】：

我正在创建一个网页，该网页每 5 秒刷新一次以显示剩余订单量。问题是刷新后，我的内容开始重复。在这里，我的问题简介：我正在展示： Order Offline : 1 / Order Online : 0. 刷新后，它将是： Order Offline : 11 / Order Online : 00. 我使用 asp:UpdatePanel Triggers 和 asp:Timer 事件刷新页面

我尝试在谷歌上搜索答案，大多数情况下我通过将ViewState 设置为Disabled 来找到答案，并且我还尝试将UpdateMode 更改为Conditional

这是我的代码的 sn-ps ：

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
        <asp:Timer ID="Timer1" runat="server" Interval="5000"></asp:Timer>
        <div class="row">
            <div class="col-sm-2">
                <asp:ImageButton ImageUrl="image.png" Width="170" ID="ClsBtn" runat="server" />
            </div>
            <div class="col-sm-4" style="text-align: right;">
                <span id="date" style="font-size:10px; font-weight: 900;"></span>
                <span id="time" style="font-size:10px; font-weight: 900;"></span>
            </div>
            <div class="col-sm-4" style="text-align: right;">
                <asp:UpdatePanel ID="upTQ" runat="server">
                    <Triggers><asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /></Triggers>
                    <ContentTemplate>
                        <span style="font-size: 15px; font-weight: 900;">OFFLINE : <asp:PlaceHolder runat="server" ID="phTotalQueue" /> / ONLINE : <asp:PlaceHolder runat="server" ID="phTotalQueueM" /></span>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

这是我的代码：

phTotalQueue.Controls.Add(New LiteralControl("" & dtTO.Rows(0).Item("TotalOrderOffline") & ""))

phTotalQueueM.Controls.Add(New LiteralControl("" & dtTO2.Rows(0).Item("TotalOrderOnline") & ""))

我希望输出是Order Offline : 1 / Order Online : 0.，没有重复的内容。

【问题讨论】：

标签： asp.net vb.net webforms

【解决方案1】：

让我们首先了解会发生什么：您的页面在服务器上生成，发送到浏览器，在那里显示，然后，每次刷新时，都会请求服务器，此时，LiteralControl 是分别添加到phTotalQueue 和phTotalQueueM。每次运行时，phTotalQueue 和 phTotalQueueM 中已经存在的控件将分别保留在那里，显示旧值，但正在生成一个新的此类控件，显示旧值之外的新值。我想建议您确保您的UpdatePanels 中有一个可识别的LiteralControl，有一个ID：

                <asp:UpdatePanel ID="upTQ" runat="server">
                    <Triggers><asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /></Triggers>
                    <ContentTemplate>
                        <span style="font-size: 15px; font-weight: 900;">OFFLINE : <asp:PlaceHolder runat="server" ID="phTotalQueue"><asp:Literal ID="phTotalQueueText" runat="server"></asp:Literal>
</asp:PlaceHolder> / ONLINE : <asp:PlaceHolder runat="server" ID="phTotalQueueM"><asp:Literal ID="phTotalQueueMText" runat="server"></asp:Literal></asp:PlaceHolder></span>
                    </ContentTemplate>
                </asp:UpdatePanel>

现在，既然您有可识别的 LiteralControl 实例，让我们更改代码隐藏：

phTotalQueueText.Text = "" & dtTO.Rows(0).Item("TotalOrderOffline") & ""

和

phTotalQueueMText.Text = "" & dtTO2.Rows(0).Item("TotalOrderOnline") & ""

或者，您可以从UpdatePanels 中删除旧控件，或者找到它们并修改它们的Text 属性，但这些都是hacky 方式，我建议使用可识别标签。

【讨论】：

我试过了，效果很好！！你救了我的命，也救了我的时间。非常感谢@Lajos Arpad。我还更改了asp:PlaceHolder 的 ID 和瞧！它工作:) :)