Microsoft Word - CH04P98

Size: px

Start display at page:

Download "Microsoft Word - CH04P98"

派农
6 years ago
Views:

在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域事實上, 除了採用宣告式語法之外, 您也可以使用程式控制方式來建立與更新 UpdatePanel 控制項, 本章將詳細討論此種作法 4-1 如何以程式控制方式更新一個 UpdatePanel 控制項 ASP.NET 3.

1 在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域事實上, 除了採用宣告式語法之外, 您也可以使用程式控制方式來建立與更新 UpdatePanel 控制項, 本章將詳細討論此種作法 4-1 如何以程式控制方式更新一個 UpdatePanel 控制項 ASP.NET 3.5 AJAX 允許您以程式控制方式來更新一個 UpdatePanel 控制項的內容, 此舉無非是為了賦予開發人員更大的自主性與彈性來決定何時去更新 UpdatePanel 控制項的內容欲以程式控制方式去更新一個 UpdatePanel 控制項的內容, 請先將 UpdatePanel 控制項的 UpdateMode 屬性設定成 Conditional, 然後呼叫 UpdatePanel 控制項的 Update 方法圖表 4-1 網頁範例 1 以程式碼更新 UpdatePanel 控制項實作圖表 4-1 所示者是網頁範例 CH4_DemoForm001.aspx 的執行畫面, 我們發現, 每當按下更新時間按鈕時,UpdatePanel2 當中的內容就會被更新, 但是 UpdatePanel1 中的內容則必須至少距離上一次更新時間五秒 4-2

鐘之後才會被更新, 而且其內容是透過呼叫 UpdatePanel1 的 Update 方法來加以更新這個網頁範例看似簡單, 不過其中的一些小細節還是值得大家仔細研讀, 徹底瞭解其運作模式, 將有助您釐清相關觀念說明如下 : 更新時間按鈕位於 UpdatePanel 控制項之外, 必須將其註冊為非同步回傳控制項圖表 4-2 圖表 4-2 所示者是網頁範例 CH4_DemoForm001.

2 鐘之後才會被更新, 而且其內容是透過呼叫 UpdatePanel1 的 Update 方法來加以更新這個網頁範例看似簡單, 不過其中的一些小細節還是值得大家仔細研讀, 徹底瞭解其運作模式, 將有助您釐清相關觀念說明如下 : 更新時間按鈕位於 UpdatePanel 控制項之外, 必須將其註冊為非同步回傳控制項圖表 4-2 圖表 4-2 所示者是網頁範例 CH4_DemoForm001.aspx 的設計畫面, 顯而易見地, 我們使用了兩個 UpdatePanel 控制項, 但是請注意, 更新時間按鈕是位於這兩個 UpdatePanel 控制項之外, 為了使更新時間按鈕被按下時會進行非同步回傳並且局部更新網頁上之 UpdatePanel 控制項的內容而並非是進行全網頁回傳, 我們必須在網頁的 Load 事件處理常式中呼叫 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法來註冊它程式碼如下所示 : protected void Page_Load(object sender, EventArgs e) this.scriptmanager1.registerasyncpostbackcontrol(btnupdatetime); 4-3

3 if (!IsPostBack) LastUpdate = DateTime.Now; 上述程式碼中的 LastUpdate 是一個使用者自訂屬性, 用來記錄 UpdatePanel1 上一次被更新的時間, 其定義程式碼如下所示 : protected DateTime LastUpdate get if (ViewState["LastUpdate"]!= null) return Convert.ToDateTime(ViewState["LastUpdate"]); else return DateTime.Now; set ViewState["LastUpdate"] = value; 請大家注意,UpdatePanel1 是利用運算式 <%= LastUpdate. ToString() %> 來顯示更新時間,UpdatePanel2 則是利用運算式 <%= DateTime.Now.ToString() %> 來顯示更新時間此外請注意, UpdatePanel1 的 UpdateMode 屬性是設定成 Conditional ; UpdatePanel2 的 UpdateMode 屬性則是採用預設值 Always: <form id="form1" runat="server"> <div> <asp:scriptmanager ID="ScriptManager1" runat="server" /> <asp:panel ID="Panel1" GroupingText="UpdatePanel1" runat="server"> 4-4

