第16章 ASP.NET整合應用實例 16-1 Ajax聊天室 16-2 網路相簿 16-3 網路商店 16-4 診所預約系統 16-5 部落格

16-1 Ajax聊天室 16-1-1 Ajax聊天室的網站架構 16-1-2 Ajax聊天室的使用 16-1-3 Ajax聊天室的網頁說明

16-1 Ajax聊天室 聊天室是一個即時輸入聊天訊息的談天園地，進入聊天室的使用者，可以馬上回應其他使用者的聊天訊息。在聊天室能夠進行多人的同時討論，顯示的訊息是所有參與的使用者都可以看到，每一則訊息可以指出是屬於誰的意見。 不過，Web介面的聊天室受限於HTTP通訊協定的特性，並無法即時看到張貼訊息，只能在指定更新時間的周期來更新聊天訊息。

16-1-1 Ajax聊天室的網站架構 Ajax聊天室因為使用Ajax技術來更新聊天訊息，所以只需一頁ASP.NET網頁。請啟動Visual Studio Community開啟「範例網站\Ch17\MyChat」資料夾的ASP.NET網站，在「方案總管」視窗可以看到ASP.NET網站架構，如下圖所示：

16-1-2 Ajax聊天室的使用 請啟動Visual Studio Community開啟「範例網站\Ch17\MyChat」資料夾的ASP.NET網站後，開啟Default.aspx網頁來執行Ajax聊天室，其執行結果如下圖所示：

16-1-3 Ajax聊天室的網頁說明 聊天室的ASP.NET網頁只有一頁Default.aspx，其設計檢視如下圖所示：

16-2 網路相簿 16-2-1 網路相簿的網站架構 16-2-2 網路相簿的使用 16-2-3 圖片目錄的網頁說明 16-2-4 詳細圖片內容的網頁說明

16-2 網路相簿 網路相簿是網路上的個人展示空間，使用者可以將漂亮照片的圖檔分享給朋友或其他網友來瀏覽與檢視。 在本節的網路相簿沒有提供會員管理功能，它只是一個非常簡單的照片分享網頁，可以讓使用者上傳圖檔和顯示圖片目錄，點選下方的超連結來顯示詳細的圖片內容。

16-2-1 網路相簿的網站架構 網路相簿是使用FileUpload控制項來上傳圖檔、DataList控制項顯示圖片目錄和Image控制項顯示圖片，其架構如下圖所示：

16-2-2 網路相簿的使用 請啟動Visual Studio Community開啟「範例網站\Ch17\MyPhoto」資料夾的ASP.NET網站後，網路相簿首頁的圖片目錄是Default.aspx，其執行結果如下圖所示：

16-2-3 圖片目錄的網頁說明 網路相簿的圖片目錄是ASP.NET網頁Default.aspx，其設計檢視如右圖所示：

16-2-4 詳細圖片內容的網頁說明 網路相簿的詳細圖片內容是ASP.NET網頁DisplayPhoto.aspx，其設計檢視如右圖所示：

16-3 網路商店 16-3-1 網路商店的網站架構 16-3-2 網路商店的使用 16-3-3 網路商店的資料庫與主版頁面 16-3-4 商品目錄的網頁說明 16-3-5 商品資訊的網頁說明 16-3-6 購物車的網頁說明

16-3 網路商店 網路商店是銷售商品的虛擬店面，它和一般商店一樣都是開店作生意，因為網路商店沒有實際店面，所以需要模擬現實生活的方式來採購商品，建立商品目錄來選購商品，並且提供購物車功能，可以隨時檢視購買的商品清單。

16-3-1 網路商店的網站架構-圖例 網路商店網站是使用DropDownList、ListView和DataPager控制項建立商品目錄網頁；DetailsView控制項建立商品詳細資料網頁；GridView控制項建立購物車網頁，其架構如下圖所示：

16-3-1 網路商店的網站架構-檔案說明 檔案名稱 說明 MyShop.master 網路商店的主版頁面 Default.aspx 網路商店的商品目錄，使用DropDownList和ListView控制項建立參數SQL查詢，在選取商品後，可以在DetailsItem.aspx顯示商品的詳細資料 DetailsItem.aspx 顯示商品的詳細資料，在輸入數量後，即可將選購商品存入購物車，也就是建立Cookie ShoppingCart.aspx 網路商店的購物車是使用GridView控制項來顯示選購的商品清單 App_Data\Products.mdf 儲存商品資料的SQL Server Express資料庫 images資料夾 商品外觀的圖片

