共用方式為

逐步解說：使用 GridView Web 伺服器控制項中的預存程序顯示資料

  • 發行項

更新：2007 年 11 月

本逐步解說會說明如何使用預存程序在 GridView 控制項中顯示資料。預存程序是儲存於 Microsoft SQL Server 資料庫中 (而不是您的應用程式程式碼中) 的 SQL 查詢。預存程序比查詢程式碼安全，而且通常執行速度也更快。在本逐步解說中，您將建立可擷取預存程序結果的 SqlDataSource 控制項。SqlDataSource 控制項的運作方式與 GridView 控制項的資料來源一樣。GridView 控制項會讀取預存程序所產生的結果，並建立顯示資料需要的資料列和資料表。

在瀏覽這份逐步解說期間，您將了解如何：

  • 在 Visual Web Developer 中連接至 SQL Server 資料庫。

  • 使用 SqlDataSource 控制項管理資料存取和繫結。

  • 加入預存程序以傳回將在 GridView 控制項中顯示的資料。

  • 顯示從 GridView 控制項中之預存程序傳回的資料。

必要條件

若要完成這個逐步解說，您必須要有：

  • Visual Studio 2008 或 Visual Web Developer 2008 Express 版。

    注意事項：

    Visual Web Developer 2005 Express 版不支援本逐步解說中使用的 [加入新的預存程序] 功能。

  • SQL Server Express Edition。如果已經安裝 SQL Server，則只需稍微調整某些程序，您就可以改用 SQL Server。

  • Microsoft Data Access Components (MDAC) 2.7 (含) 以後版本。

    如果使用的是 Microsoft Windows XP 或 Windows Server 2003，其中就已經包含 MDAC 2.7。不過，如果您使用的是 Microsoft Windows 2000，就可能需要升級電腦中已經安裝的 MDAC。如需詳細資訊，請參閱 MSDN 網站上的 Microsoft Data Access Components (MDAC) 安裝。

  • 存取 SQL Server Northwind 資料庫。如需下載及安裝 SQL Server 範例 Northwind 資料庫的詳細資訊，請參閱 Microsoft SQL Server 網站上的安裝範例資料庫。

    注意事項：

    如果您需要如何登入 SQL Server 的相關資訊，請連絡伺服器管理員。

建立網站

依照下列步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上按一下 [新增]，然後按一下 [網站]。如果您使用的是 Visual Web Developer Express 版，請按一下 [檔案] 功能表上的 [新網站]。

    [新網站] 對話方塊便會顯示。

  3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  4. 請在第一個 [位置] 方塊中，選取 [檔案系統]；在第二個中，輸入您想要用來保存網站頁面的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites\StoredProcedure。

  5. 在 [語言] 清單中，請按一下您想要操作的程式語言。

  6. 按一下 [確定]。

    Visual Web Developer Express 版 會建立資料夾和名為 Default.aspx 的新頁面。

加入預存程序以傳回資料

若要在 ASP.NET Web 網頁上顯示資料，您需要下列項目：

  • 資料來源 (例如資料庫) 的連接。

    在下列程序中，您將建立 SQL Server Northwind 資料庫的連接。

  • 預存程序，傳回要顯示的資料。

  • 頁面上的資料來源控制項，執行預存程序並管理結果。

  • 頁面上的控制項，用以顯示資料。

在下列程序中，您將會在 GridView 控制項中顯示資料。GridView 控制項將會從 SqlDataSource 控制項取得其資料。

第一步先建立預存程序。

若要加入預存程序以傳回資料

  1. 在 [伺服器總管] 中以滑鼠右鍵按一下 [資料連接]，然後按一下 [加入連接]。如果您是使用 Visual Web Developer Express 版，請使用 [資料庫總管]。

    [加入連接] 對話方塊隨即顯示。

    • 如果 [資料來源] 清單未顯示 [Microsoft SQL Server (SqlClient)]，請按一下 [變更]，然後在 [變更資料來源] 對話方塊中選取 [Microsoft SQL Server]。

    • 如果顯示 [選擇資料來源] 對話方塊而不是 [連接屬性] 對話方塊，請在 [資料來源] 清單中選取要使用的資料來源類型。在此逐步解說中，資料來源型別為 Microsoft SQL Server。在 [資料提供者] 清單中，按一下 [.NET Framework Data Provider for SQL Server]，然後按一下 [繼續]。

      注意事項：

      如果在 Visual Web Developer 中看不到 [伺服器總管] 索引標籤，請按一下 [檢視] 功能表上的 [伺服器總管]。在 Visual Web Developer Express 版中，按一下 [檢視] 功能表上的 [資料庫總管]。

  2. 在 [加入資料連接] 方塊中，於 [伺服器名稱] 文字方塊中輸入伺服器名稱。

  3. 對於 [登入伺服器] 區段，選取適當的選項以存取正在執行的 SQL Server 資料庫 (整合式安全性或特定 ID 和密碼)，必要時，請輸入使用者名稱和密碼。

  4. 如果輸入了密碼，請選取 [儲存我的密碼] 核取方塊。

  5. 請在 [選取或輸入資料庫名稱] 底下，輸入 Northwind。

  6. 按一下 [測試連接]，只要您確定連接已正常運作後，按一下 [確定]。

    新連接已經建立並顯示在 [伺服器總管] 中的 [資料連接] 底下。

  7. 在 [伺服器總管] 的 [資料連接] 底下，展開您剛建立的資料連接。如果您是使用 Visual Web Developer Express 版，請使用 [資料庫總管]。

    [資料連接] 會展開以納入子連接，例如 [資料表]、[檢視] 和 [預存程序]。

  8. 以滑鼠右鍵按一下 [預存程序]，然後按一下 [加入新的預存程序]。

    注意事項：

    Visual Web Developer 2005 Express 版不支援 [加入新的預存程序] 功能。

  9. 在新的預存程序中加入下列程式碼，以覆寫所有現有的程式碼。

    CREATE PROCEDURE GetEmployees