4 <asp:updatepanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <p> 此 UpdatePanel 內容被更新的先決條件是距離上一次更新五秒鐘或更久之後上一次更新時間 : <strong><%= LastUpdate.ToString() %></strong> </p> </ContentTemplate> </asp:updatepanel> </asp:panel> <asp:panel ID="Panel2" GroupingText="UpdatePanel2" runat="server"> <asp:updatepanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <p> 只要按下更新時間按鈕, 此 UpdatePanel 的內容就會被更新上一次更新時間 : <strong><%= DateTime.Now.ToString() %></strong> </p> </ContentTemplate> </asp:updatepanel> </asp:panel> <asp:button ID="btnUpdateTime" Text=" 更新時間 " runat="server" /> </div> </form> 當使用者按下更新時間按鈕就會執行以下的程式碼, 它會檢查 UpdatePanel1 距離上一次更新時間是否已經五秒鐘以上, 如果是的話, 就呼叫 UpdatePanel1 的 Update 方法來更新時間, 並且將目前的日期時間指派給自訂屬性 LastUpdate: protected void btnupdatetime_click(object sender, EventArgs e) if (LastUpdate.AddSeconds(5.0) < DateTime.Now) UpdatePanel1.Update(); LastUpdate = DateTime.Now; 4-5

5 網頁範例 2 以程式碼更新 UpdatePanel 控制項實作網頁範例 1 的 CH4_DemoForm001.aspx 可以說是刻意使用 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法以及 UpdatePanel 控制項的 Update 方法我們必須提醒大家, 要達成同樣的非同步局部更新功能有很多種途徑與手法, 以網頁範例 CH4_DemoForm001.aspx 而言, 是完全採用程式控制的方式, 但是如果您想少寫一點程式碼, 其實可以藉由設定 UpdatePanel 控制項的觸發器來達成別忘了我們在第三章就曾經提醒大家, 當一個控制項位於 UpdatePanel 之外時, 如果要要透過它來引發非同步回傳, 只需設定 UpdatePanel 控制項的 Triggers 屬性並替其加入一個由該外部控制項之特定事件的 AsyncPostBack 觸發器即可網頁範例 CH4_DemoForm002.aspx 的功能與網頁範例 CH4_DemoForm001.aspx 完全相同, 但是在作法上存在下列差異 : 網頁範例 CH4_DemoForm001.aspx 在其 Load 事件處理常式中呼叫 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法來將更新時間按鈕註冊為一個非同步回傳控制項, 然而網頁範例 CH4_DemoForm002.aspx 則是分別替 UpdatePanel1 與 UpdatePanel2 加入一個更新時間按鈕之 AsyncPostBack 觸發器 ( 如圖表 4-3 所示 ) Click 事件的當然, 如下所示, 網頁範例 CH4_DemoForm002.aspx 的 Load 事件處理常式會更簡短 : protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) LastUpdate = DateTime.Now; 4-6

6 圖表

7 另外, 如下所示, 更新時間按鈕的 Click 事件處理常式中不需要呼叫 UpdatePanel1 的 Update 方法 protected void btnupdatetime_click(object sender, EventArgs e) if (LastUpdate.AddSeconds(5.0) < DateTime.Now) LastUpdate = DateTime.Now; 請務必先選取一個部門圖表

8 請務必先選取一個部門圖表 4-5 請務必先選取一個部門圖表

