Microsoft Word - CH17.doc

Size: px

Start display at page:

Download "Microsoft Word - CH17.doc"

牺浦
5 years ago
Views:

1 17-1 學生基本資料管理系統簡介 17-2 資料庫與資料表的建立 17-3 專案程式建立說明主題 : 學生基本資料管理系統操作講解

2 本章是以人事基本資料管理為出發點的一個系統, 目的是示範如何建立一個管理學生基本資料的簡易網站這個範例網站的建立運用到許多 ASP.NET 功能, 匯集各種功能於一身的基礎演練, 從點的運用, 到線的建立, 最終成為面面俱到的系統, 讓您學會建構網站所需的整體技巧與思考 17-1 學生基本資料管理系統簡介在實際進行網頁程式建立之前, 先對學生基本資料管理系統進行概念性介紹說明, 了解各個子系統功用後, 再一一說明如何建立這些功能系統首頁 (Default.aspx) 首頁為網站系統一開始進入的預定頁面, 在這多半是呈現一些公告事項或圖片之類的訊息在此公告畫面是秀出傑出校友照片, 或者您也可以自行建立一些公告訊息圖 17-1 系統首頁 17-2

3 瀏覽 (List.aspx) 瀏覽頁面是用來顯示學生詳細基本資料, 例如 ID 姓名性別生日等等它是以 GridView 表格及 SqlDataSource 控制項製作的, 提供瀏覽分頁編輯更新及刪除等功能圖 17-2 學生基本資料瀏覽新增 (InputData.aspx) 新增頁面是用來建立學生基本資料, 利用 ASP.NET 控制項提供輸入, 然後將資料新增到資料庫之中一旦完成輸入, 在瀏覽頁面就可以查到該筆學生資料 17-3

4 圖 17-3 新增基本資料照片上傳 (PhotoUpload.aspx) 上一個新增頁面只是單純新增文字型態之資料, 但對於學生照片則是在照片上傳頁面中上傳, 以 FileUpload 控制項提供上傳功能, 一次最多可上傳 10 張照片 17-4 圖 17-4 照片上傳

5 搜尋 (Search.aspx) 在前面的瀏覽功能中, 只提供 GridView 表格式瀏覽, 它無法提供條件式資料搜尋而搜尋是以學生姓名或學號做為搜尋關鍵字, 並提供 AND 及 OR 的條件, 讓您可以迅速查詢與過濾特定學生資料圖 17-5 學生資料搜尋帳號維護 (Accounts.aspx) 帳號維護是針對系統操作人員, 例如系統管理員作業人員或查詢人員, 但就是不包括一般人或學生因為大家必須有一個基本認知, 就是任何人事基本資料, 在機關公司或學校中, 永遠是敏感性機密資料, 唯獨相關人員可以查詢或觸碰到此系統, 其他人一律是被禁止的所以帳號維護是建立可以操作此系統的帳號, 並可設定讀寫新增與刪除四種權限, 進一步管控不同帳號持有人, 可執行不同功能, 進而達到功能設限與安全性管理之目的 17-5

6 圖 17-6 系統操作人員帳號管理密碼變更密碼變更可用來變更密碼, 只要帳號登入通過後, 進入此頁面, 輸入新密碼後, 按下更新按鈕, 當下次再重新登入時, 就可使用新密碼了圖 17-7 密碼變更 17-6

7 登入 (Login.aspx) 因為人事基本資料本屬機密, 所以任何人都必須用帳號與密碼登入後才能存取此系統, 而非對一般人開放查詢與使用資料庫有一個預設帳號 admin, 密碼亦是 admin, 您可以用這個帳號進行登入圖 17-8 帳號登入以上八大功能構成本學生基本資料管理系統之主體, 然而在實作上, 還包含資料庫建立與整合性設計, 後續會一一說明 17-2 資料庫與資料表的建立由於本專案資料是保存 SQL Server 之中, 所以必須在 SQL Server 中建立一個名為 School 的資料庫, 然後 ASP.NET 專案程式資料之存取, 便是以 School 資料庫中資料表為依據, 進行讀取寫入新增刪除等動作而 School 資料庫包含兩個資料表 : Students UserAccount,Students 資料表是用來保存學生人事基本資料, 而 UserAccount 資料表是用來保存系統操作人員之帳號密碼與權限建立步驟如下 : 17-7

