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

Size: px

Start display at page:

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

悠蠡茅
5 years ago
Views:

1 本章將討論下列主題 : 如何以程式控制方式更新一個 UpdatePanel 控制項如何以程式控制方式建立一個 UpdatePanel 控制項如何於自訂控制項中啟用局部更新功能自訂 UpdatePanel 控制項的錯誤處理使用 JavaScript 程式碼來自訂 UpdatePanel 控制項的錯誤處理

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

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

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

4 上述程式碼中的 LastUpdate 是一個使用者自訂屬性, 用來記錄 UpdatePanel1 上一次被更新的時間, 其定義程式碼如下所示 : Protected Property LastUpdate() As DateTime Get If ViewState("LastUpdate") IsNot Nothing Then Return CDate(ViewState("LastUpdate")) Else Return DateTime.Now() End Get Set(ByVal Value As DateTime) ViewState("LastUpdate") = Value End Set End Property 請大家注意,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"> <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> 4-4

5 只要按下更新時間按鈕, 此 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 Sub btnupdatetime_click(byval sender As Object, _ ByVal e As System.EventArgs) _ Handles btnupdatetime.click If (LastUpdate.AddSeconds(5.0) < DateTime.Now) Then UpdatePanel1.Update() LastUpdate = DateTime.Now 網頁範例 2 以程式碼更新 UpdatePanel 控制項實作網頁範例 1 的 CH4_DemoForm001.aspx 可以說是刻意使用 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法以及 UpdatePanel 控制項的 Update 方法我們必須提醒大家, 要達成同樣的非同步局部更新功能有很多種途徑與手法, 以網頁範例 CH4_DemoForm001.aspx 而言, 是完全採用程式控制的方式, 但是如果您想少寫一點程式碼, 其實可以藉由設定 UpdatePanel 控制項的觸發器來達成別忘了我們在第三章就曾經提醒大家, 當一個控制項位於 UpdatePanel 之外時, 如果要要透過它來引發非同步回傳, 只需設定 UpdatePanel 控制項的 Triggers 屬性並替其加入一個由該外部控制項之特定事件的 AsyncPostBack 觸發器即可 4-5

6 網頁範例 CH4_DemoForm002.aspx 的功能與網頁範例 CH4_DemoForm001.aspx 完全相同, 但是在作法上存在下列差異 : 網頁範例 CH4_DemoForm001.aspx 在其 Load 事件處理常式中呼叫 ScriptManager 控制項的 RegisterAsyncPostBackControl 方法來將更新時間按鈕註冊為一個非同步回傳控制項, 然而網頁範例 CH4_DemoForm002.aspx 則是分別替 UpdatePanel1 與 UpdatePanel2 加入一個更新時間按鈕之 Click 事件的 AsyncPostBack 觸發器 (4-3) 當然, 如下所示, 網頁範例 CH4_DemoForm002.aspx 的 Load 事件處理常式會更簡短 : Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LastUpdate = DateTime.Now 圖表