AS
    Select EmployeeID, LastName, FirstName from Employees
RETURN

  10. 關閉視窗，然後按一下 [是] 建立預存程序。

    注意事項：

    CREATE 關鍵字會在儲存程序時變更為 ALTER。

加入 GridView 控制項以顯示資料

建立資料來源的連接後，您需要下列項目：

  • 頁面上的資料來源控制項，執行預存程序並管理結果。

  • 頁面上的控制項，用以顯示資料。

在下列程序中，您會在 GridView 控制項中顯示資料。GridView 控制項會從 SqlDataSource 控制項取得其資料。

您可以將這些項目分別加入至網站。不過，最簡單的開始方式是使用 GridView 控制項視覺化顯示的資料，然後使用精靈建立連接和資料來源控制項。下列程序解釋如何建立必要項目，以便在頁面上顯示資料。

若要加入並設定用於顯示資料的 GridView 控制項

  1. 切換至或開啟 Default.aspx 頁面，然後切換至 [設計] 檢視。

  2. 在 [工具箱] 中，將 GridView 控制項從 [資料] 群組拖曳至網頁。

  3. 在 [GridView 工作] 功能表上的 [選擇資料來源] 清單中，按一下 [新資料來源]。

    [資料來源組態精靈] 對話方塊隨即顯示。

  4. 選取 [資料庫]，然後再按一下 [確定]。

    這樣會指定您要從 SQL Server 資料庫中擷取資料。

    在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 (SqlDataSource1)。保留這個名稱。

    [設定資料來源 SqlDataSource1] 精靈會顯示您可以在其中選取連接的頁面。

  5. 在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 清單中，輸入您在前面程序中建立的連接，然後按 [下一步]。

    精靈會顯示一個頁面，您可以在該頁面中選取將連接字串 (Connection String) 儲存在組態檔中。在組態檔中儲存連接字串有兩個優點：

    • 這麼做比將它儲存在頁面裡來得安全。

    • 您可以在多個頁面中使用相同的連接字串。

  6. 選取 [是，將這個連接儲存為] 核取方塊，然後按 [下一步]。

    精靈會顯示一個頁面，您可以在此指定要從資料庫擷取哪些資料。

  7. 選取 [指定自訂 SQL 陳述式或預存程序] 選項，然後再按一下 [下一步]。

  8. 在 [定義自訂陳述式或預存程序] 頁面上，選取 [預存程序]，然後選取您先前建立的預存程序 (GetEmployees)。

  9. 按一下 [下一步]。

  10. 按一下 [測試查詢]，確認您所擷取的資料是您所要的。

  11. 按一下 [完成]。

加入 DetailsView 控制項，以便從預存程序顯示資料

您可以從使用參數的預存程序中顯示資料。在下列程序中，您將建立 DetailsView 控制項，以顯示 GridView 控制項上選定資料列的計算值。GridView 資料列表示員工記錄，而且 DetailsView 控制項會顯示選定員工的總銷售量。

您需要下列項目：

  • 會使用員工 ID 做為參數並傳回值的預存程序。

  • 頁面上的第二個資料來源控制項，用以執行預存程序及管理結果。這兩個資料來源控制項都將表示相同 Northwind 資料庫的連接。您將會重複使用本逐步解說中，您先前建立的 SQL Server Northwind 資料庫連接。

  • 頁面上的 DetailsView 控制項，用以顯示資料。

首先，必須建立預存程序。

若要建立預存程序以傳回要在 DetailsView 控制項中顯示的資料

  1. 在 [伺服器總管] 的 [資料連接] 底下，展開您先前建立的資料連接。如果您是使用 Visual Web Developer Express 版，請使用 [資料庫總管] 執行這項作業。

  2. 以滑鼠右鍵按一下 [預存程序]，然後按一下 [加入新的預存程序]。

    注意事項：

    Visual Web Developer 2005 Express 版不支援 [加入新的預存程序] 功能。

  3. 在新的預存程序中加入下列程式碼，以覆寫所有現有的程式碼。

    CREATE PROCEDURE EmployeeSales
