Question

目标：创建一个页面，在点击按钮时显示加载图片，在处理完成后消失。

问题：我有一个带有Ajax UpdatePanel的页面，该页面最初可以正常工作，在按钮单击时显示加载页面，然后显示GridView。然而，在那之后，页面不断刷新并将我的GridView返回到其原始状态（我做一些手动列调整OnRowDataBound，如添加图例行，合并一些单元格，单元格背景颜色更改等。）

页面的结构如下：

enter image description here

我正在尝试包含一个Ajax UpdatePanel，它会在按下Generate Report按钮后显示加载图像。

在内容页面上，我基本上包装了用户控件（报告控件显示在上面的蓝色并在下面命名为filterControl）和内容（在.aspx页面中定义的gridview并在代码隐藏中绑定）更新面板：

<asp:UpdatePanel ID="updatePanelControls" runat="server">
    <ContentTemplate>
    <uc:MultiLevelReportFilter ID="filterControl" runat="server" 
                                ReportTitle="Default Title"
                               InvisiblePanels="pnlMonths,pnlPeriods,pnlBusinessGroups,pnlDisplay,pnlBrands" 
                               DefaultAccountLevel="level4">
    </uc:MultiLevelReportFilter>

    <asp:LinkButton ID="thelink2" runat="server"></asp:LinkButton>
        <asp:UpdateProgress ID="updateProgress" runat="server">
            <ProgressTemplate>
                <div id="dvProgress" runat="server" style="background-color: aliceblue; left: 40%; position: absolute; text-align: center; top: 35%; vertical-align: middle;">
                    <div id="Div1" runat="server" style="background-color: #ffffff; border: 4px solid #DBE5F1; height: 100px; padding: 5px; text-align: center; vertical-align: middle; width: 100px; width: 300px; z-index: 1002;">
                        <asp:Image ID="Image2" runat="server" Style="margin-top: 25px" Height="50px" Width="50px"
                                   ImageUrl="~/Images/New/ajax-loader.gif" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>


<% Gridview here composed of manually bound ItemTemplate columns %>

</ContentTemplate>
</asp:UpdatePanel>

我想在btnGenerate的内容页面上添加触发器，在用户控件中看到Generate Report按钮，但页面错误因为btnGenerate实际上不在页面上而是它在控制中：

在UpdatePanel'updatePanelControls'中找不到ID为'btnGenerate'的控件。

这种结构不正确吗？我应该在用户控件或内容页面上使用Ajax吗？我正在尝试关注此MSDN example，但它没有母版页和用户控件的任何示例。

可能的原因？：我应该注意到我在主页面上使用updatePanel以当前时间异步更新标签，如下所示：

<asp:Timer ID="Clock" runat="server" Interval="10000"></asp:Timer>

<asp:UpdatePanel ID="updatePanelClock" runat="server">
                        <ContentTemplate>
                            <asp:Label ID="ClockLabel" runat="server"></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Clock" EventName="Tick"></asp:AsyncPostBackTrigger>
                        </Triggers>
                    </asp:UpdatePanel>

这是导致持续刷新的原因吗？

编辑：我添加了UpdateMode属性，并在我调用报告控件的内容页面上将其设置为Conditional。但是，页面仍然不断刷新。

Answer 1

是的，整个页面生命周期将针对每个updatepanel回发执行。服务器处理的内容不会刷新该更新面板之外的任何内容，但所有代码都将执行，就好像它是一个完整的页面回发一样。

Answer 2

尝试javascript功能

function myFunction() {
    var myVar = setInterval(function () { myTimer() }, 1000);
    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("Label1").innerHTML = "Current Time : " + t;
    }

此函数调用表单正文

<body onload="myFunction()">

VB.NET Ajax UpdatePanel不需要的回发

2 个答案: