17-1 學生基本資料管理系統簡介 17-2 資料庫與資料表的建立 17-3 專案程式建立說明 主題 : 學生基本資料管理系統操作講解
本章是以人事基本資料管理為出發點的一個系統, 目的是示範如何建立一個管理學生基本資料的簡易網站 這個範例網站的建立運用到許多 ASP.NET 功能, 匯集各種功能於一身的基礎演練, 從點的運用, 到線的建立, 最終成為面面俱到的系統, 讓您學會建構網站所需的整體技巧與思考 17-1 學生基本資料管理系統簡介 在實際進行網頁程式建立之前, 先對學生基本資料管理系統進行概念性介紹說明, 了解各個子系統功用後, 再一一說明如何建立這些功能 系統首頁 (Default.aspx) 首頁 為網站系統一開始進入的預定頁面, 在這多半是呈現一些公告事項或圖片之類的訊息 在此公告畫面是秀出傑出校友照片, 或者您也可以自行建立一些公告訊息 圖 17-1 系統首頁 17-2
瀏覽 (List.aspx) 瀏覽 頁面是用來顯示學生詳細基本資料, 例如 ID 姓名 性別 生日等等 它是以 GridView 表格及 SqlDataSource 控制項製作的, 提供瀏覽 分頁 編輯 更新及刪除等功能 圖 17-2 學生基本資料瀏覽新增 (InputData.aspx) 新增 頁面是用來建立學生基本資料, 利用 ASP.NET 控制項提供輸入, 然後將資料新增到資料庫之中 一旦完成輸入, 在 瀏覽 頁面就可以查到該筆學生資料 17-3
圖 17-3 新增基本資料照片上傳 (PhotoUpload.aspx) 上一個 新增 頁面只是單純新增文字型態之資料, 但對於學生照片則是在 照片上傳 頁面中上傳, 以 FileUpload 控制項提供上傳功能, 一次最多可上傳 10 張照片 17-4 圖 17-4 照片上傳
搜尋 (Search.aspx) 在前面的 瀏覽 功能中, 只提供 GridView 表格式瀏覽, 它無法提供條件式資料搜尋 而 搜尋 是以學生姓名或學號做為搜尋關鍵字, 並提供 AND 及 OR 的條件, 讓您可以迅速查詢與過濾特定學生資料 圖 17-5 學生資料搜尋帳號維護 (Accounts.aspx) 帳號維護 是針對系統操作人員, 例如系統管理員 作業人員或查詢人員, 但就是不包括一般人或學生 因為大家必須有一個基本認知, 就是任何人事基本資料, 在機關 公司或學校中, 永遠是敏感性機密資料, 唯獨相關人員可以查詢或觸碰到此系統, 其他人一律是被禁止的 所以 帳號維護 是建立可以操作此系統的帳號, 並可設定讀 寫 新增與刪除四種權限, 進一步管控不同帳號持有人, 可執行不同功能, 進而達到功能設限與安全性管理之目的 17-5
圖 17-6 系統操作人員帳號管理 密碼變更 密碼變更 可用來變更密碼, 只要帳號登入通過後, 進入此頁面, 輸入新密碼後, 按下 更新 按鈕, 當下次再重新登入時, 就可使用新密碼了 圖 17-7 密碼變更 17-6
登入 (Login.aspx) 因為人事基本資料本屬機密, 所以任何人都必須用帳號與密碼登入後才能存取此系統, 而非對一般人開放查詢與使用 資料庫有一個預設帳號 admin, 密碼亦是 admin, 您可以用這個帳號進行登入 圖 17-8 帳號登入 以上八大功能構成本 學生基本資料管理系統 之主體, 然而在實作上, 還包含資料庫建立與整合性設計, 後續會一一說明 17-2 資料庫與資料表的建立 由於本專案資料是保存 SQL Server 之中, 所以必須在 SQL Server 中建立一個名為 School 的資料庫, 然後 ASP.NET 專案程式資料之存取, 便是以 School 資料庫中資料表為依據, 進行讀取 寫入 新增 刪除等動作 而 School 資料庫包含兩個資料表 : Students UserAccount,Students 資料表是用來保存學生人事基本資料, 而 UserAccount 資料表是用來保存系統操作人員之帳號 密碼與權限 建立步驟如下 : 17-7
建立 School 資料庫 在 SQL Server 管理工具點選 資料庫 新增資料庫 輸入資料庫名稱 School, 按 確定 結束 圖 17-9 新增 School 資料庫新增 Students 資料表及欄位定義在 School 資料庫的 資料表 按滑鼠右鍵 點選 新增資料表, 依下圖定義資料表欄位 Schema, 設定 ID 欄位為主索引鍵, 完成後以 Students 命名儲存 圖 17-10 建立 Students 資料表及欄位定義 17-8
新增 UserAccount 資料表及欄位定義在 School 資料庫的 資料表 按滑鼠右鍵 點選 新增資料表, 依下圖定義資料表欄位 Schema, 設定 ID 欄位為主索引鍵, 完成後以 UserAccount 命名儲存 圖 17-11 建立 UserAccount 資料表及欄位定義 17-9
17-3 專案程式建立說明 學生基本資料管理系統之專案名稱為 Students, 下圖為專案程式之組成畫面, 兩旁以文字標示說明其功能 CSS 樣式 網站圖片 jquery 縣市資料全域應用程式類別資料瀏覽主版頁面密碼變更搜尋資料 學生照片帳號管理系統首頁新增資料登入功能照片上傳網站組態檔 圖 17-12 系統專案程式 以下分 10 個小節說明各程式之建立 17-3-1 主版頁面的運用 主版頁面 (Master Page) 是 ASP.NET 內建的一種網站樣板, 用來建立一致性的外觀, 或者是功能性選單 主版頁面類似中間挖了洞的面具, 中間就可讓每個內容網頁套用, 以下是主版頁面的原始結構 17-10
圖 17-13 主版頁面之結構上圖中比較特別的是 及 兩部分, 這兩個部分會與套用主版頁面的.aspx 內容頁結合,<asp:ContentPlaceHolder> </asp:contentplaceholder> 中的區塊會動態生成內容, 主要是給內容頁用的 而主版頁面設計方式其實和一般網頁設計幾乎相同, 請網頁美術設計人員設計好網站版型後 ( 如專案中的 HtmlTemplate.htm 原始版型 ), 再放進 MasterPage.master 中, 並記得加入 <asp:contentplaceholder /> 兩個區塊, 以下是 MasterPage.master 畫面及宣告 : 圖 17-14 主版頁面版型 17-11
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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-1.4.2.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.aspx 程式, 建立步驟如下 : 加入 Default.aspx 頁面在專案中加入 Default.asp 程式 勾選右下角之 選擇主版頁面 按下 新增 按鈕 選擇 MasterPage.master, 這樣 Default.aspx 即可套用主版頁面 圖 17-15 選擇套用主版頁面 17-13
在 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-1.8.1.custom.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-ui-1.8.1.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
</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 中無法事呈現正確的設計畫面, 請不用介意 17-3-3 瀏覽程式的建立 瀏覽程式是用來瀏覽學生基本資料, 以 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 ControlStyle 的 Width HeaderText PhotoUrl Photos/{0} 30px 30px 照片 編輯欄位控制項之繫結與事件程式但 List.aspx 程式的 GridView 控制項, 在編輯模式時, 血型 身高 體重與縣市四個欄位將改為 DropDownList 選取, 同時性別的 True 與 False 資料也需轉換為男或女, 以提供較為人性化輸入, 但這就必須客製化設定欄位控制項之繫結與事件程式 17-16
圖 17-17 欄位控制項之繫結與事件程式設定設定血型欄位之 Bind 資料繫結屬性點選 GridView 控制項智慧標籤的 編輯樣板 選取 Column[5]- 血型的 EditItemTemplate 移除 TextBox 控制項 加入 DropDownList 控制項, 並命名為 dwnblood 點選其智慧標籤的 編輯項目 加入 A B AB O RH 五個項目, 同時設定每個項目的 Text 及 Value 屬性 點選智慧標籤的 DataBindings 資料繫結 勾選左下方之 顯示所有屬性 設定 ToolTip 屬性自訂繫結為 Bind("Blood"), 如此 DropDownList 選取變更時就會自動繫結回寫到資料庫 圖 17-18 設定血型 DropDownList 之 Bind 資料繫結 17-17
血型 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 07 08 '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 14 15 '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
設定一般事件程式 最後加入幾個一般事件程式, 事件功用則註解在程式中 : 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 06 07 ' 如果沒有編輯或刪除權限, 則將對應的 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 - 1 14 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 29 30 ' 將 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
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 50 51 ' 編輯模式時, 設定欄位的寬度 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 = 55 54 gvstudents.columns(4).controlstyle.width = 65 55 gvstudents.columns(6).controlstyle.width = 50 56 gvstudents.columns(7).controlstyle.width = 50 57 gvstudents.columns(10).controlstyle.width = 50 58 End Sub 59 60 ' 替身高的 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 185 65 dwnheight.items.add(i) 66 Next 67 End Sub 68 69 ' 替體重的 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 90 74 dwnweight.items.add(i) 75 Next 76 End Sub 17-20
設定編輯模式下生日 TextBox 使用 jquery UI 的日曆控制項以下透過 jquery UI 將編輯模式下的生日 TextBox 改造為日曆控制項 : <asp:content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> <link href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />... <script type="text/javascript"> $(function () { $("input[id$=txtbirthday]").datepicker({ dateformat: 'yy/mm/dd' }); 略 </script> </asp:content> 17-3-4 新增資料程式的建立 新增程式是用來新增學生資料到 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 各欄位對應之替代控制項 17-22 建立資料新增及輸入驗證之程式 最後建立資料新增及輸入驗證之程式 : 01 Dim InputMsg As String = "" ' 欄位輸入驗證之訊息 02 03 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= 必須同時具備讀取與新增權限 ")
08 End If 09 10 ' 產生控制項資料 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 185 15 dwnheight.items.add(i) 16 Next 17 dwnweight.items.add("= 請選擇 =") 18 For i = 50 To 90 19 dwnweight.items.add(i) 20 Next 21 22 Dim rdo = CType(dvStudent.FindControl("rdoGender"), RadioButtonList) 23 End Sub 24 25 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 32 33 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 40 41 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
17-24 47 ' 新增資料前, 進行輸入資料之檢查 48 If CheckInput() = False Then 49 txtmsg.text = "<ul>" & InputMsg & "</ul>" 50 e.cancel = True 51 End If 52 End If 53 End Sub 54 55 Protected Function CheckInput() As Boolean 56 'Input 輸入合法性檢查, 預設為 True 57 Dim status As Boolean = True 58 59 ' 檢查 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 69 70 ' 檢查性別是否有選擇 71 Dim rdogender = CType(dvStudent.FindControl("rdoGender"), RadioButtonList) 72 If rdogender.selectedindex = -1 Then 73 status = False 74 InputMsg &= "<li>* 請輸入性別 </li>" 75 End If 76 77 ' 檢查血型是否有選擇 78 Dim rdoblood = CType(dvStudent.FindControl("rdoBlood"), RadioButtonList) 79 If rdoblood.selectedindex = -1 Then 80 status = False 81 InputMsg &= "<li>* 請選擇血型 </li>" 82 End If 83 84 ' 身高 85 If CType(dvStudent.FindControl("dwnHeight"), DropDownList).SelectedIndex = 0 Then 86 status = False 87 InputMsg &= "<li>* 請輸入身高 </li>" 88 End If
89 90 ' 體重 91 If CType(dvStudent.FindControl("dwnWeight"), DropDownList).SelectedIndex = 0 Then 92 status = False 93 InputMsg &= "<li>* 請輸入體重 </li>" 94 End If 95 96 ' 縣市 97 If CType(dvStudent.FindControl("dwnCity"), DropDownList).SelectedIndex = 0 Then 98 status = False 99 InputMsg &= "<li>* 請輸入縣市 </li>" 100 End If 101 102 103 ' 檢查地址不得為空白 104 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtAddress"), TextBox).Text.Trim()) Then 105 status = False 106 InputMsg &= "<li>* 請輸入地址 </li>" 107 End If 108 109 ' 檢查電話不得為空白 110 If String.IsNullOrEmpty(CType(dvStudent.FindControl("txtAddress"), TextBox).Text.Trim()) Then 111 status = False 112 InputMsg &= "<li>* 請輸入電話 </li>" 113 End If 114 115 Return status 116 End Function 117 118 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 122 123 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 127 17-25
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 132 133 ' 性別選取時, 設定選取值到 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 138 139 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 17-3-5 照片上傳程式的建立 照片上傳程式是用來上傳學生照片到網站, 在此是透過 FileUpload 控制項提供上傳功能, 並限制上傳 jpg gif png 三種格式照片 請參考 PhotoUpload.aspx 程式, 建立步驟如下 : 建立 FileUpload 檔案上傳控制項從工具箱拖曳建立十個 FileUpload 控制項, 以便可以一次上傳十個檔案 17-26