共用方式為

從主版頁面與內容頁互動 (VB)

  • 發行項

作者 ：Scott Mitchell

檢查如何從主版頁面中的程式代碼呼叫方法、設定屬性等內容頁面。

簡介

上述教學課程已探討如何以程序設計方式讓內容頁面與其主版頁面互動。 回想一下，我們已更新主版頁面，以包含列出五個最近新增產品的 GridView 控制件。 然後，我們建立了一個內容頁面，讓使用者可以從中新增產品。 新增產品時，需要指示主版頁面重新整理其 GridView 的內容頁面，使其包含剛新增的產品。 這項功能是藉由將公用方法新增至主版頁面，以重新整理系結至 GridView 的數據，然後從內容頁面叫用該方法來完成。

最常見的內容形式和主版頁面互動源自內容頁面。 不過，主版頁面可能會使目前的內容頁面變成作用中，而且如果主版頁面包含使用者介面元素，則可能需要這類功能，讓使用者修改也顯示在內容頁面上的數據。 請考慮在 GridView 控件中顯示產品資訊的內容頁面，以及包含按鈕控件的主版頁面，當按兩下時，所有產品的價格都會加倍。 就像上一個教學課程中的範例一樣，在單擊雙價按鈕之後，必須重新整理 GridView，才能顯示新的價格，但在此案例中，它是需要啟動內容頁面的主版頁面。

本教學課程會探索如何在內容頁面中定義主版頁面叫用功能。

透過事件和事件處理程式進行程序設計互動

從主版頁面叫用內容頁面功能比另一種方式更具挑戰性。 因為內容頁面有單一主版頁面，所以從內容頁面進行程序設計互動時，我們知道有哪些公用方法和屬性可以處置。 不過，主版頁面可以有許多不同的內容頁面，每個頁面都有自己的一組屬性和方法。 然後，我們可以在主版頁面中撰寫程式代碼，以在不知道在運行時間之前叫用哪些內容頁面時，在其內容頁面中執行一些動作？

請考慮 ASP.NET Web 控件，例如 Button 控件。 按鈕控件可以出現在任意數目的 ASP.NET 頁面上，而且需要一個機制，以警示已按下的頁面。 這是使用 事件來完成的。 特別是，按下 Button 控件時會引發其 Click 事件;包含 Button 的 ASP.NET 頁面可以選擇性地透過 事件處理程式響應該通知。

這個相同模式可用來在其內容頁面中具有主版頁面觸發程式功能：

  1. 將事件新增至主版頁面。
  2. 每當主版頁面需要與其內容頁面通訊時，引發 事件。 例如，如果主版頁面需要警示其內容頁面，表示使用者已將價格加倍，則會在價格加倍之後立即引發其事件。
  3. 在需要採取某些動作的內容頁面中建立事件處理程式。

本教學課程的其餘部分會實作簡介中所述的範例;也就是說，列出資料庫中產品的內容頁面，以及包含按鈕控件以加倍價格的主版頁面。

步驟 1：在內容頁面中顯示產品

我們的第一個業務順序是建立內容頁面，列出 Northwind 資料庫中的產品。 (我們已將 Northwind 資料庫新增至上一個教學課程中的專案， 從內容頁面與主版頁面互動。) 從將新的 ASP.NET 頁面新增至 ~/Admin 名為 Products.aspx的文件夾開始，請務必將它系結至 Site.master 主版頁面。 圖 1 顯示此頁面新增至網站之後 方案總管。

將新的 ASP.NET 頁面新增至 管理員資料夾

圖 01：將新的 ASP.NET 頁面新增至 Admin 資料夾， (按兩下即可檢視完整大小的影像)

回想一下，在主 版頁面教學課程中指定標題、Meta Tags 和其他 HTML 標頭 中，我們建立了名為 BasePage 的自定義基頁類別，並在未明確設定時產生頁面標題。 移至 Products.aspx 頁面的程式代碼後置類別，並讓它衍生自 (，而不是衍生自 BasePageSystem.Web.UI.Page) 。

最後，更新 Web.sitemap 檔案以包含本課程的專案。 將下列標記新增至主版頁面互動課程的 下方 <siteMapNode> ：

<siteMapNode url="~/Admin/Products.aspx" title="Master to Content Page Interaction" />

新增此 <siteMapNode> 元素會反映在 Lessons 清單中， (請參閱圖 5) 。

Products.aspx傳回 。 在的內容控制項 MainContent中，新增 GridView 控制項並將它命名為 ProductsGrid。 將 GridView 系結至名為 ProductsDataSource的新 SqlDataSource 控制件。

將 GridView 系結至新的 SqlDataSource 控制件

圖 02：將 GridView 系結至新的 SqlDataSource 控件 (按兩下即可檢視完整大小的影像)

