嵌套更新面板导致父更新面板刷新

时间:2014-07-24 04:20:44

标签: c# asp.net gridview updatepanel updateprogress

我认为我已经尝试过使用更新面板的所有组合,而我似乎无法让这一点发挥作用。我有这样的更新小组:

<asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>

       Some content...
     <div style="width:100%;text-align:center;">
                    <asp:Label ID="lblMainMessage" runat="server"></asp:Label>
                    <asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
                        <ProgressTemplate>
                             <div class="loader ui-widget-overlay">
                                            Loading data, please wait...<br/><img style="border-style:none;" src="../../Images/ajax-loader.gif" alt="loading" />
                             </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
        </div>
        <div>
        <asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
 <ContentTemplate>
                <asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>
                                               <asp:GridView ID="gvChecklists" runat="server"
                                AutoGenerateColumns="False" >
                                <Columns>
                                        <ItemTemplate>
                                     <asp:TemplateField HeaderText="Ques. Ans. Yes">
                                        <ItemTemplate>
                                            <asp:Label ID="lblQuestionsAnsweredYes" runat="server" ForeColor="Green"
                                                Text='<%# DataBinder.Eval(Container, "DataItem.QuestionYesAnswered") %>' 
                                                ToolTip="Questions answered Yes."></asp:Label>
                                        </ItemTemplate>
                                        <FooterStyle HorizontalAlign="Center" />
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Ques. Ans. No">
                                        <ItemTemplate>
                                            <asp:Label ID="lblQuestionsAnsweredNo" runat="server" ForeColor="Red" 
                                                Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNoAnswered") %>' 
                                                ToolTip="Questions answered No."></asp:Label>
                                        </ItemTemplate>
                                        <FooterStyle HorizontalAlign="Center" />
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Ques. Ans. N/A">
                                        <ItemTemplate>
                                            <asp:Label ID="lblQuestionsAnsweredNA" runat="server" ForeColor="Gray" 
                                                Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNAAnswered") %>' 
                                                ToolTip="Questions answered N/A."></asp:Label>
                                        </ItemTemplate>
                                        <FooterStyle HorizontalAlign="Center" />
                                        <HeaderStyle HorizontalAlign="Center" />
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                </Columns>
                                </asp:GridView>  
                                <asp:Image ID="imgLoader" runat="server" ImageUrl="/Images/ajax-loader.gif" /> 
                                </td>
                                </tr>
                                </table>   
                                </div>          
                                <div style="width:100%;text-align:center;">
                                    <asp:Label ID="lblspChecklists2" runat="server"></asp:Label>
                                </div> 
             </ContentTemplate>
                 <Triggers>
                    <asp:PostBackTrigger ControlID="btnChecklistExcel"/>
                     <asp:AsyncPostBackTrigger ControlID="timerChecklists" />
                </Triggers>
             </asp:UpdatePanel>

           

我想要完成的是由于其大小而延迟加载一些gridview数据。所以我只是将gridview包装在更新面板中。然后我在这个更新面板中放置一个计时器,并为tick事件设置为10000(10秒)。我将事件设置为OnTick,如下所示:

   protected void TimerChecklistsTick(object sender, EventArgs e)
        {
            LoadChecklistsSubPanel();
            timerChecklists.Enabled = false;
            imgLoader.Visible = false;
        }

LoadChecklistsSubPanel只是获取一个数据集并将其分配给网格视图数据源并执行数据绑定。这一切都很好......但是我的问题如下:

注意提到父更新面板和子更新面板。在此我有一个与更新面板upParent关联的更新进度。但我的问题是当10秒点击并且触发了计时器事件时,会显示此updateprogress(实际上导致我的整个页面基本上加载)。我认为这不会发生,因为updatemode是条件而子项作为触发器是假的。

我也试过ChildrenAsTriggers = true,我一直尝试更新面板模式,我已经尝试过几乎所有事情,但我的问题仍然存在。当10秒钟点击UpdateProgress(显示加载数据时,请等待叠加显示。

除了我的网格视图正确绑定,它在10秒后获取数据等等。我唯一的问题是我似乎无法理解为什么UpdateProgress出现并覆盖我的整个屏幕如果发生的一切都是我的嵌套子面板应该只更新。

1 个答案:

答案 0 :(得分:3)

事实是upPanel没有更新,你可以通过在一个值为“0”的upPanel中放置一个Label来检查这一点,并在代码隐藏中的TimerChecklistsTick下添加lblTest.text + = 1。 你可以看到这个值没有任何变化。

实际上问题是UpdateProgress控件,UpdateProgress控件不是一个强大的工具,你的期望不应该很高。

如果您想要一个功能强大且可自定义的UpdateProgress,那么您应该使用JavaScript来创建自己的:

<script type="text/javascript">
    var postBackElement;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    function InitializeRequest(sender, args) {
        postBackElement = args.get_postBackElement();
        if (prm.get_isInAsyncPostBack()) {
            args.set_cancel(true);
        } else {
            //Put your progress UI here
            //Check Trigger Id if needed.
            //Show an image or Hide another div or ...
        }
    }
    function EndRequest(sender, args) {
    }
</script>


但解决方案......

但是我对你的代码玩了一点,发现如果从UpdatePanels中删除你的计时器并将它完全放在它们之外,你的问题就会得到解决。

    </ContentTemplate>
</asp:UpdatePanel>
//Outside the upParent
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>

对于放置在子更新面板内的任何控件,问题仍然存在。 我不知道是否有基础解决方案,但正如我所说,UpdateProgress是一个简单快速的解决方案,但在性能和灵活性上都不是很好。


更新 这是模拟代码对我有用(ASP.NET 4.5,Chrome 36):

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="StackOverflowTests_WebVB.net.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
            <ContentTemplate>
                <asp:Label ID="lbl1" runat="server" Text="0"></asp:Label>
                    <asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
                        <ProgressTemplate>
                            <div class="loader ui-widget-overlay">
                                Loading data, please wait...<br />
                                <img style="border-style: none;" src="../Images/loading.gif" alt="loading" />
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                <asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
                    <ContentTemplate>
                        <asp:Label ID="lbl2" runat="server" Text="0"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="timerChecklists" />
                    </Triggers>
                </asp:UpdatePanel>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="1000"></asp:Timer>
    </div>
    </form>
</body>
</html>

代码隐藏:

Protected Sub TimerChecklistsTick(sender As Object, e As EventArgs)
    lbl1.Text += 1
    lbl2.Text += 1
End Sub

在输出中,lbl2开始计数而没有完全回发,并且没有在每个Tick上显示UpdateProgress的内容。 如果您在upChild中移动Timer,您可以看到UpdateProgress的内容将显示在evey Tick上,但仍然lbl1显示0而没有任何更改。