8 建立 School 資料庫在 SQL Server 管理工具點選資料庫新增資料庫輸入資料庫名稱 School, 按確定結束圖 17-9 新增 School 資料庫新增 Students 資料表及欄位定義在 School 資料庫的資料表按滑鼠右鍵點選新增資料表, 依下圖定義資料表欄位 Schema, 設定 ID 欄位為主索引鍵, 完成後以 Students 命名儲存圖建立 Students 資料表及欄位定義 17-8

9 新增 UserAccount 資料表及欄位定義在 School 資料庫的資料表按滑鼠右鍵點選新增資料表, 依下圖定義資料表欄位 Schema, 設定 ID 欄位為主索引鍵, 完成後以 UserAccount 命名儲存圖建立 UserAccount 資料表及欄位定義 17-9

17-3 專案程式建立說明學生基本資料管理系統之專案名稱為 Students, 下圖為專案程式之組成畫面, 兩旁以文字標示說明其功能 CSS 樣式網站圖片 jquery 縣市資料全域應用程式類別資料瀏覽主版頁面密碼變更搜尋資料學生照片帳號管理系統首頁新增資料登入功能照片上傳網站組態檔圖

10 17-3 專案程式建立說明學生基本資料管理系統之專案名稱為 Students, 下圖為專案程式之組成畫面, 兩旁以文字標示說明其功能 CSS 樣式網站圖片 jquery 縣市資料全域應用程式類別資料瀏覽主版頁面密碼變更搜尋資料學生照片帳號管理系統首頁新增資料登入功能照片上傳網站組態檔圖系統專案程式以下分 10 個小節說明各程式之建立主版頁面的運用主版頁面 (Master Page) 是 ASP.NET 內建的一種網站樣板, 用來建立一致性的外觀, 或者是功能性選單主版頁面類似中間挖了洞的面具, 中間就可讓每個內容網頁套用, 以下是主版頁面的原始結構 17-10

圖 17-13 主版頁面之結構上圖中比較特別的是及兩部分, 這兩個部分會與套用主版頁面的.

11 圖主版頁面之結構上圖中比較特別的是及兩部分, 這兩個部分會與套用主版頁面的.aspx 內容頁結合,<asp:ContentPlaceHolder> </asp:contentplaceholder> 中的區塊會動態生成內容, 主要是給內容頁用的而主版頁面設計方式其實和一般網頁設計幾乎相同, 請網頁美術設計人員設計好網站版型後 ( 如專案中的 HtmlTemplate.htm 原始版型 ), 再放進 MasterPage.master 中, 並記得加入 <asp:contentplaceholder /> 兩個區塊, 以下是 MasterPage.master 畫面及宣告 : 圖主版頁面版型 17-11

12 Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery min.js" type="text/javascript"></script> <asp:contentplaceholder ID="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div id="header"> </div> <h1> 學生基本資料管理系統 </h1> <div id="menu"> <ul> <li class="first"><a href="default.aspx"> 首頁 </a></li> <li><a href="list.aspx"> 瀏覽 </a></li> <li><a href="inputdata.aspx"> 新增 </a></li> <li><a href="photoupload.aspx"> 照片上傳 </a></li> <li><a href="search.aspx"> 搜尋 </a></li> <li><a href="accounts.aspx"> 帳號維護 </a></li> <li><a href="password.aspx"> 密碼變更 </a></li> <li> </li> <asp:loginstatus ID="LoginStatus1" runat="server" /> <li> <asp:loginname ID="LoginName1" runat="server" FormatString=" 使用者 :{0}" /> </ul> </div> </li> <div id="page"> <div id="content"> </div> </div> <asp:contentplaceholder ID="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> 17-12