9 網頁範例 5 非同步的自行車產品型錄 - 重要!! 圖表 4-11 與 4-12 是網頁範例 CH4_DemoForm005.aspx 的執行畫面, 這是一個非同步的自行車產品型錄, 其功能特性說明如下 : 如圖表 4-11 所示, 當您使用滑鼠按一下右側的產品相片縮圖, 產品相片全圖就會於左側顯示出來如圖表 4-11 所示, 當您將滑鼠指標移至某一個產品相片縮圖的上方時, 會立刻顯示一個立體外框以及產品相片編號如圖表 4-12 所示, 您可以使用上下兩組數字按鈕來捲動產品相片縮圖這是一個非同步介面, 也就是說, 當您執行上述操作時, 網頁不會整個重新整理, 當然也就不會發生惱人的閃爍狀況本網頁範例的產品相片縮圖與全圖是分別提取自北風貿易資料庫之自行車產品相片資料表的相片縮圖與相片全圖欄位其實這一個非同步的自行車產品型錄是結合 UpdatePanel 控制項與 GridView 控制項所製作出來的, 相關設計技巧說明如下 : 圖表 4-13 所示者是網頁範例 CH4_DemoForm005.aspx 的設計畫面, 從中可以看出, 我們使用了兩個 UpdatePanel 控制項, 內含於左側 UpdatePanel 控制項 ( 亦即 LargeImageUpdatePanel) 中的 Image 控制項是用來顯示產品照片全圖, 內含於右側 UpdatePanel 控制項 ( 亦即 SmallImageUpdatePanel) 中的 GridView 控制項則是用來顯示並捲動產品相片縮圖由於我們會透過程式控制方式來更新 LargeImageUpdatePanel 的內容 ( 亦即呼叫其 Update 方法 ), 因此請務必將它的 UpdateMode 屬性設定成 Conditional 此外, 由於我們會替 SmallImageUpdatePanel 4-22

定義 AsyncPostBack 觸發器, 因此也請務必將它的 UpdateMode 屬性設定成 Conditional 這一個 Image 控制項用來顯示產品相片全圖這一個 GridView 控制項用來顯示並捲動產品相片縮圖圖表 4-13 用來顯示與捲動產品相片縮圖的 GridView 控制項是本範例最重要的設計核心, 接下來我們要詳細說明其設計技巧 GridView

10 定義 AsyncPostBack 觸發器, 因此也請務必將它的 UpdateMode 屬性設定成 Conditional 這一個 Image 控制項用來顯示產品相片全圖這一個 GridView 控制項用來顯示並捲動產品相片縮圖圖表 4-13 用來顯示與捲動產品相片縮圖的 GridView 控制項是本範例最重要的設計核心, 接下來我們要詳細說明其設計技巧 GridView 控制項的資料來源是一個 SqlDataSource 物件, 此一資料來源物件會向北風貿易資料庫送出下面這一道查詢陳述式 : SELECT [ 產品相片編號 ] FROM [ 自行車產品相片 ] ORDER BY [ 產品相片編號 ] DESC GridView 控制項並不是直接顯示查詢所得的產品相片編號, 取而代之的是, 它使用了一個樣板資料行, 並於此樣板資料行中加入 4-23

一個 ImageButton 控制項 ( 如圖表 4-14 所示 ), 重要的是, 我們必須如下所示設定 ImageButton 控制項的各個屬性 : <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl= '<%# Eval(" 產品相片編號 ", "~/DisplayBikeSmallImage.

11 一個 ImageButton 控制項 ( 如圖表 4-14 所示 ), 重要的是, 我們必須如下所示設定 ImageButton 控制項的各個屬性 : <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl= '<%# Eval(" 產品相片編號 ", "~/DisplayBikeSmallImage.ashx?ProductPhotoID=0") %>' CommandName="ShowLargPhoto" CommandArgument='<%# Eval(" 產品相片編號 ") %>' ToolTip='<%# Eval("f", " 產品相片編號 0") %>' /> 這是一個 ImageButton 控制項, 用來顯示產品相片縮圖圖表