16-3-2 網路商店的使用-商品目錄 請啟動Visual Studio Community開啟「範例網站\Ch17\MyShop」資料夾的ASP.NET網站，然後開啟Default.aspx網頁，就可以執行ASP.NET網頁看到商品目錄，如下圖所示：

16-3-2 網路商店的使用-選購商品 在商品目錄按一下指定書號的超連結，例如：F1714，就可以轉址至DetailsItem.aspx，顯示圖書的詳細資料，在【購買數量】欄輸入購買數量，例如：輸入【2】，按【加入購物車】鈕就可以將選購商品放入購物車。

16-3-2 網路商店的使用- 檢視購物車的內容 在選購商品後，或選主選單的【購物車】選項，都可以看到目前選購的商品清單和購物總價，如下圖所示：

16-3-3 網路商店的資料庫與主版頁面- 資料庫 在Products.mdf資料庫擁有Books資料表，其欄位定義說明，如下表所示： 欄位名稱 資料型別 長度 說明 BookID nchar 6 書號，主鍵不允許Null BookCatalog 10 圖書分類，允許Null BookTitle nvarchar 50 書名，允許Null BookAuthor 作者，允許Null BookPrice smallmoney N/A 書價，允許Null BookPubDate datetime 出版日期，允許Null

16-3-3 網路商店的資料庫與主版頁面- 主版頁面 主版頁面MyShop.master擁有名為MainContent的ContentPlaceHolder控制項，在左邊是Menu控制項建立的主選單，其設計檢視如下圖所示：

16-3-4 商品目錄的網頁說明 網路商店的商品目錄是Default.aspx網頁，這是修改自第9-3節參數的SQL查詢，使用DropDownList控制項取得參數值，只是改為在ListView控制項顯示多欄的商品資料。ListView控制項的設定值為：配置是【並排顯示】、樣式為【專業】和勾選【啟用分頁】。 因為ListView控制項預設使用三欄顯示，請更改【GroupItemCount】屬性值為2，改為兩欄顯示。

16-3-5 商品資訊的網頁說明 網路商店的商品資訊是DetailsItem.aspx網頁，可以顯示商品的詳細資料，這是一個URL參數的SQL查詢應用，可以在DetailsView控制項顯示商品的詳細資料，其設計檢視如下圖所示：

16-3-6 購物車的網頁說明 網路商店的購物車是ShoppingCart.aspx網頁，使用Cookies儲存的商品來建立SQL查詢指令的WHERE子句後，在GridView控制項顯示選購的商品清單，即購物車，其設計檢視如下圖所示：

16-4 診所預約系統 16-4-1 診所預約系統的網站架構 16-4-2 診所預約系統的使用 16-4-3 診所預約系統的資料庫與主版頁面 16-4-4 預約處理的網頁說明 16-4-5 病人資料編輯的網頁說明 16-4-6 預約查詢的網頁說明

16-4 診所預約系統 診所預約系統是針對小型牙科診所建立的病人預約看診系統，在選擇姓名、日期與時間後，就可以新增預約看診記錄，系統還提供病人資料管理和查詢功能，可以查詢病人的預約記錄。

16-4-1 診所預約系統的網站架構-說明 診所預約系統整合ADO.NET物件的程式碼和Web控制項，使用DropDownList、GridView和Calendar控制項建立預約處理網頁；DetailsView控制項建立病人資料編輯網頁；DropDownList和GridView控制項建立病人預約查詢網頁，其架構如下圖所示：

16-4-1 診所預約系統的網站架構-檔案 檔案名稱 說明 MyAppointment.master 診所預約系統的主版頁面 Default.aspx 診所預約系統的預約處理，使用Calendar控制項選擇日期，DropDownList控制項選擇姓名與時間，GridView控制項顯示預約記錄 EditPatients.aspx 使用DetailsView控制項建立插入、更新和刪除記錄的病人資料編輯功能 DisplayApps.aspx 使用DropDownList和GridView控制項建立參數查詢，可以查詢指定病人的預約記錄 App_Data\Appointment.mdf 儲存診所預約與病人資料的SQL Server Express資料庫