設定精靈，使其使用 Northwind 資料庫。 如果您已完成上一個教學課程，則應該已經有名為 NorthwindConnectionString 的 Web.config連接字串。 從下拉式清單中選擇此 連接字串，如圖 3 所示。

將 SqlDataSource 設定為使用 Northwind 資料庫

圖 03：將 SqlDataSource 設定為使用 Northwind 資料庫 (按兩下即可檢視完整大小的映像)

接下來，從下拉式清單中選擇 Products 資料表並傳回 ProductName 和 UnitPrice 資料行，以指定數據源控件的 SELECT 語句 (請參閱圖 4) 。 按 [下一步]，然後按擊 [完成] 以完成 [設定數據源精靈]。

從 Products 數據表傳回 ProductName 和 UnitPrice 字段

圖 04：從Products數據表傳回 ProductName 和 UnitPrice 字段 (按鍵即可檢視完整大小的影像)

就是這麼簡單！ 完成精靈之後，Visual Studio 會將兩個 BoundField 新增至 GridView，以鏡像 SqlDataSource 控件所傳回的兩個字段。 GridView 和 SqlDataSource 控件的標記如下。 圖 5 顯示透過瀏覽器檢視時的結果。

<asp:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" 
 DataSourceID="ProductsDataSource">
 <Columns>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Columns>
</asp:GridView>

<asp:SqlDataSource ID="ProductsDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>

每個產品及其價格都會列在 GridView 中

圖 05：每個產品及其價格都會列在 GridView (按兩下以檢視完整大小的影像)

注意

您可以隨意清除 GridView 的外觀。 某些建議包括將顯示的 UnitPrice 值格式化為貨幣，以及使用背景色彩和字型來改善網格線的外觀。 如需在 ASP.NET 中顯示和格式化數據的詳細資訊，請參閱我的 使用數據教學課程系列。

步驟 2：將雙價按鈕新增至主版頁面

下一個工作是將 Button Web 控件新增至主版頁面，按兩下時，會將資料庫中所有產品的價格加倍。 開啟主版頁面，並將 [按鈕] 從 [Site.master工具箱] 拖曳至 Designer，並將它放在我們在上一個教學課程中新增的 RecentProductsDataSource SqlDataSource 控件下方。 將 Button 的 ID 屬性設定為 DoublePrice ，並將其 Text 屬性設定為 「Double Product Prices」。。

接下來，將 SqlDataSource 控制項新增至主版頁面，並將其命名為 DoublePricesDataSource。 這個 SqlDataSource 將用來執行 UPDATE 語句，以加倍所有價格。 具體而言，我們需要將其 ConnectionString 和 UpdateCommand 屬性設定為適當的 連接字串 和 UPDATE 語句。 然後，當按下 Button 時DoublePrice，我們需要呼叫這個 SqlDataSource 控件的 Update 方法。 若要設定 ConnectionString 和 UpdateCommand 屬性，請選取 SqlDataSource 控件，然後移至 屬性視窗。 屬性 ConnectionString 會列出已儲存在 Web.config 下拉式清單中的連接字串;請選擇 NorthwindConnectionString 如圖 6 所示的選項。

將 SqlDataSource 設定為使用 NorthwindConnectionString