12 從 ImageButton 控制項的上述設定可以看出以下端倪 : 從 ImageUrl 屬性的設定可以瞭解, 查詢所得的產品相片編號會傳遞給泛型處理常式 DisplayBikeSmallImage.ashx 以便從自行車產品相片資料表之對應資料列的相片縮圖欄位取得產品相片縮圖, 並將其以 JPEG 格式傳回並顯示於 ImageButton 控制項中我們將文字串 "ShowLargPhoto" 指派給 CommandName 屬性, 此舉是為了爾後能夠在 GridView 控制項的 RowCommand 事件處理常式中判斷使用者是否按下的是 ImageButton 控制項 ( 亦即是否按下了產品相片縮圖 ) 我們將產品相片編號指派給 CommandArgument 屬性, 此舉是為了爾後能夠在 GridView 控制項的 RowCommand 事件處理常式中取得使用者所按下之 ImageButton 控制項 ( 亦即產品相片縮圖 ) 的對應產品相片編號, 以便將產品相片編號指派給泛型處理常式 DisplayBikeLargeImage.ashx 來取得產品相片全圖由於我們將 '<%# Eval(" 產品相片編號 ", " 產品相片編號 0") %>' 指派給 ToolTip 屬性, 因此當您將滑鼠指標移至某一個產品相片縮圖的上方時, 產品相片縮圖會立刻顯示出產品相片編號 ( 如圖表 4-11 所示 ) 我們必須替 GridView 控制項的 RowCommand 事件處理常式撰寫下列程式碼, 它會判斷使用者是否按下產品相片縮圖, 如果是的話, 就將 CommandArgument 屬性所持有的產品相片編號傳遞給泛型處理常式 DisplayBikeLargeImage.ashx 來取得產品相片全圖所取得的產品相片全圖會被指派給 LargeImageUpdatePanel 中的 Image 控制項, 並隨即呼叫 LargeImageUpdatePanel 的 Update 方法, 如此即可將產品相片全圖顯示出來 : protected void GridView1_RowCommand( object sender, GridViewCommandEventArgs e) // 如果使用者按下產品相片縮圖 4-25

13 if (e.commandname == "ShowLargPhoto") this.largeimage.imageurl = "DisplayBikeLargeImage.ashx?PhotoId=" + e.commandargument.tostring(); // 呼叫 LargeImageUpdatePanel 的 Update 方法來更新其內容 this.largeimageupdatepanel.update(); 請替 GridView 控制項的 RowDataBound 事件處理常式撰寫下列程式碼, 如此一來, 當您將滑鼠指標移至某一個產品相片縮圖的上方時, 產品相片縮圖會立刻顯示一個立體外框 : protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e) if (e.row.rowtype == DataControlRowType.DataRow) // 此處不可以用 UpdatePanel.FindControl ImageButton MyImageButton = (ImageButton)(e.Row.FindControl("ImageButton1")); if (MyImageButton!= null) MyImageButton.Attributes.Add( "onmouseover", "SetNewBorder(this);"); MyImageButton.Attributes.Add( "onmouseout", "SetOldBorder(this);"); 我們必須替網頁的 Load 事件處理常式撰寫下列程式碼, 以便在網頁開啟後而使用者尚未按下任何一個產品相片縮圖時, 顯示第一個產品相片全圖 : protected void Page_Load(object sender, EventArgs e) 4-26

14 if (!IsPostBack) // 以下的陳述式採用 LINQ 寫法 // 建立一個 DataContext 物件 chtnorthwinddatacontext db = new chtnorthwinddatacontext(); // 從章立民研究室資料表提取資料 var result = from Bike in db. 自行車產品相片 orderby Bike. 產品相片編號 descending select Bike. 產品相片編號 ; this.largeimage.imageurl = "DisplayBikeLargeImage.ashx?PhotoId=" + result.first().tostring(); 對於內含 GridView 控制項的 SmallImageUpdatePanel 而言, 還必須完成下列兩項非常重要的設定 : 當我們按一下 GridView 控制項中的產品相片縮圖時, 必須引發非同步回傳並局部更新 LargeImageUpdatePanel 中的內容以便顯示出使用者所按下之產品相片縮圖的對應產品相片全圖, 但是它本身所在的 SmallImageUpdatePanel 則不需要更新以免造成無謂的資料傳送和更新欲達此目的, 您必須將 SmallImageUpdatePanel 的 ChildrenAsTriggers 屬性設定成 False 當我們按一下 GridView 控制項的數字按鈕來捲動縮圖時, 必須引發非同步回傳並局部更新它所在的 SmallImageUpdatePanel, 然而我們剛剛已經將 SmallImageUpdatePanel 的 ChildrenAsTriggers 屬性設定成 False, 如此一來, 雖然按一下數字按鈕會引發非同步回傳, 然而它本身所在的 SmallImageUpdatePanel 並不會被更新如何解決這一個衝突狀況呢? 非常簡單, 您只需替 SmallImageUpdatePanel 控制項的 4-27

Trigger 屬性定義一個由 GridView 控制項之 PageIndexChanged 事件所引發的 AsyncPostBackTrigger 觸發器即可 ( 如圖表 4-15 所示 ), 其實這就是將 UpdatePanel 的觸發器設定成位於由其內部之控制項事件來引發的典型案例圖表 4-15 泛型處理常式 DisplayBikeSmallImage.