16-4-2 診所預約系統的使用-預約處理 請啟動Visual Studio Community開啟「範例網站\Ch17\MyAppointment」資料夾的ASP.NET網站，然後開啟Default.aspx網頁，就可以執行ASP.NET網頁看到預約處理網頁，如下圖所示：

16-4-2 診所預約系統的使用-病人資料編輯 在網頁上方功能表選【病人資料管理】選項，可以看到病人資料編輯的使用介面，如下圖所示：

16-4-2 診所預約系統的使用-預約查詢 在網頁上方功能表選【診所預約查詢】選項，可以查詢指定病人的預約資料，如下圖所示：

16-4-3 診所預約系統的資料庫與主版頁面- 資料庫 診所預約系統是使用SQL Server Express資料庫儲存預約與病人資料，在Appointment.mdf資料庫擁有2個資料表，Patient資料表儲存病人資料；Aptment資料表儲存預約資料，使用PatientID欄位建立一對多關聯性。

16-4-3 診所預約系統的資料庫與主版頁面- Patient資料表 欄位名稱 資料型別 長度 說明 PatientID int IDENTITY 病人編號的自動編號欄位，主鍵不允許Null Name nvarchar 50 病人姓名，不允許Null DateOfBirthday smalldatetime N/A 病人生日，不允許Null Address 病人地址，不允許Null PostCode char 10 病人郵遞區號，不允許Null Phone 12 病人電話，不允許Null

16-4-3 診所預約系統的資料庫與主版頁面- Aptment資料表 欄位名稱 資料型別 長度 說明 AptmentID int IDENTITY 預約編號的自動編號欄位，主鍵不允許Null PatientID N/A 病人編號，外來鍵不允許Null DateOfAptment datetime 預約日期，不允許Null Time nchar 10 預約時間，不允許Null

16-4-3 診所預約系統的資料庫與主版頁面- 主版頁面 主版頁面MyAppointment.master擁有名為MainContent的ContentPlaceHolder控制項，上方是Menu控制項建立的主選單，如下圖所示：

16-4-4 預約處理的網頁說明 預約處理網頁是網站首頁Default.aspx，可以進行診所的預約處理，其設計檢視如下圖所示：

16-4-5 病人資料編輯的網頁說明 病人資料編輯是EditPatients.aspx網頁，使用DetailsView控制項編輯病人資料，其設計檢視如下圖所示：

16-4-6 預約查詢的網頁說明 預約查詢網頁是DisplayApps.aspx網頁，可以查詢指定病人的預約資料，這是第9-3節參數SQL查詢的應用，只需在下拉式清單方塊選擇姓名，就可以在下方GridView控制項顯示病人的預約資料，其設計檢視如下圖所示：

16-5 部落格 16-5-1 部落格的網站架構 16-5-2 部落格的使用 16-5-3 部落格的資料庫與主版頁面 16-5-4 部落格首頁的網頁說明 16-5-5 閱讀文章和張貼回應的網頁說明 16-5-6 新增部落格的網頁說明 16-5-7 發佈文章的網頁說明

16-5 部落格 部落格網站是一個功能簡單的部落格Web應用程式，可以讓註冊會員新增部落格和張貼文章，非註冊使用者瀏覽各部落格發表的文章，和回應內容。

16-5-1 部落格的網站架構-說明 部落格網站直接啟用ASP.NET會員管理功能的表單基礎驗證，使用資料來源和資料邊界控制項建立6頁ASP.NET網頁，並且搭配ADO.NET物件程式碼執行SQL聚合查詢，其架構如右圖所示：

16-5-1 部落格的網站架構-檔案 檔案名稱 說明 MyBlog.master 部落格網站的主版頁面 Default.aspx 部落格網站的首頁，使用GridView控制項顯示所有會員建立的部落格清單 Blog.aspx 使用FormView控制項顯示指定部落格的文章內容，DataList控制項顯示回應內容，和GridView控制項顯示文章清單，在最後提供控制項來張貼回應內容 Login.aspx 使用Login控制項建立的登入網頁 Register.aspx 使用CreateUserWizard控制項建立的會員註冊網頁 Admin\NewBlog.aspx 使用GridView控制項顯示登入會員的部落格清單，並且提供控制項來建立新部落格 Admin\NewPost.aspx 張貼新文章的表單，網頁是使用SqlDataSource控制項來新增文章記錄 App_Data\Blog.mdf 儲存部落格、文章與回應資料的SQL Server Express資料庫