<div id="footer"> <p> 本系統由聖殿祭司製作 </p> </div> </form> </body> </html> 17-3-2 首頁程式的建立首頁是一進入系統時所顯示的文字或照片公告, 主要是給系統操作人員觀看請參考 Default.

13 <div id="footer"> <p> 本系統由聖殿祭司製作 </p> </div> </form> </body> </html> 首頁程式的建立首頁是一進入系統時所顯示的文字或照片公告, 主要是給系統操作人員觀看請參考 Default.aspx 程式, 建立步驟如下 : 加入 Default.aspx 頁面在專案中加入 Default.asp 程式勾選右下角之選擇主版頁面按下新增按鈕選擇 MasterPage.master, 這樣 Default.aspx 即可套用主版頁面圖選擇套用主版頁面 17-13

14 在 head 的 <asp:content /> 區塊加入參考在 Default.aspx 的 head 之 <asp:content /> 區塊加入 CSS 及 jquery 參考 : <asp:content ID="Content1" ContentPlaceHolderID="head" runat="server"> <link href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-ui custom.min.js" type="text/javascript"></script> </asp:content> 在內容的 <asp:content /> 區塊加入 jquery UI 的 Tab 在內容的 <asp:content /> 區塊加入 jquery UI 的四個 Tab 頁籤宣告 : <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <p> 傑出交友照片公告 </p> <div id="tabs"> <ul> <li><a href="#tabs-1"> 林志玲 </a></li> </ul> <li><a href="#tabs-2"> 劉德華 </a></li> <li><a href="#tabs-3"> 黃曉明 </a></li> <li><a href="#tabs-4"> 系統說明 </a></li> <div id="tabs-1"> <p> <img src="photos/ 林志玲.jpg" /> </p> </div> <div id="tabs-2"> <p> <img src="photos/ 劉德華.jpg" /> </p> </div> <div id="tabs-3"> <p> <img src="photos/ 黃曉明.jpg" /> </p> </div> <div id="tabs-4"> <p> 事項一 : 本系統只限特定人員操作 17-14

15 </div> </p> <p> 事項二 : 因帳號權限的不同, 所能操作的功能也不同 </p> </div> <script type="text/javascript"> $("#tabs").tabs() </script> </asp:content> jquery UI 的 Tab 語法程式說明以上 <div id="tabs"> </div> 區段是四個 Tab 頁籤內容, 而最後 $("#tabs").tabs() 語法則是用來指示 jquery UI 將這幾個內容變成 Tab 頁籤型式而 jquery UI 的 Tab 因為是在網頁瀏覽執行時, 才會透過 JavaScript 去變更成 Tab, 所以在 VS 2010 中無法事呈現正確的設計畫面, 請不用介意瀏覽程式的建立瀏覽程式是用來瀏覽學生基本資料, 以 GridView 顯示所有學生資料請參考 List.aspx 程式, 建立步驟如下 : 加入 List.aspx 頁面在專案中加入 List.aspx 程式勾選右下角之選擇主版頁面按下新增按鈕選擇 MasterPage.master 套用主版頁面建立 GridView 及 SqlDataSource 控制項在 List.aspx 中加入 GridView 及 SqlDataSource 控制項,SqlDataSource 控制項讀取之資料來源為 Students 資料表, 然後設定 GridView 資料來源為 SqlDataSource 控制項將 GridView 欄位轉換成樣板點選 GridView 智慧標籤的編輯資料行將左下角所有欄位轉換為 TemplateFIeld 17-15

圖 17-16 將欄位轉換為 TemplateField 設定照片欄位因為照片預設是以文字顯示 Url 網址文字, 但我們希望顯示的是圖片, 故移除最後一個照片欄位重新加入一個 ImageField 欄位, 並設定以下屬性, 這樣就能夠顯示照片, 而非照片網址的文字屬性設定 DataImageUrlField DataImageUrlFormat ControlStyle 的 Height

