Animation動畫說明.pps - Hakko MONITOUCH人機介面.ppt

管理者認證機制,我們將使用第 13 章所介紹的 ASP.NET Web 應用程式管理員建立管理者認證機制：,管理者認證機制,請建立一個名為 admin 使用者, 並設定其屬於 manager 角色：,管理者認證機制,隨後在留言板程式中, 將判斷若使用者已登入, 而且其帳號屬於 manager 角色, 便會顯示編輯、刪除留言的管理功能, 否則便只能使用新增留言功能您可以自行透過 ASP.NET Web 應用程式管理員, 新增使用者帳號, 然後將其加入 manager 角色, 即可使用該帳號管理留言板管理者認證機制,完成帳號設定後, 請建立一個 Login.aspx 的網頁檔案, 在其中放置 Login 控制項, 供管理者登入另外, 前面設定主版頁面時, 曾經放入 LoginView 控制項, 所以管理者可以透過該控制項顯示的連結進行登入登出建立儲存留言的資料表,前面使用 ASP.NET Web 應用程式管理員設定帳號之後, VWD 會自動建立名為 ASPNETDB.MDF 的資料庫, 我們要在此資料庫中, 另外建立一個 Message 資料表, 以儲存所有留言的資料Message 資料表的結構如下：,建立儲存留言的資料表,,建立儲存留言的資料表,因為序號、日期與是否被編輯的欄位都會有預設值或自動產生值, 而編輯者與編輯日期都不是必要欄位, 所以稍後設計新增留言功能時, 只要提供標題、作者與內容欄位的值即可。

16 - 3 建立留言板網頁,留言板網頁的功能, 可分成 3 個部分, 第 1 個部分是讀取資料庫中的留言紀錄, 並顯示在留言板網頁上；第 2 部分是新增留言到資料庫；第 3 部分是留言的管理功能本節將會介紹前兩部分, 下節再說明管理功能留言板網頁的架構,留言板網頁 (GuestBook.aspx) 內有一個 MultiView 控制項, 裡面放置 2 個 View 控制項, 分別負責顯示與新增留言的功能：,留言板網頁的架構,,留言板網頁的架構,View1 內使用 GridView 控制項顯示留言板內容：,留言板網頁的架構,View2 則以 DetailsView 控制項建立一個讓使用者輸入留言的表格：,留言板網頁的架構,兩個 View 上方有一個按鈕可以讓使用者切換到另一個 View, 而 GridView 與 DetailsView 控制項都繫結至同一個 SqlDataSource 控制項設定 SqlDataSource 控制項的資料來源,在設定 SqlDataSource 控制項時, 請在設定 Select 陳述式步驟選擇指定自訂 SQL 陳述式或預存程式, 如下設定各種作業的 SQL 指令：,設定 SqlDataSource 控制項的資料來源,,設定 SqlDataSource 控制項的資料來源,,設定 SqlDataSource 控制項的資料來源,前面 16-8 頁曾經說明新增留言時只需要標題、作者與內容欄位的值, 所以在 INSERT 作業內只需定義 3 個參數。

至於 UPDATE 與 DELETE 作業的用途為編輯與刪除留言, 所以將留待下一節製作管理功能時另行說明瀏覽與新增留言的切換功能,我們會透過 Button 控制項切換網頁版面, 請在 MultiView 控制項的 View1 與 View2 各加入一個 Button 控制項如下：,瀏覽與新增留言的切換功能,請建立這兩個按鈕的 Click 事件處理程序, 加入下列程式：,瀏覽與新增留言的切換功能,第 5〜8 行的程式碼, 是在 View2 按瀏覽留言按鈕時, 會將網頁內容切換到 View1；第 10〜13 行則是在 View1 按新增留言按鈕時, 會將網頁內容切換到 View2建置瀏覽留言功能,我們將使用 View1 的 GridView 控制項呈現資料庫中的留言, 為了讓版面配置符合留言板的需求, 所有欄位都以樣板來設計, 並自訂樣版中控制項與資料庫來源的繫結請在 View1 建立 GridView 控制項, 並選擇前面設定的 SqlDataSource1 做為其資料來源, 此時預設會顯示 Message 資料表內所有欄位：,建置瀏覽留言功能,因為上面形式並不符合一般留言板的外觀, 所以請如下編輯資料行：,建置瀏覽留言功能,,建置瀏覽留言功能,編輯完成後, 請依照下面步驟編輯樣板：,建置瀏覽留言功能,建置瀏覽留言功能,接著請依照上面步驟設定各控制項的資料繫結：,建置瀏覽留言功能,LabelEdited 控制項的 Visible 屬性繫結至是否被編輯欄位, 所以當該欄位的值為 True 時, LabelEdited 控制項才會顯示於網頁上。

