Microsoft Expression Web - SQL 資料來源

Expression Web 擁有許多用於處理靜態 HTML 頁面的工具，但它也具有建立更動態頁面的工具。動態頁面通常從資料來源檢索資料或內容。在本節中，我們將學習如何建立將在動態頁面中使用的 SQL 資料來源。

示例

讓我們來看一個簡單的示例，在這個示例中，我們將建立一個下拉列表，並透過使用 SQL 資料來源從資料庫檢索資料來填充列表。

步驟 1 - 從建立一個新的空網站開始。

我們將其命名為SQLDataSource。點選確定。

步驟 2 - 你會看到 Expression Web 為我們建立了一個資料夾。但是，由於我們選擇建立空專案，所以我們還沒有任何檔案。

Expression Web 不僅僅用於建立靜態 HTML 網站；我們可以輕鬆地使用頁面和控制元件建立動態網站。

步驟 3 - Expression Web 還允許我們建立大量動態內容，而無需成為開發人員。因此，讓我們從檔案→新建頁面選單選項新增一個 ASPX 檔案。在中間模型中選擇 ASPX，然後點選確定。

步驟 4 - 在這裡，我們將建立表單中的一個控制元件，該控制元件需要訪問資料庫中的資料才能建立動態網站。

在本例中，我們將建立一個 SQL 資料來源，它將從資料庫檢索資料。

步驟 5 - 轉到工具箱，拖動DropDownList並將其放在程式碼檢視中的<form>標籤內，或者也可以將其放在設計檢視的表單部分。你會看到 Expression Web 添加了程式碼。

在這裡，我們想要連線資料庫中的某些資料並將其儲存在我們的下拉列表中。因此，我們需要的第一件事是資料庫。

步驟 6 - 透過轉到新建→資料夾選單選項，在專案資料夾中建立一個新資料夾。

步驟 7 - 將此資料夾命名為App_Data。

步驟 8 - 我們需要使用檔案→匯入→檔案…選單選項將資料庫匯入我們的專案。

步驟 9 - 它將開啟匯入對話方塊，如下所示。單擊“新增檔案…”按鈕，這將開啟開啟檔案對話方塊。

步驟 10 - 瀏覽到要包含在網站中的資料庫(*.mdf 檔案)，然後單擊“開啟”。

步驟 11 - 開啟 MyTestDatabase.mdf。它將顯示以下對話方塊。單擊確定。

步驟 12 - 現在你可以看到資料庫檔案已新增到 App_Data 資料夾中。當您擁有像下拉列表這樣的控制元件並且 Expression Web 允許您將資料繫結到它時，您將在設計檢視的右上角看到一個小箭頭。

步驟 13 - 這是當前上下文選單，它可以允許我們對特定控制元件執行非常具體的任務，其中之一是選擇資料來源。因此，讓我們單擊選擇資料來源…，這將開啟資料來源配置嚮導。

步驟 14 - 目前，我們沒有資料來源。讓我們從選單中選擇“新建資料來源”選項。

在這裡，我們將匯入一個 SQL 資料庫。讓我們選擇資料庫並單擊確定。

步驟 15 - 現在，我們需要指定連線字串。讓我們單擊“新建連線”按鈕。

步驟 16 - 選擇 Microsoft SQL Server 資料庫檔案，然後單擊確定。

步驟 17 - 單擊“瀏覽”按鈕以找到資料庫檔案。

步驟 18 - 選擇資料庫檔案，然後單擊“開啟”按鈕或雙擊資料庫檔案。

步驟 19 - 要測試連線，請單擊“測試連線”按鈕。

它將顯示以下螢幕。單擊“確定”按鈕。

步驟 20 - 現在，我們將配置資料來源。在以下螢幕上單擊“下一步”。

選中複選框，然後再次單擊“下一步”。

步驟 21 - 在這裡，您將看到資料庫中的所有表。讓我們選擇Student表。

步驟 22 - 您將在列表框中看到所有列。選擇ID和LastName。在底部，您可以看到它實際上正在建立查詢。您還可以使用Where或ORDER BY 子句。完成查詢後，單擊“下一步”。

步驟 23 - 單擊測試查詢按鈕。它將顯示如下所示的查詢結果。

步驟 24 - 在以下對話方塊中，資料來源預設選中。“選擇要在下拉列表中顯示的資料欄位”是實際要顯示的欄位。讓我們選擇 LastName 並從“選擇下拉列表值的欄位”中選擇 ID，然後單擊“確定”。

如以下螢幕截圖所示，資料來源已新增到設計檢視中。

以下是 Expression Web 建立的 ASPX 檔案中的完整程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

步驟 25 - 按 Ctrl + S 儲存網頁。

將此頁面命名為SQLDatasource.aspx，然後單擊“儲存”。

步驟 26 - 讓我們在瀏覽器中預覽此頁面。您將看到一個下拉列表，其中包含Student表中學生的姓氏。

列印頁面