逐步解說：在 Visual Studio 中建立主從式 Web 網頁
更新：2007 年 11 月
許多 Web 網頁可以用多種方法顯示資料，顯示的通常是來自關聯資料表的資料。此逐步解說示範在多個控制項和表格中使用資料的各種方法，包括具有主版/詳細資料關係的資料。逐步解說將說明的工作包括：
將資料庫資料填入 (Populate) 下拉式清單。
建立篩選條件，即包含 WHERE 子句的 SQL 陳述式 (參數型查詢)。
根據使用者在下拉式清單中的選取顯示篩選的資料。
使用 DetailsView 控制項顯示選取之資料錄的詳細資料。
在一個頁面中選取資料錄，並在第二個頁面中顯示關聯資料錄。
必要條件
若要完成這個逐步解說，您必須要有：
存取 SQL Server Northwind 資料庫。如需下載並安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。
.gif "注意事項")
注意事項：如果您需要如何登入執行 SQL Server 之電腦的相關資訊，請聯繫伺服器管理員。
Microsoft Data Access Components (MDAC) 2.7 (含) 以後版本。
如果使用的是 Microsoft Windows XP 或 Windows Server 2003，就表示已經有 MDAC 2.7。不過，如果您使用的是 Microsoft Windows 2000，可能需要升級電腦中所安裝的 MDAC。如需詳細資訊，請參閱 MSDN Library 中的文件＜Microsoft Data Access Components (MDAC) Installation＞。
建立網站
如果您已經在 Microsoft Visual Web Developer 中建立了網站 (例如，藉由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁或逐步解說：Web 網頁中的基本資料存取中的步驟) ，可以使用該網站，並直接進行下一節「連接至 SQL Server」的步驟。否則，依照下列這些步驟建立新的網站和 Web 網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，請按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。
連接到 SQL Server
若要使用資料，您需要建立到資料庫的連接。在此逐步解說中，您將不使用 Web 網頁或控制項建立連接。
若要建立對 SQL Server 的連接
按 CTRL+ALT+S 顯示 [資料庫總管]。在 [資料庫總管] 中，以滑鼠右鍵按一下 [資料連接]，並選擇 [加入連接]。
[變更資料來源] 對話方塊隨即顯示。
在 [變更資料來源] 對話方塊中，選取 [Microsoft SQL Server]，然後按一下 [確定]。
在 [加入連接] 對話方塊中，執行下列事項：
輸入或選取 SQL Server 電腦的名稱。為您電腦上的伺服器輸入 (本機)。
選取 [使用 SQL Server 驗證]。
輸入使用者名稱和密碼。
選取 [儲存我的密碼]。
選取 [Northwind] 做為資料庫。
按一下 [測試連接]，然後在您確定它有正常運作時，按一下 [確定]。
將連接加入至 [伺服器總管]。
使用下拉式清單做為主版
在這部分的逐步解說中，您要將下拉式清單加入至頁面，並在其中填入來自 [Northwind] 資料表的分類清單。當使用者選取分類時，頁面將顯示該分類的產品。
若要建立並填入下拉式清單
切換至 Default.aspx 頁面或開啟它。如果您使用的是已建立的網站，請加入或開啟此逐步解說中可以使用的頁面。
切換至 [設計] 檢視。
在頁面中輸入依分類選取產品，並使用 [工具箱] 上的 [區塊格式] 下拉式清單將文字格式化為標題。
從 [工具箱] 的 [標準] 群組中，將 [DropDownList] 控制項拖曳至頁面。
在 [DropDownList 工作] 中選取 [啟用 AutoPostBack] 核取方塊。
這會設定控制項，以便在清單中作了選取後讓頁面立即回傳至伺服器，而不是等到使用者按一下按鈕時才回傳。
在 [DropDownList 工作] 中選取 [選擇資料來源]。
[選擇資料來源] 精靈隨即啟動。
在 [選取資料來源] 清單中，按一下 [<新增資料來源>]。
[資料來源組態精靈] 對話方塊隨即顯示。
選取 [資料庫]。
這樣會指定您要從支援 SQL 陳述式的資料庫中取得資料 (包含 SQL Server 和其他 OLE-DB 相容資料庫)。
在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 (SqlDataSource1)。您可以保留這個名稱。
按一下 [確定]。
此精靈會顯示可以在其中選取資料連接的 [設定資料來源 - SqlDataSource1] 頁面。
從下拉式清單中，選取先前在逐步解說中建立的 [Northwind] 連接。
按 [下一步]。
此精靈會顯示頁面，您可以在其中選擇將連接字串儲存在組態檔中。
確認選取了 [是，將這個連接儲存為] 核取方塊，然後按一下 [下一步] (您可以保留預設的連接字串名稱)。
此精靈會顯示一個頁面，您可以在其中指定要從資料庫擷取哪些資料。
從 [資料表或檢視選項] 下的 [名稱] 清單中，選取 [分類]。
在 [資料行] 方塊中，選取 [CategoryID] 和 [CategoryName]。
按 [下一步]。
按一下 [測試查詢]，確定您正在取得所要的資料。
按一下 [完成]。
[資料來源組態精靈] 隨即顯示，同時還顯示您所設定之資料來源控制項的名稱。
在 [選取要顯示在 DropDownList 中的資料欄位] 清單中，選取 [CategoryName]。
注意事項：如果清單中沒有出現項目，請按一下 [重新整理結構描述] 連結。
這樣做會指定 [CategoryName] 欄位的值將顯示為下拉式清單中項目的文字。
在 [選取 DropDownList 值的資料欄位] 清單中，按一下 [CategoryID]。
這樣做會指定當選取項目時 [CategoryID] 欄位將做為該項目的值傳回。
按一下 [確定]。
繼續之前，請測試下拉式清單。
若要測試下拉式清單
按 CTRL+F5 執行頁面。
當頁面顯示時，請檢查下拉式清單。
選取分類，確定清單執行回傳。
您現在可以顯示下拉式清單中選取之分類的產品。
使用方格顯示詳細資訊
您現在可以擴充頁面以包含方格。當使用者從分類下拉式清單選取分類時，方格將顯示該分類的產品。
若要使用方格顯示詳細資訊
切換至或開啟 Default.aspx 頁面 (或正在使用的頁面)，然後切換至 [設計] 檢視。
從 [工具箱] 的 [資料] 群組中，將 [GridView] 控制項拖曳至頁面。
在 [GridView 工作] 功能表的 [選擇資料來源] 清單中，選取 [<新增資料來源>]。
[資料來源組態精靈] 隨即開啟。
選取 [資料庫]。
在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 (SqlDataSource2)。您可以保留這個名稱。
按一下 [確定]。
此精靈會顯示可以選取連接的頁面。
從連接下拉式清單中，選取先前在逐步解說中建立並儲存的連接 (NorthwindConnectionString)。
按一下 [下一步]。
此精靈會顯示可以在其中建立 SQL 陳述式的 [設定資料來源 - SqlDataSource2] 頁面。
從 [名稱] 清單中，選取 [產品]。
在 [資料行] 方塊中，選取 [ProductID]、[ProductName] 和 [CategoryID]。
按一下 [WHERE]。
接著會顯示 [加入 WHERE 子句] 對話方塊。
從 [資料行] 清單中，選取 [CategoryID]。
從 [運算子] 清單中，選取 [=]。
從 [來源] 清單中，選取 [控制項]。
在 [參數屬性] 下的 [控制項 ID] 清單中，選取 [DropDownList1]。
最後兩個步驟指定，查詢將從之前加入的 DropDownList 控制項中取得分類 ID 的搜尋值。
按一下 [加入]。
按一下 [確定]，關閉 [加入 WHERE 子句] 對話方塊。
按 [下一步]。
在 [預覽] 頁面上，按一下 [測試查詢]。
此精靈會顯示一個對話方塊，以提示您輸入要在 WHERE 子句中使用的值。
在方塊中輸入 4，然後按一下 [確定]。
分類 4 的產品資料錄隨即顯示。
按一下 [完成] 關閉精靈。
您現在可以測試主版/詳細資料顯示。
若要測試網頁
按 CTRL+F5 執行頁面。
當頁面出現時，會顯示下拉式清單中第一個項目的產品。
從清單中選取分類，並確認對應的產品出現在方格內。
在同一頁面上顯示主版/詳細資料
在這部分的逐步解說中，您可以在一個頁面中顯示來自關聯資料表的資料。主版資料表資料會顯示在方格中，使用者可從其中選取個別資料列。這樣做時，一或多個詳細資料資料錄會顯示於頁面其他位置的可捲動控制項中。為了說明，您將使用「Northwind 分類」資料表做為主版資料表，使用「產品」資料表做為詳細資料表。
若要顯示主版資料錄
將新頁面加入至網站，並將其命名為 MasterDetails2.aspx。
切換至 [設計] 檢視。
在頁面中輸入主版/詳細資料頁面，並將文字格式化為標題。
從 [工具箱] 的 [資料] 群組中，將 [GridView] 控制項拖曳至頁面。
在 [GridView 工作] 功能表的 [選擇資料來源清單] 清單中，按一下 [<新增資料來源>]，然後使用這些步驟為 [GridView] 控制項設定資料來源：
選取 [資料庫]。
按一下 [確定]。
從連接下拉式清單中，選取先前在逐步解說中建立並儲存的連接 (NorthwindConnectionString)。
按一下 [下一步]。
從 [名稱] 清單中，選取 [分類]。
在 [資料行] 方塊中，選取 [CategoryID] 和 [CategoryName]。
按一下 [下一步]，再按一下 [完成]。
選取 [GridView] 控制項，然後在 [GridView 工作] 功能表中，選取 [編輯資料行]。
[欄位] 對話方塊隨即出現。
在 [可用的欄位] 下，開啟 [命令欄位] 節點，選擇 [選取]，然後按一下 [加入] 將其加入至 [選取的欄位] 清單。
在 [選取的欄位] 清單中，選擇 [選取]，然後在 [CommandField] 屬性方格中將其 [SelectText] 屬性設定為 [詳細資料]。
按一下 [確定]，關閉 [欄位] 對話方塊。
包含 [詳細資料] 超連結的新資料行隨即加入至方格。
選取 [GridView] 控制項，並確定在 [屬性] 視窗中其 [DataKeyNames] 屬性設定為 CategoryID。
這樣會指定當您在方格中選取資料列時，ASP.NET 可以找到目前顯示於已知位置之「分類」資料錄的索引鍵。
方格允許您選取個別分類。下一步要加入 DetailsView 控制項，它將顯示與選取之分類相關聯產品的詳細資料資料錄。DetailsView 控制項將使用不同的 SQL 查詢取得其資料，因此它需要第二個資料來源控制項。
若要設定顯示關聯資料錄的查詢
在 [詳細資料] 檢視中，按 ENTER 在 MasterDetails2.aspx 頁面的 [SqlDataSource1] 控制項下留出空間。
從 [工具箱] 的 [資料] 群組中，將 [DetailsView] 控制項拖曳至頁面。
使用下列步驟，設定該控制項以使用第二個資料來源控制項：
在 [選擇資料來源] 清單中，選取 [<新增資料來源>]。
選取 [資料庫]。
按一下 [確定]。
在連接下拉式清單中，按一下先前在逐步解說中建立並儲存的連接。
按一下 [下一步]。
從 [資料表或檢視選項] 下的 [名稱] 清單中，選取 [產品]。
在 [資料行] 方塊中，選取 [ProductID]、[ProductName] 和 [CategoryID]。
按一下 [WHERE]。
接著會顯示 [加入 WHERE 子句] 對話方塊。
從 [資料行] 清單中，選取 [CategoryID]。
從 [運算子] 清單中，選取 [=]。
從 [來源] 清單中，選取 [控制項]。
在 [參數屬性] 下的 [控制項 ID] 清單中，選取 [GridView1]。第二個方格的查詢將從第一個方格的選取範圍中取得其參數值。
按一下 [加入] 然後再按 [確定]，關閉 [加入 WHERE 子句] 對話方塊。
按 [下一步]。
在 [預覽] 頁面上，按一下 [測試查詢]。
此精靈會顯示一個對話方塊，以提示您輸入要在 WHERE 子句中使用的值。
在方塊中輸入 4，然後按一下 [確定]。
分類 4 的產品資料錄隨即顯示。
按一下 [完成]。
在 [DetailsView 工作] 功能表中，按一下 [啟用分頁]。
這將允許您捲動每個產品資料錄。
選擇性地，在 [屬性] 視窗中，開啟 [PagerSettings] 節點並選取不同的 [模式] 值。
依照預設，您可以透過按一下頁碼逐頁查看資料錄，不過您也可以選取選項，使用下一頁或上一頁連結。
您現在可以測試主版方格和詳細資料檢視的組合。
若要測試網頁
按 CTRL+F5 執行頁面。
在方格中，選取分類。
[DetailsView] 控制項隨即顯示與該分類相關聯的產品。
使用 [DetailsView] 控制項中的頁面巡覽區連結，巡覽至同一分類中的其他產品。
在方格中，選取不同的分類。
在 [DetailsView] 控制項中檢閱該分類的產品。
在不同的頁面上顯示主版/詳細資料
在此逐步解說的最後一部分中，您將建立另一個變化型式，即在不同的頁面上顯示主版和詳細資料的資料錄。主版資料錄會再次顯示在包含每個資料錄之超連結的方格中。當使用者按一下超連結時，他們會巡覽至第二個頁面，在其中可檢視顯示完整「產品」資料錄之 DetailsView 控制項中的詳細資料資料錄。
若要顯示主版資料錄
將新頁面加入至網站，並將其命名為 MasterCustomers.aspx。
切換至 [設計] 檢視。
在頁面中輸入客戶，並將文字格式化為標題。
從 [工具箱] 的 [資料] 資料夾中，將 [GridView] 控制項拖曳至頁面。
在控制項上的 [GridView 工作] 功能表中，從 [選擇資料來源] 清單選擇 [<新增資料來源>]，然後使用精靈執行下列事項：
按一下 [資料庫]。
連接至 Northwind 資料庫 (連接 [NorthwindConnectionString])。
從 [Customers] 資料表擷取 [CustomerID]、[CompanyName] 和 [City] 資料行。
選擇性地，在 [GridView 工作] 功能表上選取 [啟用分頁] 核取方塊。
在 [GridView 工作] 功能表中，選擇 [編輯資料行]。
[欄位] 對話方塊隨即出現。
清除 [自動產生欄位] 核取方塊。
在 [可用欄位] 下，選擇 [超連結欄位]，按一下 [加入]，然後設定下列屬性：
屬性
值
Text
細節
DatahrefFields
CustomerID
這表示超連結應該從 [CustomerID] 資料行取得其值
DatahrefFormatString
DetailsOrders.aspx?custid={0}
這會建立硬式編碼的連結，以巡覽至 DetailsOrders.aspx 頁面。該連結也會傳遞名為 custid 的查詢字串變數，該變數的值將使用 DatahrefFields 屬性中參考的資料行填入。
按一下 [確定]，關閉 [欄位] 對話方塊。
您現在可以建立詳細資料頁面，接受來自主版頁面 (Master Page) 的值。
若要建立詳細資料頁面
將新頁面加入至網站，並將其命名為 DetailsOrders.aspx。
切換至 [設計] 檢視。
在頁面中輸入訂單，並將文字格式化為標題。
從 [工具箱] 的 [資料] 資料夾中，將 [GridView] 控制項拖曳至頁面。
在控制項上的 [GridView 工作] 功能表中，從 [選擇資料來源] 清單選取 [<新增資料來源>]
在 [選取資料來源類型] 清單中，按一下 [資料庫]，然後再按 [確定]。
從連接清單中，選取先前在逐步解說中建立並儲存的連接 (NorthwindConnectionString)。
按一下 [下一步]。
此精靈會顯示可以建立 SQL 陳述式的頁面。
從 [名稱] 清單中，選取 [訂單]。
在 [資料行] 方塊中，選取 [OrderID]、[CustomerID] 和 [OrderDate]。
按一下 [WHERE]。
從 [資料行] 清單中，選取 [CustomerID]。
從 [運算子] 清單中，選取 [=]。
從 [來源] 清單中，選取 [QueryString]。
這會指定，查詢將根據使用查詢字串傳遞到頁面的值選取資料錄。
在 [參數屬性] 下的 [QueryString 欄位] 方塊中，輸入 custid。
查詢將從查詢字串取得客戶 ID 值，其建立於在 MasterCustomers.aspx 頁面中按一下 [詳細資料] 連結時。
按一下 [加入]。
按一下 [確定]，關閉 [加入 WHERE 子句] 對話方塊。
按一下 [下一步]，然後再按 [完成] 關閉精靈。
從 [工具箱] 的 [標準] 節點中，將 [超連結] 控制項拖曳至頁面。將其 [文字] 屬性設定為 [回到客戶]，將其 [href] 屬性設定為 [MasterCustomers.aspx]。
您現在可以測試關聯的主版/詳細資料頁面。
若要測試網頁
切換至 MasterCustomers.aspx 頁面。
按 CTRL+F5 執行頁面。
按一下客戶的 [詳細資料] 連結。
瀏覽器會顯示 DetailsOrders.aspx 頁面以及選取之客戶的訂單。請注意，瀏覽器 [位址] 方塊中的 URL 為：
DetailsOrder.aspx?custid=x其中 x 是選取之客戶的 ID。
按一下 [回到客戶] 連結，選取不同的客戶，然後再按一次 [詳細資料] 連結測試您是否可以檢視客戶的訂單。
後續步驟
此逐步解說說明了從關聯資料表顯示資料的各種方法。所有案例具有下列共同點：它們均依賴於參數型查詢，且參數值可在執行階段自動傳遞到查詢。您可能會想要實驗使用關聯資料的其他方法。例如，您可能要：
實驗從其他來源取得其值的參數，例如 Session 變數或 cookie。如需詳細資訊，請參閱使用含有資料來源控制項的參數。
從逐步解說的第二部分開始，增加您可以使用 DetailsView 控制項進行的處理。例如，您可以設定控制項，允許使用者編輯詳細資料資料錄。如需詳細資訊，請參閱逐步解說：使用 DetailsView Web 伺服器控制項在 Web 網頁中編輯和插入資料。