@Employee int AS
SELECT   SUM([Order Subtotals].Subtotal) AS Total
FROM Employees INNER JOIN
    Orders INNER JOIN
    [Order Subtotals] ON Orders.OrderID = [Order Subtotals].OrderID
ON Employees.EmployeeID = Orders.EmployeeID
WHERE (Employees.EmployeeID = @Employee)

  4. 關閉視窗，然後按一下 [是] 建立預存程序。

    注意事項：

    CREATE 關鍵字會在儲存程序時變更為 ALTER。

在建立預存程序以提供資料之後，您需要下列項目：

  • 頁面上的資料來源控制項，執行預存程序並管理結果。

  • 頁面上的控制項，用以顯示資料。

在下列程序中，您將會在 DetailsView 控制項中顯示資料。DetailsView 控制項將會從 SqlDataSource 控制項取得其資料。

您可以將這些項目分別加入至網站。不過，最簡單的開始方式是使用 DetailsView 控制項視覺化顯示的資料，然後使用精靈建立連接和資料來源控制項。下列程序解釋如何建立必要項目，以便在頁面上顯示資料。

下一個步驟是啟用 GridView 控制項的資料列選取。選定資料列會決定傳遞給預存程序的 EmployeeID 參數。

若要啟用 GridView 控制項的資料列選取

  1. 以滑鼠右鍵按一下 GridView 控制項，再按一下 [顯示智慧標籤]。

  2. 在 [GridView 工作] 窗格中核取 [樞紐分析表選取模式]。

下一個步驟是建立控制項，以顯示預存程序的結果。

若要加入並設定用於顯示資料的 DetailsView 控制項

  1. 切換至或開啟 Default.aspx 頁面，然後切換至 [設計] 檢視。

  2. 在 [工具箱] 中，將 DetailsView 控制項從 [資料] 群組拖曳至網頁。

  3. 在 [DetailsView 工作] 功能表上的 [選擇資料來源] 清單中，按一下 [新資料來源]。

    [資料來源組態精靈] 對話方塊隨即顯示。

  4. 選取 [資料庫]，然後再按一下 [確定]。

    這樣會指定您要從 SQL Server 資料庫中擷取資料。

    在 [指定資料來源的 ID] 方塊中，會顯示預設的資料來源控制項名稱 (SqlDataSource2)。保留這個名稱。

    [設定資料來源 SqlDataSource2] 精靈會顯示您可以在其中選取連接的頁面。

  5. 在 [您的應用程式應該使用哪個資料連接來連接資料庫?] 清單中，輸入您先前建立的連接，然後按 [下一步]。

  6. 選取 [指定自訂 SQL 陳述式或預存程序] 選項，然後再按一下 [下一步]。

  7. 在 [定義自訂陳述式或預存程序] 頁面上，選取 [預存程序]，然後選取您先前建立的預存程序 (EmployeeSales)。

  8. 按 [下一步]。

    [定義參數] 頁面隨即顯示。

  9. 在 [參數來源] 清單中，選取 [控制項]。

  10. 在 [ControlID] 清單中，選取 [GridView1]。

  11. 按一下 [測試查詢]，確認您所擷取的資料是您所要的。在 [參數值編輯器] 對話方塊中輸入 1 這個值，然後按一下 [確定]。1 這個值是資料庫中的員工 ID。如果資料擷取正常運作，則會傳回値，例如 192107.6000 (如果資料庫中的資料已經修改，值可能會不同)。

  12. 按一下 [完成]。

測試網頁

現在您就可以執行此頁面。

若要測試網頁

  1. 按 CTRL+F5 執行頁面。

    此網頁便會顯示在瀏覽器中。GridView 控制項會顯示 Employees 資料表中的所有資料列。

  2. 在 GridView 控制項上，按一下資料列上的 [選取] 連結。

    DetailsView 控制項會顯示選定資料列的詳細資料和預存程序的結果，以計算選定員工的總銷售量。

  3. 關閉瀏覽器。

後續步驟

此逐步解說說明了您可以如何使用具有資料來源控制項的 SQL Server 預存程序來顯示 ASP.NET Web 頁面上的資料。使用 SqlDataSource 控制項時，您可以按使用任何 SQL 陳述式的相同方式使用預存程序。此外，預存程序還可以使用與 Web 網頁之值相關聯的參數。您可以瀏覽下列使用預存程序的案例，這些案例都會使用 SQL 陳述式執行與資料有關的功能：

請參閱

工作

HOW TO：使用資料來源控制項時保護連接字串

逐步解說：在 GridView Web 伺服器控制項中進行編輯時顯示下拉式清單

逐步解說：Web 網頁中的基本資料存取