另外, 如下所示, 更新時間按鈕的 Click 事件處理常式中不需要呼叫 UpdatePanel1 的 Update 方法 Protected Sub btnupdatetime_click(byval sender As Object, _ ByVal e As System.EventArgs) Handles btnupdatetime.click If (LastUpdate.

7 另外, 如下所示, 更新時間按鈕的 Click 事件處理常式中不需要呼叫 UpdatePanel1 的 Update 方法 Protected Sub btnupdatetime_click(byval sender As Object, _ ByVal e As System.EventArgs) Handles btnupdatetime.click If (LastUpdate.AddSeconds(5.0) < DateTime.Now) Then LastUpdate = DateTime.Now 網頁範例 3 以程式控制方式局部更新薪資數據與 2D 圓餅圖圖表 4 至圖表 6 是網頁範例 CH4_DemoForm003.aspx 的執行畫面, 您可以在選取某一個部門之後, 執行下列操作 : 按一下顯示數據按鈕會使用一個 GridView 控制項來顯示出該部門之男女平均薪資值, 並將圓餅圖隱藏起來按一下顯示圓餅圖按鈕會使用一個動態繪製的圓餅圖來顯示出該部門之男女平均薪資值, 並將 GridView 控制項的數據表隱藏起來按一下兩者皆顯示按鈕會同時顯示出 GridView 控制項的數據表與圓餅圖請務必先選取一個部門圖表

8 請務必先選取一個部門圖表 4-5 請務必先選取一個部門圖表 4-6 如果您並未選取任何一個部門就按下上述任何一個按鈕, 將會使得 GridView 控制項的數據表與圓餅圖同時被隱藏起來 4-8

本網頁範例主要示範如何叫用 UpdatePanel 控制項的 Update 方法, 相關設計技巧說明如下 : 如圖表 4-7 所示, 我們已經將用來顯示平均薪資數據的 GridView 控制項以及用來顯示圓餅圖的 Image 控制項分別擺在各自的 UpdatePanel 控制項中, 重要的是, 由於我們要藉由呼叫 UpdatePanel 控制項的 Update 方法來執行局部更新作業,

9 本網頁範例主要示範如何叫用 UpdatePanel 控制項的 Update 方法, 相關設計技巧說明如下 : 如圖表 4-7 所示, 我們已經將用來顯示平均薪資數據的 GridView 控制項以及用來顯示圓餅圖的 Image 控制項分別擺在各自的 UpdatePanel 控制項中, 重要的是, 由於我們要藉由呼叫 UpdatePanel 控制項的 Update 方法來執行局部更新作業, 因此務必將這兩個 UpdatePanel 控制項的 UpdateMode 屬性設定成 Conditional UpdateMode = Conditional 圖表 4-7 您必須替網頁的 Load 事件處理常式撰寫下列程式碼, 以便將位於 UpdatePanel 控制項之外的三個按鈕註冊為非同步回傳控制項 : Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load ' 將網頁上的三個 Button 控制項註冊為非同步回傳控制項 Me.ScriptManager1.RegisterAsyncPostBackControl(Me.btnShowData) Me.ScriptManager1.RegisterAsyncPostBackControl(Me.btnShowPieChart) Me.ScriptManager1.RegisterAsyncPostBackControl(Me.btnShowBoth) 4-9

10 請替顯示數據按鈕的 Click 事件處理常式撰寫下列程式碼, 它會依序呼叫兩個 UpdatePanel 控制項的 Update 方法以便局部更新它們的內容來顯示出 GridView 控制項的數據表並隱藏圓餅圖 : Protected Sub btnshowdata_click(byval sender As Object, _ ByVal e As System.EventArgs) Handles btnshowdata.click If Me.DepartmentDropDownList.SelectedIndex > 0 Then Me.SqlDataSource1.SelectParameters("Department").DefaultValue = _ Me.DepartmentDropDownList.SelectedItem.ToString ' 將 GridView 顯示出來 Me.GridView1.Visible = True Else ' 將 GridView 隱藏起來 Me.GridView1.Visible = False ' 呼叫 GridView 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforGridView.Update() ' 將圓餅圖隱藏起來 Me.Image1.Visible = False ' 呼叫 Image 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforPieChart.Update() 請替顯示圓餅圖按鈕的 Click 事件處理常式撰寫下列程式碼, 它會呼叫依序呼叫兩個 UpdatePanel 控制項的 Update 方法以便局部更新它們的內容來顯示出圓餅圖並隱藏 GridView 控制項的數據表 : Protected Sub btnshowpiechart_click(byval sender As Object, _ ByVal e As System.EventArgs) Handles btnshowpiechart.click If Me.DepartmentDropDownList.SelectedIndex > 0 Then Me.Image1.ImageUrl = "DisplayPieChart.ashx?Department=" & _ Server.UrlEncode(Me.DepartmentDropDownList.SelectedItem.ToString) ' 將圓餅圖顯示出來 4-10

11 Me.Image1.Visible = True Else ' 將圓餅圖隱藏起來 Me.Image1.Visible = False ' 呼叫 Image 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforPieChart.Update() ' 將 GridView 隱藏起來 Me.GridView1.Visible = False ' 呼叫 GridView 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforGridView.Update() 請替兩者皆顯示按鈕的 Click 事件處理常式撰寫下列程式碼, 它會呼叫依序呼叫兩個 UpdatePanel 控制項的 Update 方法以便局部更新其內容來同時顯示或同時隱藏 GridView 控制項的數據表與圓餅圖 : Protected Sub btnshowboth_click(byval sender As Object, _ ByVal e As System.EventArgs) Handles btnshowboth.click If Me.DepartmentDropDownList.SelectedIndex > 0 Then Me.SqlDataSource1.SelectParameters("Department").DefaultValue = _ Me.DepartmentDropDownList.SelectedItem.ToString Me.Image1.ImageUrl = "DisplayPieChart.ashx?Department=" & _ Server.UrlEncode(Me.DepartmentDropDownList.SelectedItem.ToString) Me.GridView1.Visible = True Me.Image1.Visible = True Else Me.GridView1.Visible = False Me.Image1.Visible = False ' 呼叫 GridView 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforGridView.Update() ' 呼叫 Image 控制項所在之 UpdatePanel 控制項的 Update 方法 Me.UpdatePanelforPieChart.Update() 4-11

12 泛型處理常式 DisplayPieChart.ashx 會取得傳遞給它的部門名稱, 查詢出該部門男性與女性的平均薪資, 並且將所繪製出的圓餅圖傳回請自行參閱其程式碼, 於此不再列出照片是直接從資料庫提取而來圖表 4-8 照片是直接從資料庫提取而來圖表

13 網頁範例 4 以程式控制方式局部更新產品類別照片與產品資料圖表 4-8 與 4-9 是網頁範例 CH4_DemoForm004.aspx 的執行畫面, 按一下 GridView 控制項中的檢視產品類別照片按鈕即會將該產品類別的照片顯示在網頁上, 按一下 GridView 控制項中的檢視此類別的產品按鈕即會將隸屬該產品類別的所有產品資料顯示在網頁上由於此網頁已注入非同步局部更新功能, 因此在整個操作過程中, 網頁不會發生全網頁更新的閃爍狀況相關設計技巧重點說明如下 : 基本上, 本網頁範例是透過呼叫 UpdatePanel 控制項的 Update 方法來局部更新照片與產品明細資料欲達此目的, 您必須如圖表 4-10 所示, 將用來顯示照片的 Image 控制項以及用來顯示產品明細的 GridView 控制項分別擺放在各自的 UpdatePanel 控制項中, 並且務必將 UpdatePanel 控制項的 UpdateMode 屬性設定成 Conditional UpdateMode = Conditional 圖表

14 我們必須將用來顯示產品類別的 GridView 控制項註冊成一個非同步回傳控制項, 欲達此目的, 請於網頁的 Load 事件處理常式中撰寫下列程式碼 : Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load Me.ScriptManager1.RegisterAsyncPostBackControl(Me.CategoryGridView) 您必須替顯示產品類別之 GridView 控制項的 RowCommand 事件處理常式撰寫下列程式碼, 以便判斷使用者是按下哪一個按鈕, 執行所需的處理, 並呼叫對應之 UpdatePanel 控制項的 Update 方法來進行局部更新 : Protected Sub CategoryGridView_RowCommand(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _ Handles CategoryGridView.RowCommand ' 如果使用者按下檢視產品類別照片按鈕 If e.commandname = "ShowCategoryPhoto" Then Dim CategoryId As Integer = _ CInt(Me.CategoryGridView.DataKeys( _ Convert.ToInt32(e.CommandArgument)).Value) Me.Image1.ImageUrl = "DisplayCategoryPhoto.ashx?Id=" & CategoryId If Me.Image1.Visible = False Then Me.Image1.Visible = True Me.PhotoUpdatePanel.Update() ' 如果使用者按下檢視此類別的產品按鈕 If e.commandname = "ShowProducts" Then Me.SqlDataSource2.SelectParameters("CategoryId").DefaultValue = _ Me.CategoryGridView.DataKeys( _ Convert.ToInt32(e.CommandArgument)).Value.ToString Me.ProductsUpdatePanel.Update() 4-14

15 泛型處理常式 DisplayCategoryPhoto.ashx 會取得傳遞給它的類別編號, 提取出該產品類別之資料記錄的圖片欄位內容, 並且將欄位中照片資料以 JPEG 格式傳回以便顯示於 Image 控制項中茲將程式碼完整列示如下 : <%@ WebHandler Language="VB" Class="DisplayCategoryPhoto" %> Option Strict On Imports System Imports System.Web Imports System.Data Imports System.Data.SqlClient Imports System.Web.Configuration Public Class DisplayCategoryPhoto : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) _ Implements IHttpHandler.ProcessRequest ' 取得產品類別編號 Dim intcategoryid As Integer = CInt(context.Request.QueryString("Id")) ' 取得 web.config 中的資料庫連線字串設定來建立 SQL 連線物件 Using cn As New _ SqlConnection(WebConfigurationManager.ConnectionStrings( _ "chtnorthwindconnectionstring").connectionstring) Dim SQLCmd As SqlCommand = cn.createcommand() ' 指派查詢陳述式 SQLCmd.CommandText = _ "SELECT 圖片 FROM dbo. 產品類別 WHERE 類別編號 SQLCmd.Parameters.Add("@ImageID", Data.SqlDbType.Int).Value = _ intcategoryid ' 開啟資料庫連接並將資料讀入資料讀取器中 cn.open() Using dr As SqlDataReader = _ SQLCmd.ExecuteReader(CommandBehavior.SingleRow) If dr.read() Then With context.response 4-15

16 ' 改變 HTTP 檔頭的輸出格式, 以便讓瀏覽器知道所輸出的檔案格式是 JPEG 圖檔.ContentType = "Image/JPEG".Clear().BufferOutput = True ' 請注意, 此處使用 SqlDataReader 的 GetSqlBytes 方法.BinaryWrite(dr.GetSqlBytes(0).Value) End With End Using End Using... End Class 將滑鼠指標移至縮圖上方時, 會顯示一個立體外框以及產品相片編號圖表

17 您可以利用上下這兩組數字按鈕來捲動產品相片縮圖圖表

18 網頁範例 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 定義 AsyncPostBack 觸發器, 因此也請務必將它的 UpdateMode 屬性設定成 Conditional 4-18

這一個 Image 控制項用來顯示產品相片全圖這一個 GridView 控制項用來顯示並捲動產品相片縮圖圖表 4-13 用來顯示與捲動產品相片縮圖的 GridView 控制項是本範例最重要的設計核心, 接下來我們要詳細說明其設計技巧 GridView 控制項的資料來源是一個 SqlDataSource 物件, 此一資料來源物件會向北風貿易資料庫送出下面這一道查詢陳述式 : SELECT

19 這一個 Image 控制項用來顯示產品相片全圖這一個 GridView 控制項用來顯示並捲動產品相片縮圖圖表 4-13 用來顯示與捲動產品相片縮圖的 GridView 控制項是本範例最重要的設計核心, 接下來我們要詳細說明其設計技巧 GridView 控制項的資料來源是一個 SqlDataSource 物件, 此一資料來源物件會向北風貿易資料庫送出下面這一道查詢陳述式 : SELECT [ 產品相片編號 ] FROM [ 自行車產品相片 ] ORDER BY [ 產品相片編號 ] DESC GridView 控制項並不是直接顯示查詢所得的產品相片編號, 取而代之的是, 它使用了一個樣板資料行, 並於此樣板資料行中加入一個 ImageButton 控制項 ( 如圖表 4-14 所示 ), 重要的是, 我們必須如下所示設定 ImageButton 控制項的各個屬性 : <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl= 4-19

%>' /> 這是一個 ImageButton 控制項, 用來顯示產品相片縮圖圖表 4-14 從 ImageButton 控制項的上述設定可以看出以下端倪 : 從 ImageUrl 屬性的設定可以瞭解, 查詢所得的產品相片編號會傳遞給泛型處理常式

20 '<%# Eval(" 產品相片編號 ", "~/DisplayBikeSmallImage.ashx?ProductPhotoID={0}") %>' CommandName="ShowLargPhoto" CommandArgument='<%# Eval(" 產品相片編號 ") %>' ToolTip='<%# Eval(" 產品相片編號 ", " 產品相片編號 {0}") %>' /> 這是一個 ImageButton 控制項, 用來顯示產品相片縮圖圖表 4-14 從 ImageButton 控制項的上述設定可以看出以下端倪 : 從 ImageUrl 屬性的設定可以瞭解, 查詢所得的產品相片編號會傳遞給泛型處理常式 DisplayBikeSmallImage.ashx 以便從自行車產品相片資料表之對應資料列的相片縮圖欄位取得產品相片縮圖, 並將其以 JPEG 格式傳回並顯示於 ImageButton 控制項中我們將文字串 "ShowLargPhoto" 指派給 CommandName 屬性, 此舉是為了爾後能夠在 GridView 控制項的 RowCommand 事件處理常式中判斷使用者是否按下的是 ImageButton 控制項 ( 亦即是否按下了產品相片縮圖 ) 4-20

21 我們將產品相片編號指派給 CommandArgument 屬性, 此舉是為了爾後能夠在 GridView 控制項的 RowCommand 事件處理常式中取得使用者所按下之 ImageButton 控制項 ( 亦即產品相片縮圖 ) 的對應產品相片編號, 以便將產品相片編號指派給泛型處理常式 DisplayBikeLargeImage.ashx 來取得產品相片全圖由於我們將 '<%# Eval(" 產品相片編號 ", " 產品相片編號 {0}") %>' 指派給 ToolTip 屬性, 因此當您將滑鼠指標移至某一個產品相片縮圖的上方時, 產品相片縮圖會立刻顯示出產品相片編號 ( 如圖表 4-11 所示 ) 我們必須替 GridView 控制項的 RowCommand 事件處理常式撰寫下列程式碼, 它會判斷使用者是否按下產品相片縮圖, 如果是的話, 就將 CommandArgument 屬性所持有的產品相片編號傳遞給泛型處理常式 DisplayBikeLargeImage.ashx 來取得產品相片全圖所取得的產品相片全圖會被指派給 LargeImageUpdatePanel 中的 Image 控制項, 並隨即呼叫 LargeImageUpdatePanel 的 Update 方法, 如此即可將產品相片全圖顯示出來 : Protected Sub GridView1_RowCommand(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _ Handles GridView1.RowCommand ' 如果使用者按下產品相片縮圖 If e.commandname = "ShowLargPhoto" Then Me.LargeImage.ImageUrl = _ "DisplayBikeLargeImage.ashx?PhotoId=" & e.commandargument.tostring ' 呼叫 LargeImageUpdatePanel 的 Update 方法來更新其內容 Me.LargeImageUpdatePanel.Update() 請替 GridView 控制項的 RowDataBound 事件處理常式撰寫下列程式碼, 如此一來, 當您將滑鼠指標移至某一個產品相片縮圖的上方時, 產品相片縮圖會立刻顯示一個立體外框 : Protected Sub GridView1_RowDataBound(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _ Handles GridView1.RowDataBound 4-21

22 If e.row.rowtype = DataControlRowType.DataRow Then ' 此處不可以用 UpdatePanel.FindControl Dim MyImageButton As ImageButton = _ CType(e.Row.FindControl("ImageButton1"), ImageButton) If MyImageButton IsNot Nothing Then MyImageButton.Attributes.Add("onMouseOver", "SetNewBorder(this);") MyImageButton.Attributes.Add("onMouseOut", "SetOldBorder(this);") 我們必須替網頁的 Load 事件處理常式撰寫下列程式碼, 以便在網頁開啟後而使用者尚未按下任何一個產品相片縮圖時, 顯示第一個產品相片全圖 : Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then ' 取得 web.config 中的資料庫連線字串設定來建立 SQL 連線物件 Using cn As New SqlConnection( _ WebConfigurationManager.ConnectionStrings( _ "chtnorthwind").connectionstring) Dim SQLCmd As SqlCommand = cn.createcommand() ' 指派查詢陳述式 SQLCmd.CommandText = "SELECT TOP 1 [ 產品相片編號 ] FROM " & _ "[ 自行車產品相片 ] ORDER BY [ 產品相片編號 ] DESC" ' 開啟資料庫連接並將資料讀入資料讀取器中 cn.open() Using dr As SqlDataReader = _ SQLCmd.ExecuteReader(CommandBehavior.SingleRow) If dr.read() Then Me.LargeImage.ImageUrl = _ "DisplayBikeLargeImage.ashx?PhotoId=" & _ dr.getsqlint32(0).tostring End Using End Using 4-22

對於內含 GridView 控制項的 SmallImageUpdatePanel 而言, 還必須完成下列兩項非常重要的設定 : 當我們按一下 GridView 控制項中的產品相片縮圖時, 必須引發非同步回傳並局部更新 LargeImageUpdatePanel 中的內容以便顯示出使用者所按下之產品相片縮圖的對應產品相片全圖, 但是它本身所在的 SmallImageUpdatePanel

23 對於內含 GridView 控制項的 SmallImageUpdatePanel 而言, 還必須完成下列兩項非常重要的設定 : 當我們按一下 GridView 控制項中的產品相片縮圖時, 必須引發非同步回傳並局部更新 LargeImageUpdatePanel 中的內容以便顯示出使用者所按下之產品相片縮圖的對應產品相片全圖, 但是它本身所在的 SmallImageUpdatePanel 則不需要更新以免造成無謂的資料傳送和更新欲達此目的, 您必須將 SmallImageUpdatePanel 的 ChildrenAsTriggers 屬性設定成 False 當我們按一下 GridView 控制項的數字按鈕來捲動縮圖時, 必須引發非同步回傳並局部更新它所在的 SmallImageUpdatePanel, 然而我們剛剛已經將 SmallImageUpdatePanel 的 ChildrenAsTriggers 屬性設定成 False, 如此一來, 雖然按一下數字按鈕會引發非同步回傳, 然而它本身所在的 SmallImageUpdatePanel 並不會被更新如何解決這一個衝突狀況呢? 非常簡單, 您只需替 SmallImageUpdatePanel 控制項的 Trigger 屬性定義一個由 GridView 控制項之 PageIndexChanged 事件所引發的 AsyncPostBackTrigger 觸發器即可 ( 如圖表 4-15 所示 ), 其實這就是將 UpdatePanel 的觸發器設定成位於由其內部之控制項事件來引發的典型案例圖表

24 泛型處理常式 DisplayBikeSmallImage.ashx 會查詢北風貿易資料庫的自行車產品相片資料表, 以便將指定產品相片編號之資料列的相片縮圖欄位內容提取出來並以 JPEG 格式傳回其程式碼如下所列 : <%@ WebHandler Language="VB" Class="DisplayBikeSmallImage" %> Option Strict On Imports System Imports System.Web Imports System.Data Imports System.Data.SqlClient Imports System.Web.Configuration Public Class DisplayBikeSmallImage : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) _ Implements IHttpHandler.ProcessRequest ' 取得產品相片編號 Dim intproductphotoid As Integer = _ CInt(context.Request.QueryString("ProductPhotoId")) ' 取得 web.config 中的資料庫連線字串設定來建立 SQL 連線物件 Using cn As New SqlConnection( _ WebConfigurationManager.ConnectionStrings( _ "chtnorthwind").connectionstring) Dim SQLCmd As SqlCommand = cn.createcommand() ' 指派查詢陳述式 SQLCmd.CommandText = _ "SELECT 相片縮圖 FROM dbo. 自行車產品相片 WHERE 產品相片編號 ' 使用 Parameters 集合此舉會將輸入視為常值, 而不是可執行的程式碼 ' 此外, 可以強制執行類型和長度檢查, 當超出範圍值時, 會觸發例外狀況 ' 因此使用 Parameters 集合可以避免發生 SQL Injection SQLCmd.Parameters.Add("@ImageID", Data.SqlDbType.Int).Value = _ intproductphotoid ' 開啟資料庫連接並將資料讀入資料讀取器中 cn.open() Using dr As SqlDataReader = _ 4-24

25 SQLCmd.ExecuteReader(CommandBehavior.SingleRow) If dr.read() Then With context.response ' 改變 HTTP 檔頭的輸出格式, 以便讓瀏覽器知道所輸出的檔案格式是 JPEG 圖檔.ContentType = "Image/JPEG".Clear().BufferOutput = True ' 請注意, 此處使用 SqlDataReader 的 GetSqlBytes 方法.BinaryWrite(dr.GetSqlBytes(0).Value) End With End Using End Using End Class 泛型處理常式 DisplayBikeLargeImage.ashx 會查詢北風貿易資料庫的自行車產品相片資料表, 以便將指定產品相片編號之資料列的相片全圖欄位內容提取出來並以 JPEG 格式傳回其程式碼如下所列 : <%@ WebHandler Language="VB" Class="DisplayBikeLargeImage" %> Option Strict On Imports System Imports System.Web Imports System.Data Imports System.Data.SqlClient Imports System.Web.Configuration Public Class DisplayBikeLargeImage : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) _ Implements IHttpHandler.ProcessRequest ' 取得產品相片編號 Dim intproductphotoid As Integer = _ CInt(context.Request.QueryString("PhotoId")) ' 取得 web.config 中的資料庫連線字串設定來建立 SQL 連線物件 Using cn As New SqlConnection( _ WebConfigurationManager.ConnectionStrings( _ 4-25

26 "chtnorthwind").connectionstring) Dim SQLCmd As SqlCommand = cn.createcommand() ' 指派查詢陳述式 SQLCmd.CommandText = _ "SELECT 相片全圖 FROM dbo. 自行車產品相片 WHERE 產品相片編號 ' 使用 Parameters 集合此舉會將輸入視為常值, 而不是可執行的程式碼 ' 此外, 可以強制執行類型和長度檢查, 當超出範圍值時, 會觸發例外狀況 ' 因此使用 Parameters 集合可以避免發生 SQL Injection SQLCmd.Parameters.Add("@ImageID", Data.SqlDbType.Int).Value = _ intproductphotoid ' 開啟資料庫連接並將資料讀入資料讀取器中 cn.open() Using dr As SqlDataReader = _ SQLCmd.ExecuteReader(CommandBehavior.SingleRow) If dr.read() Then With context.response ' 改變 HTTP 檔頭的輸出格式, 以便讓瀏覽器知道所輸出的檔案格式是 JPEG 圖檔.ContentType = "Image/JPEG".Clear().BufferOutput = True ' 請注意, 此處使用 SqlDataReader 的 GetSqlBytes 方法.BinaryWrite(dr.GetSqlBytes(0).Value) End With End Using End Using End Class 網頁範例 6 非同步的照片相簿 - 重要!! 圖表 4-16 與 4-17 是網頁範例 CH4_DemoForm006.aspx 的執行畫面, 這是一個非同步的照片相簿, 其功能特性說明如下 : 4-26

Microsoft Word - CH04P98

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