亂馬客

 

前言

之前在做Portal時，因為有此資料會Load比較久，所以Boss就說要先呈現「載入中」才不會給User說，為何網頁Load那麼久，都「白帥帥」的。

實作

我們可以將頁面先顯示「載入中」的Panel，再利用Timer來Postback，在Timer的事件中寫入要Load資料的程式，這樣User就不會一直等到資料Load出來才看得到畫面了，這是個User感受問題。

• Page實作

以下的Default.aspx中設定2個Panel，panBody做為呈現資料的區塊(預設是不顯示的)，panTimer做為顯示「系統載入中...」的訊息。所以一開始因為都沒有Load資料，所以很快會先顯示panTimer的內容，因為有Timer，所以馬上就會再Postback去呼叫Timer的事件，所以就在Timer的Tick事件中寫讀取資料。

</asp:ScriptManager>
<asp:UpdatePanel ID="updMain" runat="server">
    <ContentTemplate>
        <asp:Panel ID="panBody" runat="server" Visible="false">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </asp:Panel>
          <asp:Panel ID="panTimer" runat="server">
          系統載入中，請稍待.......
        </asp:Panel>
        <asp:Timer ID="trmLoad" runat="server" Interval="100">
        </asp:Timer>
    </ContentTemplate>
</asp:UpdatePanel>

 

''' 取得要呈現的資料
''' </summary>
''' <remarks></remarks>
Private Sub BindData()
    System.Threading.Thread.Sleep(3000)
    '建立空的DataTable
    Dim dtResult = New System.Data.DataTable("SC_1Funs")
    dtResult.Columns.Add("FUN_ITEM_NAME", Type.GetType("System.String"))
    dtResult.Columns.Add("FUN_ITEM_ID", Type.GetType("System.String"))
    '新增資料到DataTable之中
    dtResult.Rows.Add(New String() {"Fun1_name", "Fun1"})
    dtResult.Rows.Add(New String() {"Fun2_name", "Fun2"})
    Me.GridView1.DataSource = dtResult
    Me.GridView1.DataBind()
End Sub


''' <summary>
''' Timer事件
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub trmLoad_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles trmLoad.Tick
    '只要做一次, For Delay Page Load
    trmLoad.Enabled = False
    '把載入中的Panel Hide起來
    panTimer.Visible = False
    '呼叫取得資料的函式
    BindData()
    '開啟要顯示的資料區塊
    panBody.Visible = True
End Sub

• UserControl實作

在UserControl中也可以使用相同的方式，來達到Delay Page Load的效果哦!

結論

使用Timer可以做個簡單的Delay Page Load! 我是Portal專案是直接將這些機制寫在BaseUserControl之中，並定義好Interface，所以所有的Widget都Support Delay Page Load的功能哦!

您可以看到UserControl的Delay Page Load效能比整頁Load好資料再顯示的方式還來的差，因為幾次Timer就多幾次Postback，而且是一次一次的Postback!所以要依實際運用做調整哦! 例如在每個UserControl加入Cache的機制。

Source Code:DelayPageLoad.rar

Hi, 

亂馬客Blog已移到了 「亂馬客​ : Re:從零開始的軟體開發生活」

請大家繼續支持 ^_^