15 Trigger 屬性定義一個由 GridView 控制項之 PageIndexChanged 事件所引發的 AsyncPostBackTrigger 觸發器即可 ( 如圖表 4-15 所示 ), 其實這就是將 UpdatePanel 的觸發器設定成位於由其內部之控制項事件來引發的典型案例圖表 4-15 泛型處理常式 DisplayBikeSmallImage.ashx 會使用 LINQ 語法查詢北風貿易資料庫的自行車產品相片資料表, 以便將指定產品相片編號之資料列的相片縮圖欄位內容提取出來並以 JPEG 格式傳回其程式碼如下所列 :( 範例光碟的原始檔案中以註解方式保留了傳統的 ADO.NET 寫法, 請自行參考之 ) <%@ WebHandler Language="C#" Class="DisplayBikeSmallImage" %> using System; using System.Web; using System.Data; using System.Data.SqlClient; using System.Web.Configuration; using System.Linq; public class DisplayBikeSmallImage : IHttpHandler public void ProcessRequest (HttpContext context) 4-28

16 // 以下這一段程式碼結合了新式的 LINQ 寫法 if (!string.isnullorempty( HttpContext.Current.Request.QueryString["ProductPhotoId"])) // 取得傳遞進來的產品相片編號 int intproductphotoid = Convert.ToInt32( HttpContext.Current.Request.QueryString["ProductPhotoId"]); // 以下這兩道陳述式採用 LINQ 寫法 // 建立一個 DataContext 物件 chtnorthwinddatacontext db = new chtnorthwinddatacontext(); // 從自行車產品相片資料表提取相片縮圖欄位內容 var result = from bike in db. 自行車產品相片 where bike. 產品相片編號 == intproductphotoid select bike. 相片縮圖 ; // 改變 HTTP 檔頭的輸出格式, 以便讓瀏覽器知道所輸出的檔案格式是 JPEG 圖檔 context.response.contenttype = "Image/JPEG"; context.response.clear(); context.response.bufferoutput = true; // 請注意, 我們將 System.Data.Linq.Binary 轉換成 Byte[] context.response.binarywrite( (byte[])(result.first().toarray())); context.response.end(); 4-29

17 泛型處理常式 DisplayBikeLargeImage.ashx 會使用 LINQ 語法查詢北風貿易資料庫的自行車產品相片資料表, 以便將指定產品相片編號之資料列的相片全圖欄位內容提取出來並以 JPEG 格式傳回其程式碼如下所列 :( 範例光碟的原始檔案中以註解方式保留了傳統的 ADO.NET 寫法, 請自行參考之 ) <%@ WebHandler Language="C#" Class="DisplayBikeLargeImage" %> using System; using System.Web; using System.Data; using System.Data.SqlClient; using System.Web.Configuration; using System.Linq; public class DisplayBikeLargeImage : IHttpHandler public void ProcessRequest (HttpContext context) // 以下這一段程式碼結合了新式的 LINQ 寫法 if (!string.isnullorempty( HttpContext.Current.Request.QueryString["PhotoId"])) // 取得傳遞進來的產品相片編號 int intproductphotoid = Convert.ToInt32( HttpContext.Current.Request.QueryString["PhotoId"]); // 以下這兩道陳述式採用 LINQ 寫法 // 建立一個 DataContext 物件 chtnorthwinddatacontext db = new chtnorthwinddatacontext(); // 從自行車產品相片資料表提取相片全圖欄位內容 var result = from bike in db. 自行車產品相片 where bike. 產品相片編號 == intproductphotoid 4-30

在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域事實上, 除了採用宣告式語法之外, 您也可以使用程式控制方式來建立與更新 UpdatePanel 控制項, 本章將詳細討論此種作法 4-1 如何以程式控制方式更新一個 UpdatePanel

本章將討論下列主題 : 如何以程式控制方式更新一個 UpdatePanel 控制項如何以程式控制方式建立一個 UpdatePanel 控制項如何於自訂控制項中啟用局部更新功能自訂 UpdatePanel 控制項的錯誤處理使用 JavaScript 程式碼來自訂 UpdatePanel 控制項的錯誤處理在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域