16 圖將欄位轉換為 TemplateField 設定照片欄位因為照片預設是以文字顯示 Url 網址文字, 但我們希望顯示的是圖片, 故移除最後一個照片欄位重新加入一個 ImageField 欄位, 並設定以下屬性, 這樣就能夠顯示照片, 而非照片網址的文字屬性設定 DataImageUrlField DataImageUrlFormat ControlStyle 的 Height ControlStyle 的 Width HeaderText PhotoUrl Photos/{0} 30px 30px 照片編輯欄位控制項之繫結與事件程式但 List.aspx 程式的 GridView 控制項, 在編輯模式時, 血型身高體重與縣市四個欄位將改為 DropDownList 選取, 同時性別的 True 與 False 資料也需轉換為男或女, 以提供較為人性化輸入, 但這就必須客製化設定欄位控制項之繫結與事件程式 17-16

圖 17-17 欄位控制項之繫結與事件程式設定設定血型欄位之 Bind 資料繫結屬性點選 GridView 控制項智慧標籤的編輯樣板選取 Column[5]- 血型的

O RH 五個項目, 同時設定每個項目的 Text 及 Value 屬性點選智慧標籤的 DataBindings 資料繫結勾選左下方之顯示所有屬性設定 ToolTip

17 圖欄位控制項之繫結與事件程式設定設定血型欄位之 Bind 資料繫結屬性點選 GridView 控制項智慧標籤的編輯樣板選取 Column[5]- 血型的 EditItemTemplate 移除 TextBox 控制項加入 DropDownList 控制項, 並命名為 dwnblood 點選其智慧標籤的編輯項目加入 A B AB O RH 五個項目, 同時設定每個項目的 Text 及 Value 屬性點選智慧標籤的 DataBindings 資料繫結勾選左下方之顯示所有屬性設定 ToolTip 屬性自訂繫結為 Bind("Blood"), 如此 DropDownList 選取變更時就會自動繫結回寫到資料庫圖設定血型 DropDownList 之 Bind 資料繫結 17-17

18 血型 DropDownList 控制項選取變更之事件程式雙擊血型 DropDownList 控制項, 加入選取變更時之程式, 將選取值同時設定到 ToolTip 屬性 : 01 'ToolTips 屬性會 Bind("Blood"), 故選擇索引改變時, 02 ' 設定 ToolTip 內容為選取文字, 然後自動繫結回寫資料庫 03 Protected Sub dwnblood_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 04 Dim dwnblood As DropDownList = CType(sender, DropDownList) 05 If dwnblood.selectedvalue <> 0 Then 06 dwnblood.tooltip = dwnblood.selecteditem.text 07 End If 08 End Sub 設定身高體重與縣市欄位之 Bind 繫結屬性及選取事件身高體重與縣市欄位 DropDownList 控制項之 Bind 資料繫結, 也是透過 ToolTip 屬性來進行, 請仿照血型之 DropDownList 控制項的設定方式至於 DropDownList 的選取項目變更時之事件程式如下 : 01 'ToolTips 屬性會 Bind("Height"), 故選擇索引改變時, 02 ' 設定 ToolTip 內容為選取文字, 然後自動繫結回寫資料庫 03 Protected Sub dwnheight_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 04 Dim dwnheight = CType(sender, DropDownList) 05 dwnheight.tooltip = dwnheight.selecteditem.text 06 End Sub 'ToolTips 屬性會 Bind("Weight"), 故選擇索引改變時, 09 ' 設定 ToolTip 內容為選取文字, 然後自動繫結回寫資料庫 10 Protected Sub dwnweight_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 11 Dim dwnweight = CType(sender, DropDownList) 12 dwnweight.tooltip = dwnweight.selecteditem.text 13 End Sub 'ToolTips 屬性會 Bind("City"), 故選擇索引改變時, 16 ' 設定 ToolTip 內容為選取文字, 然後自動繫結回寫資料庫 17 Protected Sub dwncity_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 18 Dim dwncity = CType(sender, DropDownList) 19 dwncity.tooltip = dwncity.selecteditem.text 20 End Sub 17-18