圖 06：將 SqlDataSource 設定為 [使用 NorthwindConnectionString (按兩下即可檢視完整大小的映射)

若要設定 UpdateCommand 屬性，請在 屬性視窗 中找到 UpdateQuery 選項。 選取此屬性時，會顯示省略號的按鈕;按下此按鈕以顯示圖 7 所示的 [命令和參數 編輯器] 對話方塊。 在對話框的文字框中輸入下列 UPDATE 語句：

UPDATE Products SET UnitPrice = UnitPrice * 2

執行這個語句時，會將數據表中Products每個記錄的值加倍UnitPrice。

設定 SqlDataSource 的 UpdateCommand 屬性

圖 07：設定 SqlDataSource 的屬性 UpdateCommand (按兩下即可檢視完整大小的影像)

設定這些屬性之後，Button 和 SqlDataSource 控件的宣告式標記看起來應該如下所示：

<asp:Button ID="DoublePrice" runat="server" 
 Text="Double Product Prices" />

<asp:SqlDataSource ID="DoublePricesDataSource" runat="server" 
 UpdateCommand="UPDATE Products SET UnitPrice = UnitPrice * 2" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName %>">
</asp:SqlDataSource>

按兩下 [按鈕] 時DoublePrice，仍會繼續呼叫其 Update 方法。 建立 Click Button 的 DoublePrice 事件處理程式，並新增下列程式代碼：

Protected Sub DoublePrice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DoublePrice.Click
 ' Double the prices
 DoublePricesDataSource.Update()
End Sub

若要測試這項功能，請流覽 ~/Admin/Products.aspx 我們在步驟 1 中建立的頁面，然後按兩下 [雙重產品價格] 按鈕。 按兩下按鈕會導致回傳並執行 DoublePrice Button 的 Click 事件處理程式，將所有產品的價格加倍。 接著會重新轉譯頁面，並傳回標記，並在瀏覽器中重新顯示。 不過，內容頁面中的 GridView 會列出與按兩下 [雙重產品價格] 按鈕之前相同的價格。 這是因為一開始載入 GridView 的數據狀態已儲存在檢視狀態，因此除非另有指示，否則不會在回傳時重載。 如果您流覽不同的頁面，然後返回 ~/Admin/Products.aspx 頁面，您會看到更新的價格。

步驟 3：在價格加倍時引發事件

由於頁面中的 ~/Admin/Products.aspx GridView 不會立即反映價格加倍，因此使用者可能會認為他們未按兩下 [雙重產品價格] 按鈕，或無法運作。 他們可能會再試一次按鍵，再次將價格加倍。 若要修正此問題，我們需要讓內容頁面中的方格在兩倍后立即顯示新的價格。

如本教學課程稍早所述，每當用戶按兩下 DoublePrice [按鈕] 時，我們必須在主版頁面中引發事件。 事件是事件發行者 (一個類別的方法，) 通知另一組其他類別， (事件訂閱者) 發生有趣的事件。 在此範例中，主版頁面是事件發行者;按兩下按鈕時 DoublePrice 所關心的內容頁面是訂閱者。

類別會藉由建立 事件處理程式來訂閱事件，這是為了回應所引發事件而執行的方法。 發行者藉由定義 事件委派來定義他引發的事件。 事件委派會指定事件處理程序必須接受哪些輸入參數。 在 .NET Framework 中，事件委派不會傳回任何值並接受兩個輸入參數：

  • Object，可識別事件來源和
  • 衍生自的類別 System.EventArgs

傳遞至事件處理程式的第二個參數可以包含事件的其他資訊。 雖然基EventArgs類不會傳遞任何資訊，但 .NET Framework 包含一些擴充和包含其他屬性的EventArgs類別。 例如，實例會傳遞至回應Command事件的事件處理程式，並包含兩個CommandEventArgs參考屬性：CommandArgument和 CommandName。

注意

如需建立、引發及處理事件的詳細資訊，請參閱簡單英文的事件和委派和事件委派。

若要定義事件，請使用下列語法：

Public Event eventName As eventDelegate

因為我們只需要在使用者按兩下 DoublePrice Button並不需要傳遞任何其他資訊時警示內容頁面，所以我們可以使用事件委派 ，這個委派 EventHandler會定義事件處理程式，接受作為類型 System.EventArgs物件的第二個參數。 若要在主版頁面中建立事件，請將下列程式代碼行新增至主版頁面的程式代碼後置類別：

Partial Class Site
 Inherits System.Web.UI.MasterPage

 Public Event PricesDoubled As EventHandler
 ...
End Class

上述程式代碼會將公用事件新增至名為的主 PricesDoubled版頁面。 我們現在必須在價格加倍之後引發此事件。 若要引發事件，請使用下列語法：

RaiseEvent eventName(sender, eventArgs)

其中 sender 和 eventArgs 是您想要傳遞至訂閱者事件處理程式的值。

DoublePriceClick使用下列程式代碼更新事件處理程式：

Protected Sub DoublePrice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DoublePrice.Click
 ' Double the prices
 DoublePricesDataSource.Update()

 ' Refresh RecentProducts
 RecentProducts.DataBind()

 ' Raise the PricesDoubled event
 RaiseEvent PricesDoubled(Me, EventArgs.Empty)
End Sub

如同先前一樣， Click 事件處理程式會從呼叫 DoublePricesDataSource SqlDataSource 控件 Update 的 方法開始，將所有產品的價格加倍。 接下來，事件處理程式有兩個新增專案。 首先， RecentProducts GridView 的數據會重新整理。 此 GridView 已新增至上一個教學課程的主版頁面，並顯示五個最近新增的產品。 我們需要重新整理此方格，使其顯示這五個產品的 Just-doubled 價格。 接著， PricesDoubled 會引發事件。 主版頁面本身的參考 (Me) 會傳送至事件處理程式做為事件來源，而空 EventArgs 物件則會以事件自變數的形式傳送。

步驟 4：處理內容頁面中的事件

此時，每當按兩下 [按鈕] 控制項時，DoublePrice主版頁面就會引發其PricesDoubled事件。 不過，這隻是一半的爭用 ，我們仍然需要處理訂閱者中的事件。 這牽涉到兩個步驟：建立事件處理程式並新增事件連接程序代碼，以便在引發事件時執行事件處理程式。

首先，建立名為的 Master_PricesDoubled事件處理程式。 由於我們在主版頁面中定義 PricesDoubled 事件的方式，事件處理程式的兩個輸入參數必須分別是 型 Object 別和 EventArgs。 在事件處理程式中， ProductsGrid 呼叫 GridView DataBind 的 方法來將數據重新繫結至方格。

Private Sub Master_PricesDoubled(ByVal sender As Object, ByVal e As EventArgs)
 ' Rebind data to ProductsGrid
 ProductsGrid.DataBind()
End Sub

事件處理程式的程式代碼已完成，但我們尚未將主版頁面的事件 PricesDoubled 連線至這個事件處理程式。 訂閱者會透過下列語法將事件連線至事件處理程式：

AddHandler publisher.eventName, AddressOf methodName

publisher 是提供 event eventName 之對象的參考， 而 methodName 是訂閱者中定義的事件處理程式名稱。

這個事件連接程式代碼必須在第一個頁面流覽和後續回傳上執行，而且應該發生在頁面生命週期的某個時間點，該時間點可能會引發事件。 新增事件連接程序代碼的好時機是在 PreInit 階段中，這在頁面生命週期中非常早發生。

開啟 ~/Admin/Products.aspx 並建立 Page_PreInit 事件處理程式：

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
 ' TODO: Put event wiring logic here
End Sub

為了完成此連接程式代碼，我們需要從內容頁面對主版頁面進行程序設計參考。 如上一個教學課程所述，有兩種方式可以執行此動作：

  • 將鬆散類型 Page.Master 屬性轉換成適當的主版頁面類型，或
  • 藉由在頁面中新增 @MasterType 指示詞 .aspx ，然後使用強型別 Master 屬性。

讓我們使用後者的方法。 將下列 @MasterType 指示詞新增至頁面宣告式標記的頂端：

<%@ MasterType VirtualPath="~/Site.master" %>

然後在事件處理程式中 Page_PreInit 新增下列事件連接程式代碼：

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
 AddHandler Master.PricesDoubled, AddressOf Master_PricesDoubled
End Sub

有了此程式代碼，每當按兩下 [按鈕] 時，就會重新整理內容頁面中的 DoublePrice GridView。

圖 8 和 9 說明此行為。 圖 8 顯示第一次瀏覽時的頁面。 請注意，主版頁面左欄中的 GridView (價格值 RecentProducts) 和 ProductsGrid 內容頁面中的 GridView () 。 圖 9 會在按下按鈕之後 DoublePrice 立即顯示相同的畫面。 如您所見，新價格會立即反映在這兩個 GridViews 中。

初始價格值

圖 08：按兩下 [初始價格值] (檢視完整大小的影像)

Just-Doubled 價格會顯示在 GridViews 中

圖 09：Just-Doubled 價格會顯示在 GridViews (按兩下即可檢視大小完整的影像)

摘要

在理想情況下，主版頁面及其內容頁面彼此完全分開，而且不需要任何互動層級。 不過，如果您有主版頁面或內容頁面顯示可從主版頁面或內容頁面修改的數據，您可能需要讓主版頁面警示內容頁面 (，反之亦然，) 修改數據以便更新顯示。 在上一個教學課程中，我們已瞭解如何以程序設計方式與其主版頁面互動內容頁面;在本教學課程中，我們已探討如何讓主版頁面起始互動。

雖然內容與主版頁面之間的程式設計互動可能源自內容或主版頁面，但使用的互動模式取決於來源。 差異是因為內容頁面具有單一主版頁面，但主版頁面可以有許多不同的內容頁面。 相較於讓主版頁面直接與內容頁面互動，更好的方法是讓主版頁面引發事件，以發出某些動作已發生的訊號。 那些關心動作的內容頁面可以建立事件處理程式。

快樂的程序設計！

深入閱讀

如需本教學課程中討論之主題的詳細資訊，請參閱下列資源：

關於作者

Scott Mitchell 是多個 ASP/ASP.NET 書籍的作者，且 4GuysFromRolla.com 的作者，自 1998 年以來，已與 Microsoft Web 技術合作。 Scott 是獨立顧問、訓練員和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 3.5。 您可以在 或 透過在 的http://ScottOnWriting.NET部落格連線mitchell@4GuysFromRolla.com到 Scott。

特別感謝

本教學課程系列是由許多實用的檢閱者檢閱。 本教學課程的首席檢閱者是 Suchi Banerjee。 有興趣檢閱即將推出的 MSDN 文章嗎？ 如果是，請將一行放在我 mitchell@4GuysFromRolla.com

上一個下一個