首頁 > 其他

Atlas 學習之004：“UpdatePanel　”和“UpdateProgress　”使更新資料呈現動畫效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 先看一下本文的最終：

　　本文聯合使用了“UpdatePanel　”和“UpdateProgress　”兩個控制項，使更新時資料呈現動畫效果，提供給使用者等待時友好的介面，很酷的喲！

　　本文順便複習一下了建立資料集等的幾項操作。學而時習之，不亦說乎？

　　下面是詳細步驟：

1、開啟“Visual Studio 2005　”，“建立網站”，在“我的模板”下選擇“Atlas　Web　Site　”，確定。

 

2、準備本文需要的兩個檔案：

　　一個是SQL SERVER 提供的“NORTHWND.MDF　”資料庫檔案，右鍵點擊“方案總管”的“App_Data　”檔案夾，“添加現有項”把這個檔案加入進來。 

　　一個是這個圖片：：busy.gif，把它添加到“方案總管”下建立的“Image ”檔案夾裡。Let's Go!

 

3、右擊“方案總管”的項目，“添加新項”，選擇“資料集”，“添加”，點擊“是”，稍等，確保“NORTHWND.MDF　”在“TableAdapter 設定精靈”的下拉列框中，“下一步”，“下一步”，“下一步”。

 

4、點擊“查詢產生器...”，選擇“Products　”後，“添加”、“關閉”。

 

5、選擇“ProductID, ProductName, Discontinued　”3個欄位，點擊“確定”。“下一步”，把“填充DataTable(I) ”前面的勾取消，點擊“下一步”、“完成”。 

 

6、儲存所有檔案。

 

7 、雙擊“方案總管”下的“　Default.aspx　”，並切換到它的“設計”頁面。發現上面已經有了個“　ScriptManager　”控制項了，點擊它，點擊它的智能標記（Tag），在“　Enable　Partial　Rendering　”前面打上勾。

 

8、拖拽一個　GridView　控制項進來，“選擇資料來源”、“建立資料來源”，選擇“對象”、確定，選擇我們在第3--5步建立的資料配接器“ DataSet1TableAdapters.ProductsTableAdapter　 ”，點擊“下一步”，“完成”。

 

9、在接下來的“GridView任務”下選擇“啟用分頁”、“啟用編輯”。

 

10、儲存所有檔案。

11、從工具箱裡的“ Atals  ”控制項列表下 往“　Default.aspx　”的“設計”頁面拖拽一個　“　UpdatePanel　”控制項，若有什麼提示之類的，則點擊“是”，然後再把將前面的那個“　GridView　”拖拽到“　UpdatePanel　”控制項裡。

 

12、從工具箱裡的“ Atals  ”控制項列表下 往“　Default.aspx　”的“設計”頁面拖拽一個“　UpdateProgress　”控制項，若有什麼提示之類的，則點擊“是”。

 

13、選定“　UpdateProgress　”控制項，切換到“　Default.aspx　”的“源”介面，則代碼中“UpdateProgress”的控制項描述是加粗的顯示的，在其描述中加（插）入“　<ProgressTemplate>　</ProgressTemplate>　”，然後再把“方案總管”下的“ Image ”中“ updata.gif ”圖片檔案拖拽進剛才插入的程式碼片段中。再在圖片的後面插入這行代碼：“　<span style="color: #ff3366">進行中資料更新，請稍候......</span>　”，儲存所有檔案。

 

14、好，基本上可以看看效果了。按“Ctrl”+F5　運行一把，結果出來後，點擊任意一行中的“編輯”，隨便在表格中改動一下，再點擊“更新”，由於實在本機操作，基本看不見資料更新的“酷”效果，我們這樣搞一下： 切換到“　Default.aspx　”的“設計”頁面，選定“objectdatasource1 ”控制項，按“　F4　”調出“屬性”視窗，選擇“事件”（閃電標記），雙擊“　Selecting　”屬性，在其事件裡加入下面一行代碼：“　System.Threading.Thread.Sleep(2000);　”，儲存所有檔案。

 

15、再按“Ctrl”+F5　運行一把，結果出來後，點擊任意一行中的“編輯”，隨便在表格中改動一下，再點擊“更新”，效果應該出來了，當資料更新時，小圈慢慢的轉呀轉！酷呀！

 

下面提供完整代碼：

 

<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
        
        <div>
        
            <atlas:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    <img src="Iamge/busy.gif" /><span style="color: #ff3366">進行中資料更新，請稍候......</span>
                </ProgressTemplate>
            </atlas:UpdateProgress>
            
            
            
            <atlas:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
                <Columns>
                    <asp:CommandField ShowEditButton="True" />
                    <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                        ReadOnly="True" SortExpression="ProductID" />
                    <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
                    <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
                </Columns>
            </asp:GridView>
                </ContentTemplate>
            </atlas:UpdatePanel>
            
            
            
            
            <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="DataSet1TableAdapters.ProductsTableAdapter" UpdateMethod="Update" OnSelecting="ObjectDataSource1_Selecting">                
                <UpdateParameters>
                    <asp:Parameter Name="ProductName" Type="String" />
                    <asp:Parameter Name="Discontinued" Type="Boolean" />
                    <asp:Parameter Name="Original_ProductID" Type="Int32" />
                </UpdateParameters>                
            </asp:ObjectDataSource>
            
            
        </div>
    </form>
</body>
</html>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More