19 設定一般事件程式最後加入幾個一般事件程式, 事件功用則註解在程式中 : 01 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 02 If Not Session("Permission").ToString().Contains("R") Then 03 Response.Redirect("Message.aspx?Reason= 必須具備讀取權限 ") 04 End If 05 End Sub ' 如果沒有編輯或刪除權限, 則將對應的 Button 按鈕隱藏 08 Protected Sub gvstudents_databound(byval sender As Object, ByVal e As System.EventArgs) Handles gvstudents.databound 09 Dim permission = Session("Permission").ToString() 10 If Not permission.contains("u") Or Not permission.contains("d") Then 11 Dim btnedit As Button 12 Dim btndelete As Button 13 For i = 0 To gvstudents.rows.count If Not permission.contains("u") Then 15 btnedit = CType(gvStudents.Rows(i).Cells(0).Controls(1), Button) ' 編輯按鈕 16 If btnedit.text = " 編輯 " Then 17 btnedit.enabled = False 18 End If 19 End If 20 If Not permission.contains("d") Then 21 btndelete = CType(gvStudents.Rows(i).Cells(0).Controls(3), Button) ' 刪除按鈕 22 If btndelete.text = " 刪除 " Then 23 btndelete.enabled = False 24 End If 25 End If 26 Next 27 End If 28 End Sub ' 將 Gender 性別的 Boolean, 由 True 或 False 轉換成男或女 31 Protected Sub gvstudents_rowdatabound(byval sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvstudents.rowdatabound 32 If e.row.rowtype = DataControlRowType.DataRow Then 33 Dim view As DataRowView = CType(e.Row.DataItem, DataRowView) 34 If view IsNot Nothing Then 17-19

20 35 ' 取得 Gender 欄位資料 36 If Not String.IsNullOrEmpty(view.Item(2)) Then 37 Dim gender As Boolean = view.item(2) 38 Dim txtgender = CType(e.Row.Cells(3).FindControl("txtGender"), Label) 39 If txtgender IsNot Nothing Then 40 If gender = True Then 41 txtgender.text = " 男 " 42 Else 43 txtgender.text = " 女 " 44 End If 45 End If 46 End If 47 End If 48 End If 49 End Sub ' 編輯模式時, 設定欄位的寬度 52 Protected Sub gvstudents_rowediting(byval sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gvstudents.rowediting 53 gvstudents.columns(2).controlstyle.width = gvstudents.columns(4).controlstyle.width = gvstudents.columns(6).controlstyle.width = gvstudents.columns(7).controlstyle.width = gvstudents.columns(10).controlstyle.width = End Sub ' 替身高的 DropDownList 加入項目 61 Protected Sub dwnheight_load(byval sender As Object, ByVal e As System.EventArgs) 62 Dim dwnheight = CType(sender, DropDownList) 63 dwnheight.items.add("==") 64 For i = 155 To dwnheight.items.add(i) 66 Next 67 End Sub ' 替體重的 DropDownList 加入項目 70 Protected Sub dwnweight_load(byval sender As Object, ByVal e As System.EventArgs) 71 Dim dwnweight = CType(sender, DropDownList) 72 dwnweight.items.add("==") 73 For i = 50 To dwnweight.items.add(i) 75 Next 76 End Sub 17-20

21 設定編輯模式下生日 TextBox 使用 jquery UI 的日曆控制項以下透過 jquery UI 將編輯模式下的生日 TextBox 改造為日曆控制項 : <asp:content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="scripts/jquery-ui custom.min.js" type="text/javascript"></script> <link href="css/ui-lightness/jquery-ui custom.css" rel="stylesheet" type="text/css" />... <script type="text/javascript"> $(function () { $("input[id$=txtbirthday]").datepicker({ dateformat: 'yy/mm/dd' }); 略 </script> </asp:content> 新增資料程式的建立新增程式是用來新增學生資料到 Students 資料表請參考 InputData.aspx 程式, 建立步驟如下 : 建立 DetailsView 及 SqlDataSource 控制項建立 DetailsView 及 SqlDataSource 控制項, 設定 DetailsView 資料來源為 SqlDataSource, 將 DetailsView 的 DefaultMode 屬性設為 Insert 設定 SqlDataSource 之資料來源點選 SqlDataSource 控制項智慧標籤的設定資料來源勾選 * 星號讀取所有欄位點選進階按鈕將產生 Insert Update 和 Delete 陳述式打勾將欄位轉換為 TemplateField 欄位因 DetailsView 多數欄位在編輯模式為 TextBox 控制項, 在此欲將某些欄位的 TextBox 控制項以 RadioButtonList 或 DropDownList 控制項取代, 作為輸入或選取之用, 故點選 DetailsView 控制項智慧標籤的編輯欄位將左下角所有欄位轉換為 TemplateField 欄位, 唯除新增插入取消欄位保持原狀 17-21

於樣板中建立不同型態之輸入控制項點選 DetailsView 智慧標籤的編輯様板, 於每個欄位的 InsertItemTemplate 建立對應的輸入控制項, 以取代原有的 TextBox 控制項圖 17-19 建立替代輸入控制項圖 17-20

sender As Object, ByVal e As System.EventArgs) Handles Me.

22 於樣板中建立不同型態之輸入控制項點選 DetailsView 智慧標籤的編輯様板, 於每個欄位的 InsertItemTemplate 建立對應的輸入控制項, 以取代原有的 TextBox 控制項圖建立替代輸入控制項圖各欄位對應之替代控制項建立資料新增及輸入驗證之程式最後建立資料新增及輸入驗證之程式 : 01 Dim InputMsg As String = "" ' 欄位輸入驗證之訊息 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 04 ' 檢查是否具有學生資料讀取權限 05 Dim permission As String = Session("Permission") 06 If Not (permission.contains("r") And permission.contains("c")) Then 07 Response.Redirect("Message.aspx?Reason= 必須同時具備讀取與新增權限 ")

23 08 End If ' 產生控制項資料 11 Dim dwnheight As DropDownList = dvstudent.findcontrol("dwnheight") 12 Dim dwnweight As DropDownList = dvstudent.findcontrol("dwnweight") 13 dwnheight.items.add("= 請選擇 =") 14 For i = 155 To dwnheight.items.add(i) 16 Next 17 dwnweight.items.add("= 請選擇 =") 18 For i = 50 To dwnweight.items.add(i) 20 Next Dim rdo = CType(dvStudent.FindControl("rdoGender"), RadioButtonList) 23 End Sub Protected Sub dwncity_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 26 'ToolTip 屬性與資料來源 City 欄位是 Bind 雙向繫結 27 ' 故將 DropDownList 選取的縣市指定給 ToolTip 屬性 28 ' 在 Insert 到資料庫時, 它會自動寫入到 City 欄位 29 Dim dwncity As DropDownList = CType(dvStudent.FindControl("dwnCity"), DropDownList) 30 dwncity.tooltip = dwncity.selecteditem.text 31 End Sub Protected Sub dvstudent_iteminserted(byval sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs) Handles dvstudent.iteminserted 34 If e.affectedrows > 0 Then 35 txtmsg.text = " 新增資料成功!" 36 Else 37 txtmsg.text = " 新增資料失敗!" 38 End If 39 End Sub Protected Sub dvstudent_iteminserting(byval sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertEventArgs) Handles dvstudent.iteminserting 42 'Dim txtbirthday = CType(dvStudent.FindControl("txtBirthday"), TextBox) 43 ' 檢查是否有新增資料之權限 44 If Not Session("Permission").ToString().Contains("C") Then 45 e.cancel = True ' 若沒有新增權限, 則取消插入動作 46 Else 17-23

24 ' 新增資料前, 進行輸入資料之檢查 48 If CheckInput() = False Then 49 txtmsg.text = "<ul>" & InputMsg & "</ul>" 50 e.cancel = True 51 End If 52 End If 53 End Sub Protected Function CheckInput() As Boolean 56 'Input 輸入合法性檢查, 預設為 True 57 Dim status As Boolean = True ' 檢查 ID 帳號不得為空白 60 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtID"), TextBox).Text.Trim()) Then 61 status = False 62 InputMsg &= "<li>* 請輸入 ID 帳號 </li>" 63 End If 64 ' 檢查姓名不得為空白 65 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtName"), TextBox).Text.Trim()) Then 66 status = False 67 InputMsg &= "<li>* 請輸入姓名 </li>" 68 End If ' 檢查性別是否有選擇 71 Dim rdogender = CType(dvStudent.FindControl("rdoGender"), RadioButtonList) 72 If rdogender.selectedindex = -1 Then 73 status = False 74 InputMsg &= "<li>* 請輸入性別 </li>" 75 End If ' 檢查血型是否有選擇 78 Dim rdoblood = CType(dvStudent.FindControl("rdoBlood"), RadioButtonList) 79 If rdoblood.selectedindex = -1 Then 80 status = False 81 InputMsg &= "<li>* 請選擇血型 </li>" 82 End If ' 身高 85 If CType(dvStudent.FindControl("dwnHeight"), DropDownList).SelectedIndex = 0 Then 86 status = False 87 InputMsg &= "<li>* 請輸入身高 </li>" 88 End If

25 89 90 ' 體重 91 If CType(dvStudent.FindControl("dwnWeight"), DropDownList).SelectedIndex = 0 Then 92 status = False 93 InputMsg &= "<li>* 請輸入體重 </li>" 94 End If ' 縣市 97 If CType(dvStudent.FindControl("dwnCity"), DropDownList).SelectedIndex = 0 Then 98 status = False 99 InputMsg &= "<li>* 請輸入縣市 </li>" 100 End If ' 檢查地址不得為空白 104 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtAddress"), TextBox).Text.Trim()) Then 105 status = False 106 InputMsg &= "<li>* 請輸入地址 </li>" 107 End If ' 檢查電話不得為空白 110 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtAddress"), TextBox).Text.Trim()) Then 111 status = False 112 InputMsg &= "<li>* 請輸入電話 </li>" 113 End If Return status 116 End Function Protected Sub dwnheight_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 119 Dim dwnheight = CType(sender, DropDownList) 120 dwnheight.tooltip = dwnheight.selecteditem.text 121 End Sub Protected Sub dwnweight_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 124 Dim dwnweight = CType(sender, DropDownList) 125 dwnweight.tooltip = dwnweight.selecteditem.text 126 End Sub

26 128 Protected Sub dwncity_selectedindexchanged1(byval sender As Object, ByVal e As System.EventArgs) 129 Dim dwncity = CType(sender, DropDownList) 130 dwncity.tooltip = dwncity.selecteditem.text 131 End Sub ' 性別選取時, 設定選取值到 ToolTip 屬性 134 Protected Sub rdogender_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 135 Dim rdogender = CType(dvStudent.FindControl("rdoGender"), RadioButtonList) 136 rdogender.tooltip = IIf(rdoGender.SelectedItem.Text = " 男 ", True, False) 137 End Sub Protected Sub rdoblood_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) 140 Dim rdoblood = CType(dvStudent.FindControl("rdoBlood"), RadioButtonList) 141 rdoblood.tooltip = rdoblood.selecteditem.text 142 End Sub 照片上傳程式的建立照片上傳程式是用來上傳學生照片到網站, 在此是透過 FileUpload 控制項提供上傳功能, 並限制上傳 jpg gif png 三種格式照片請參考 PhotoUpload.aspx 程式, 建立步驟如下 : 建立 FileUpload 檔案上傳控制項從工具箱拖曳建立十個 FileUpload 控制項, 以便可以一次上傳十個檔案 17-26

導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式

導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式導讀 ASP.NET HTML ASP 第一篇基礎篇第 1 章認識 ASP.NET ASP.NET ASP.NET ASP.NET ASP.NET 第 2 章認識 Visual Studio 20 開發環境 Visual Studio 20 Visual Studio 20 第二篇 C# 程式語言篇第 3 章 C# 程式語言基礎 C# C# 3.0 var 第 4 章基本資料處理 C# x