使用 UpdatePanel 延迟加载/懒加载任意数量控件的一种通用方法

• 下载示例 - 1.35 KB

引言

本文描述了一种非常简单的方法，可以延迟加载页面中耗时的任何给定部分。它将耗时逻辑放在一个 UpdatePanel 中，并使用一个 UpdateProgress 控件来告知用户该部分的延迟加载进度。

背景

当 updateProgress 指示器仍在工作并且页面其余部分已加载时，它看起来是这样的。

在上面的截图中，页面加载时显示 3 个图像，UpdateProgress 旋转 GIF 图像告诉用户点状部分仍在加载。延迟加载完成后，LinkButton 变为活动状态并可供使用。

使用此技术的两个优点

1. 在此示例中，我仅在 UpdatePanel 中使用了一个 linkButton ，该按钮将被延迟加载。但这可以扩展到可以驻留在该 UpdatePanel 中的任何控件或任何 UI 逻辑。这使其非常通用和可扩展。例如，可以将类似的方法应用于延迟加载 ajaxToolkit:TabContainer 控件中的任何选项卡内容。
2. 此外，为了延迟加载此 UpdatePanel，逻辑未使用任何隐藏按钮或计时器。
   它从 clientside PageLoad 对该 UpdatePanel 执行 Postback 。
   在 UpdatePanel 的 PreRender 事件中，基于 "EVENTTARGET" 和 "EVENTARGUMENT"，它执行回发。因此，这是一种无需使用隐藏按钮即可执行服务器端代码的另一种方法。这个概念也可以应用于其他地方。

这是代码的客户端部分

<asp:UpdatePanel ID="upUpdatePanel" runat="server" UpdateMode="Conditional" 
        onprerender="upUpdatePanel_PreRender" >
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        <br /> 
        <asp:LinkButton ID="LinkButton1" runat="server" Enabled="false" 
		ForeColor="Black" Font-Bold="true" Font-Size="Large" 
		onclick="LinkButton1_Click">LinkButton disabled so far</asp:LinkButton>
    </ContentTemplate>
 </asp:UpdatePanel>
<asp:UpdateProgress ID="updProgressTab" runat="server" 
		AssociatedUpdatePanelID="upUpdatePanel" >
     <ProgressTemplate>
        <div style="position: relative; top: 50%; text-align: center;">
            <asp:Image ID="imgLoading" runat="server" 
		ImageUrl="simple.gif" Width="34px" Height="30px" />Refreshing...
        </div>
     </ProgressTemplate>
</asp:UpdateProgress>
<script language="javascript" type="text/javascript">
    function pageLoad(sender, e) {
        if (!e.get_isPartialLoad()) { 
            __doPostBack('<%= upUpdatePanel.ClientID %>', 'aaaa');
        }
    }
</script>

下面的这行代码 ---

"if (!e.get_isPartialLoad())" -- 确保该 If 语句内的逻辑仅在异步过程中执行一次。类似于服务器端的 !IsPostback。
它使用任意 EVENTARGUMENT string -- 例如，我使用了 "aaaa" -- 以确保在 UpdatePanel 预渲染事件中，此代码仅执行一次。
值得注意的是，UpdatePanel 事件（如 load、PreRender ）将在任何回发时运行，无论是部分回发还是常规回发。

这是代码隐藏中的 PreRender 事件处理程序

protected void upUpdatePanel_PreRender(object sender, EventArgs e)
    {
        if (Request["__EVENTTARGET"] == upUpdatePanel.ClientID && 
			Request.Form["__EVENTARGUMENT"] == "aaaa")
        {
            System.Threading.Thread.Sleep(6000);
            LinkButton1.Enabled = true;
            LinkButton1.Text = "Enabled Now";
        }
    }

在此示例中，我将 LinkButton 放在 UpdatePanel 中，直到延迟加载完成才启用它。延迟加载完成后，链接按钮将被启用。

这就是全部内容。希望这有帮助。感谢您阅读本文。

历史

• 2010 年 10 月 7 日：初始发布