另外請如下設定 LabelEdited 控制項 Text 屬性的資料繫結：,建置瀏覽留言功能,,建置瀏覽留言功能,資料繫結運算式 Eval (“abc”) 會傳回 abc 欄位的資料值, 所以我們以此方式取得編輯者與編輯日期的欄位值, 並且加上自訂字串之後指定給 LabelEdited 控制項 Text 屬性如此即可完成瀏覽留言的功能, 請使用瀏覽器執行 GuestBook.aspx 網頁, 瀏覽目前的成果：,建置瀏覽留言功能,,處理留言中的空白與換行字元,由於網頁中的空白必須使用 “ ” 符號才能正確顯示, 而換行則要使用 “
” 標籤來表示, 因此本章的留言板程式也必須處理這兩個字元留言板程式存取、顯示留言的狀況有下面 4 種：,處理留言中的空白與換行字元,,處理留言中的空白與換行字元,若在圖中的狀況 A 就處理空白與換行字元, 那麼存入資料庫的留言就會包含 “ ” 與 “
”, 如此雖然顯示留言時可以正確表示空白與換行, 但是編輯留言時, 在狀況 C 必須進行相反的取代, 否則編輯者就會看到 “ ” 與 “
”, 而不是空白與換行。

當編輯完畢後, 狀況 D 還需要再次進行取代工作, 所以 4 種狀況中有 3 種需要進行額外的處理處理留言中的空白與換行字元,其實只要換個角度思考, 改為在狀況 B 進行取代, 其他狀況 A、C、D 都不進行處理, 即可避免產生上面麻煩的問題GridView 控制項進行資料繫結時, 每繫結一筆記錄即會產生 RowDataBound 事件, 所以我們可以在該事件的處理程序中撰寫程式取代空白與換行字元請如下建立 GridView1 的 GridView1_RowDataBound 程序：,處理留言中的空白與換行字元,請在 GridView1_RowDataBound 程序中輸入以下程式：,處理留言中的空白與換行字元,,建置新增留言功能,我們使用 DetailsView 控制項製作新增留言的功能, DetailsView 控制項具有檢視 (ReadOnly)、編輯 (Edit)、新增 (Insert) 等 3 種模式, 此處我們只需用到新增資料的功能, 所以將其預設模式 (DefaultMode 屬性) 設定為 Insert請在 View2 中新增一個 DetailsView 控制項, 如下進行設定：,建置新增留言功能,,建置新增留言功能,,建置新增留言功能,因為 DetailsView 預設的 TextBox 欄位只有單行, 為了讓使用者可以輸入多行留言, 所以請編輯 DetailsView 的樣版, 切換到內容欄位的 InsertItemTemplate, 如下設定：,建置新增留言功能,如此即可完成基本的新增留言功能：,建置新增留言功能,最後請參考 16-16 頁建立 GridView1_RowDataBound 程序的說明, 使用類似方法建立 MultiView1_ActiveViewChanged 與 DetailsView1_ItemInserted 程序, 輸入以下程式碼：,建置新增留言功能,,建置新增留言功能,,建置新增留言功能,第 29 行至第 38 行程式碼判斷若使用者切換到 View2 準備新增留言時, 會檢查使用者是否已經登入 (16-6 頁製作了管理者認證機制), 如果已經登入, 便直接將帳號名稱填入作者欄位。

第 44 行程式讓顯示留言的 GridView1 重新繫結, 才能將剛剛新增的留言顯示於網頁上建置新增留言功能,第 46 行程式取消 DetailsView1 的 ViewState 功能, 由於 ASP.NET 會自動使用 ViewState 記錄控制項的狀態, 不過因為使用者已經送出留言, 所以關閉 ViewState 使其狀態不再被記錄, 即可清空 DetailsView1 各欄位內的文字16 - 4 留言板的管理功能,設定 SqlDataSource 的 DELECT 與 UPDATE 指令依照登入者身份產生刪除與編輯按鈕製作編輯功能的樣版,設定 SqlDataSource 的 DELECT 與 UPDATE 指令,前面建立 SqlDataSource 控制項時, 只有設定其 SELECT 與 INSERT 指令, 為了提供刪除與編輯的管理功能, 必須如下設定 DELECT 指令：,設定 SqlDataSource 的 DELECT 與 UPDATE 指令,,,設定 SqlDataSource 的 DELECT 與 UPDATE 指令,,。