16-5-1 部落格的網站架構-存取規則 部落格網站已經啟用表單基礎驗證，在「Admin」資料夾建立的存取規則，如下圖所示：

16-5-2 部落格的使用-首頁 請啟動Visual Studio Community開啟「範例網站\Ch17\MyBlog」資料夾的ASP.NET網站，然後開啟Default.aspx網頁，就可以執行ASP.NET網頁看到部落格網站的首頁。

16-5-2 部落格的使用-閱讀文章 在部落格網站首頁按一下部落格名稱，可以進入部落格網頁閱讀最新發表的文章，例如：【伺服端網頁技術】部落格，如下圖所示：

16-5-2 部落格的使用-張貼回應文章 在部落格網頁顯示的文章內容最下方，可以看到張貼回應的表單，如下圖所示：

16-5-2 部落格的使用-建立部落格 在網頁上方選登入超連結，可以看到登入表單，請輸入使用者名稱hueyan和密碼@123456，在成功登入後，選右上方【新增部落格或文章】選項，可以看到管理個人部落格網頁，如下圖所示：

16-5-2 部落格的使用-發表文章 在成功登入且進入管理個人部落格網頁後，可以看到會員建立的部落格清單，如下圖所示：

16-5-3 部落格的資料庫與主版頁面- 資料庫 部落格是使用SQL Server Express資料庫儲存部落格、文章與回應資料，擁有主版頁面來格式化網站的版面配置。 在Blog.mdf資料庫擁有3個資料表，Blogs資料表儲存部落格資料；Posts資料表儲存文章資料；Comments資料表儲存回應資料，Blogs與Posts資料表是一對多關聯性，Posts與Comments資料表也是一對多關聯性。

16-5-3 部落格的資料庫與主版頁面- Blogs資料表 欄位名稱 資料型別 長度 說明 blogid int IDENTITY 部落格編號的自動編號欄位，主鍵不允許Null username nvarchar 100 使用者名稱，不允許Null name 255 部落格名稱，不允許Null description 部落格描述，不允許Null

16-5-3 部落格的資料庫與主版頁面- Posts資料表 欄位名稱 資料型別 長度 說明 postid int IDENTITY 文章編號的自動編號欄位，主鍵不允許Null blogid N/A 部落格編號，外來鍵不允許Null postdate datetime 發表日期，不允許Null subject nvarchar 255 文章主題，不允許Null post MAX 文章內容，不允許Null

16-5-3 部落格的資料庫與主版頁面- Comments資料表 欄位名稱 資料型別 長度 說明 commentid int IDENTITY 回應編號的自動編號欄位，主鍵不允許Null postid N/A 文章編號，外來鍵不允許Null commentdate datetime 發表日期，不允許Null username nvarchar 100 回應者，不允許Null comment MAX 回應內容，不允許Null

16-5-3 部落格的資料庫與主版頁面- 部落格的主版頁面 主版頁面MyBlog.master擁有名為MainContent的ContentPlaceHolder控制項，上方是Menu控制項建立的主選單、使用LoginName和LoginStatus控制項顯示使用者名稱和登入超連結，如下圖所示：

16-5-4 部落格首頁的網頁說明 部落格首頁Default.aspx可以顯示目前線上的部落格清單和每一個部落格的文章數，其設計檢視如下圖所示：

16-5-5 閱讀文章和張貼回應的網頁說明 部落格網頁Blog.aspx可以顯示部落格發表的文章內容、文章回應清單和張貼回應的表單，其設計檢視如右圖所示：

16-5-6 新增部落格的網頁說明 在「Admin」資料夾的NewBlog.aspx網頁可以顯示登入會員的部落格清單和文章數，其設計檢視如右圖所示：

16-5-7 發佈文章的網頁說明 在「Admin」資料夾的NewPost.aspx網頁是新增文章的Web表單，其設計檢視如下圖所示：