ASP.NET項(xiàng)目開發(fā)教程課件項(xiàng)目四 用戶注冊

項(xiàng)目四網(wǎng)站建設(shè)——用戶注冊

項(xiàng)目目標(biāo)

完成網(wǎng)上購物系統(tǒng)中用戶注冊的界面設(shè)計，為后續(xù)將用戶注冊信息放入數(shù)據(jù)庫做準(zhǔn)備

掌握常用Web服務(wù)器控件的使用；理解客戶端和服務(wù)器端驗(yàn)證；掌握驗(yàn)證控件的使用。

任務(wù)分解任務(wù)1創(chuàng)建用戶注冊頁面任務(wù)2用戶頭像上傳任務(wù)3注冊信息輸入驗(yàn)證任務(wù)1創(chuàng)建用戶注冊頁面[任務(wù)描述]當(dāng)用戶在輸入不滿足要求的注冊信息時，要給出錯誤信息提示，幫助用戶正確完成用戶信息錄入，同時在客戶端進(jìn)行驗(yàn)證后再發(fā)回服務(wù)器端，提高服務(wù)器資源利用率。任務(wù)1創(chuàng)建用戶注冊頁面任務(wù)1創(chuàng)建用戶注冊頁面[任務(wù)分析]1．客戶端驗(yàn)證與服務(wù)器端驗(yàn)證的區(qū)別2．驗(yàn)證控件的使用3．表格中各個控件的應(yīng)用預(yù)備知識Web服務(wù)器控件公共屬性：屬性名說明屬性名說明AccessKey鍵盤快捷鍵FontColor字體顏色Attributes屬性集合TabIndexTab鍵順序BackColor背景色Visible是否可見BoderWidth邊框?qū)挾菼D控件名稱，唯一標(biāo)志BoderStyle邊框樣式Text顯示文本CssClassCss類名ToolTimep鼠標(biāo)懸停時顯示的工具提示Enabled是否啟用Width寬度EnableTheming是否有主題High高度Font字體屬性ValidationGroup驗(yàn)證分組1.文本類型控件Lable（標(biāo)簽）例4.1使用鍵盤快捷鍵快速聚焦文本框TextBox（文本框）

屬性、方法或事件說明AutoPostBack屬性是否自動回發(fā)：當(dāng)其值為True時，只要用戶聚焦了文本框或按了Enter或Tab鍵，就會自動觸發(fā)TextChang事件TextMode屬性設(shè)置文本框的值顯示類型：SingleLine單行，MultiLine多行，Password密碼顯示為*ReadOnly屬性是否為只讀，如果只讀就不能修改文本框內(nèi)容Columns屬性文本顯示的寬度以字符為單位Row屬性文本顯示的行數(shù)MaxLength屬性可輸入的最大字符數(shù)Focus（）方法設(shè)置文本焦點(diǎn)TextChanged事件當(dāng)文本發(fā)生改變時相應(yīng)的事件2.按鈕類型控件按鈕控件有Button、LinkButton、ImageButton,共有屬性或事件及說明如下例4.2單擊Button按鈕，彈出一個對話框

屬性或事件說明PostBackUrl屬性單擊按鈕時跳轉(zhuǎn)到的URL地址CausesValidation屬性是否執(zhí)行驗(yàn)證OnClick事件觸發(fā)服務(wù)器端代碼OnClientClick事件觸發(fā)客戶端代碼屬性說明AlternateText在圖片無法顯示時替換的文字ImageUrl控件上顯示的圖片路徑3.選擇類型控件ListBox（列表框）例4.3實(shí)現(xiàn)對ListBox控件中列表項(xiàng)進(jìn)行操作

屬性或事件說明Items屬性列表控件項(xiàng)集合SelectMode屬性選擇模式：單選或多選SelectIndex屬性選中項(xiàng)的最小序號索引SelectItem屬性選中項(xiàng)SelectValue屬性選中項(xiàng)的值Rows屬性控件顯示的行數(shù)DataSource屬性綁定的數(shù)據(jù)源SelectedIndexChanged事件選項(xiàng)放生改變時觸發(fā)的事件ListBox（列表框）、DropDownList（下拉列表框）、RadioButton（單選按鈕）和RadioButtonList（單選按鈕列表框）CheckBox（復(fù)選框）和CheckBoxList（復(fù)選列表框）例4.3實(shí)現(xiàn)對ListBox控件中列表項(xiàng)進(jìn)行操作

屬性或事件說明Items屬性列表控件項(xiàng)集合SelectMode屬性選擇模式：單選或多選SelectIndex屬性選中項(xiàng)的最小序號索引SelectItem屬性選中項(xiàng)SelectValue屬性選中項(xiàng)的值Rows屬性控件顯示的行數(shù)DataSource屬性綁定的數(shù)據(jù)源SelectedIndexChanged事件選項(xiàng)放生改變時觸發(fā)的事件3.選擇類型控件(續(xù))4.容器控件PanelPlaceHolder任務(wù)實(shí)施步驟1新建網(wǎng)頁，添加注冊服務(wù)條款內(nèi)容步驟2添加注冊信息：用戶名、密碼、地址等文本框步驟3添加“性別”選項(xiàng)步驟4添加“學(xué)歷”下拉列表步驟5添加“關(guān)注產(chǎn)品”選項(xiàng)步驟6將注冊反饋信息集中顯示任務(wù)小結(jié)

本任務(wù)主要是介紹WEB服務(wù)器控件的使用。通過本任務(wù)的學(xué)習(xí)，使學(xué)生能熟悉并掌握各個控件的使用，理解頁面事件處理流程。任務(wù)2用戶頭像上傳[任務(wù)描述]設(shè)計一個如圖所示界面，界面中的信息包括用戶上傳圖像的Web控件，當(dāng)用戶單擊“瀏覽”按鈕時，可以選擇本地一張圖像上傳到當(dāng)前站點(diǎn)文件夾下。任務(wù)2用戶頭像上傳[任務(wù)分析]1．文件上傳控件的使用2．圖像格式判斷3．圖像重命名處理預(yù)備知識1.圖像類型控件Image（圖像）屬性說明AlternateText圖像無法顯示時的替換文字ImageAlign設(shè)置Image相對網(wǎng)頁其他元素的對齊方式ImageUrl顯示圖片的路徑1.圖像類型控件Image控件的ImageAlign屬性值及說明

例4.4通過DropDownList控件選擇不同圖像在Image空間中顯示

屬性值說明Left圖像相對網(wǎng)頁左對齊，文字在圖像右邊換行Right圖像相對網(wǎng)頁右對齊，文字在圖像左邊換行Baseline圖像下邊緣與第一行文字下邊緣對齊Top圖片上邊緣與同行最高元素上邊緣對齊Middle圖像中間與第一行文字下邊緣對齊Bottom圖像下邊緣與第一行文字下邊緣對齊AbsBottom圖像下邊緣與同行文字最大元素下邊緣對齊AbsMiddle圖像下邊緣與同行文字最大元素中間對齊AbsTop圖像下邊緣與同行文字最大元素上邊緣對齊1.圖象類型控件(續(xù))ImageMap（圖像）屬性、方法或事件說明AutoPostBack屬性是否自動回發(fā)：當(dāng)其值為True時，只要用戶聚焦了文本框或按了Enter或Tab鍵，就會自動觸發(fā)TextChang事件TextMode屬性設(shè)置文本框的值顯示類型：SingleLine單行，MultiLine多行，Password密碼顯示為*ReadOnly屬性是否為只讀，如果只讀就不能修改文本框內(nèi)容Columns屬性文本顯示的寬度以字符為單位Row屬性文本顯示的行數(shù)MaxLength屬性可輸入的最大字符數(shù)Focus（）方法設(shè)置文本焦點(diǎn)TextChanged事件當(dāng)文本發(fā)生改變時相應(yīng)的事件2.FileUpload（文件上傳）屬性或事件說明FileBytes獲取上傳文件的字節(jié)數(shù)組FileContent獲取指向上傳文件的Stream對象FileName獲取上傳文件在客戶端的文件名稱HasFile獲取一個布爾值，用于表示控件是否已經(jīng)包含一個文件PostedFile獲取一個上傳文件相關(guān)的HttpPostedFile對象，使用該對象可以獲取上傳文件的相關(guān)屬性FileUpload控件常用屬性及說明3.字符串的使用屬性或方法說明Length屬性字符串長度SubString(start,length)從字符串中返回第start個字符開始的length長度的字符串。若length缺省，則一直取到字符串末尾。Replace(string1,string2)把字符串中string1替換為string2Split(分隔符)把字符串根據(jù)分隔符拆分成一個數(shù)組，如果省略，則使用空格作為分隔符ToLower()將字符串轉(zhuǎn)換為小寫字母ToUpper()將字符串轉(zhuǎn)換為大寫字母Trim(har數(shù)組)將字符串中出現(xiàn)的Char數(shù)組中的字符全部刪除，若省略，則將字符串前后的空格、制表符、換行符都刪除TrimEnd()與Trim相似，但只刪除字符串末尾的TrimStart()與Trim相似，但只刪除字符串開始的StartsWith(string)若字符串是以string開頭返回True，否則返回FalseEndsWith(string)若字符串是以string結(jié)尾返回True，否則返回FalseIndexOf(string)返回string在字符串中第一次出現(xiàn)的位置LastIndexOf返回string在字符串中最后一次出現(xiàn)的位置IndexOfAny返回數(shù)組中的任意字符在指定字符串中第一次出現(xiàn)的位置LastIndexOfAny返回數(shù)組中的任意字符在指定字符串中最后一次出現(xiàn)的位置4.日期和事件的使用日期和時間的使用主要是類System.DateTimeDateTime類靜態(tài)屬性或方法及說明屬性或方法說明Now屬性獲取系統(tǒng)當(dāng)前日期和時間Today屬性獲取系統(tǒng)當(dāng)前日期Compare（DateTime1，DateTime2）方法比較DateTime1和DateTime2，若兩個時間相同則返回0，若DateTime1大則返回-1，否則返回14.日期和事件的使用(續(xù))DateTime類實(shí)例屬性及說明屬性或方法說明Date獲取此實(shí)例的日期部分。Day獲取此實(shí)例所表示的日期為該月中的第幾天。DayOfWeek獲取此實(shí)例所表示的日期是星期幾。DayOfYear獲取此實(shí)例所表示的日期是該年中的第幾天。Hour獲取此實(shí)例所表示日期的小時部分。Millisecond獲取此實(shí)例所表示日期的毫秒部分。Minute獲取此實(shí)例所表示日期的分鐘部分。Month獲取此實(shí)例所表示日期的月份部分。Second獲取此實(shí)例所表示日期的秒部分。TimeOfDay獲取此實(shí)例的當(dāng)天的時間。Year獲取此實(shí)例所表示日期的年份部分。

DateTime類實(shí)例屬性及說明4.日期和事件的使用(續(xù))DateTime類實(shí)例屬性及說明

DateTime類實(shí)例屬性及說明(續(xù))屬性或方法說明Add(TimeSpan)將指定的TimeSpan的值加到此實(shí)例的值上。AddDays(int)將指定的天數(shù)加到此實(shí)例的值上。AddHours(int)將指定的小時數(shù)加到此實(shí)例的值上。AddMilliseconds(int)將指定的毫秒數(shù)加到此實(shí)例的值上。AddMinutes(int)將指定的分鐘數(shù)加到此實(shí)例的值上。AddMonths(int)將指定的月份數(shù)加到此實(shí)例的值上。AddSeconds(int)將指定的秒數(shù)加到此實(shí)例的值上。AddYears(int)將指定的年份數(shù)加到此實(shí)例的值上。DaysInMonth()返回指定年份中指定月份的天數(shù)。IsLeapYear()返回指定的年份是否為閏年的指示。Parse()將日期和時間的指定字符串表示轉(zhuǎn)換成其等效的DateTime實(shí)例。Subtract()從此實(shí)例中減去指定的時間或持續(xù)時間。ToLongDateString()將此實(shí)例的值轉(zhuǎn)換為其等效的長日期字符串表示形式。ToLongTimeString()將此實(shí)例的值轉(zhuǎn)換為其等效的長時間字符串表示形式。ToShortTimeString()將此實(shí)例的值轉(zhuǎn)換為其等效的短時間字符串表示形式。ToShortDateString()將此實(shí)例的值轉(zhuǎn)換為其等效的短日期字符串表示形式。4.日期和事件的使用(續(xù))DateTime類實(shí)例屬性及說明DateTime的ToString（）格式化參數(shù)及說明參數(shù)說明DYYYY年MM月DD日FYYYY年MM月DD日時：分：秒GYYYY-MM-DD時：分：秒T時：分：秒YYYYY年MM月dd日期中的天，前面帶“0”M或MM日期中的月，MM表示前面帶“0”ddd星期幾yy日期中年的后兩位yyyy日期中的年hh12進(jìn)制的小時，前面帶“0”h24進(jìn)制的小時m或mm分，mm表示前面帶“0”s或ss秒，ss表示前面帶“0”任務(wù)實(shí)施步驟1準(zhǔn)備工作步驟2在Regist.aspx網(wǎng)頁中添加FileUpload控件步驟3添加頭像上傳相關(guān)代碼

任務(wù)小結(jié)

本任務(wù)主要是介紹圖像、文件上傳WEB服務(wù)器控件的使用。通過本任務(wù)的學(xué)習(xí)，使學(xué)生能熟悉并掌握圖像控件和文件上傳服務(wù)器控件的使用，掌握字符串的操作。任務(wù)3注冊信息輸入驗(yàn)證[任務(wù)描述]當(dāng)用戶在輸入不滿足要求的注冊信息時，要給出錯誤信息提示，幫助用戶正確完成用戶信息錄入，同時在客戶端進(jìn)行驗(yàn)證后再發(fā)回服務(wù)器端，提高服務(wù)器資源利用率。任務(wù)1創(chuàng)建用戶注冊頁面用戶注冊信息驗(yàn)證任務(wù)1創(chuàng)建用戶注冊頁面[任務(wù)分析]1．客戶端驗(yàn)證與服務(wù)器端驗(yàn)證的區(qū)別2．驗(yàn)證控件的使用預(yù)備知識驗(yàn)證概述驗(yàn)證分為服務(wù)器端和客戶端兩種驗(yàn)證服務(wù)器端驗(yàn)證是指將用戶輸入的信息全部發(fā)送到WEB服務(wù)器端進(jìn)行驗(yàn)證；客戶端驗(yàn)證是指利用JavaScript腳本，在數(shù)據(jù)發(fā)送到服務(wù)器之前進(jìn)行驗(yàn)證。區(qū)別:客戶端驗(yàn)證能快速響應(yīng)用戶要求，但所使用使用的腳本會直接暴露給客戶，從安全性來說不高。服務(wù)器端驗(yàn)證相對安全，但所有數(shù)據(jù)必須發(fā)送到服務(wù)器才能驗(yàn)證，所以響應(yīng)速度相對較慢，而且如果用戶數(shù)巨大對服務(wù)器要求也比較高。1.驗(yàn)證概述(續(xù))ASP.NET3.5為我們引入了驗(yàn)證控件，共有六種驗(yàn)證控件

ASP.NET驗(yàn)證控件驗(yàn)證控件功能描述RequiredFieldValidator（必須字段驗(yàn)證）用于檢查是否有輸入值CompareValidator（比較驗(yàn)證）按設(shè)定比較兩個輸入RangeValidator（范圍驗(yàn)證）輸入是否在指定范圍RegularExpressionValidator（正則表達(dá)式驗(yàn)證）正則表達(dá)式驗(yàn)證控件CustomValidator（自定義驗(yàn)證）自定義驗(yàn)證控件ValidationSummary（驗(yàn)證總結(jié)）總結(jié)驗(yàn)證結(jié)果1.驗(yàn)證概述(續(xù))所有驗(yàn)證控件的對象模型基本一致，并且他們具有一些共同屬性

驗(yàn)證控件公有常用屬性及說明屬性說明Display錯誤提示信息顯示樣式：Static表示即使沒有錯誤信息文本，該驗(yàn)證控件也要占用空間；Dynamic表示除非顯示錯誤信息，否則驗(yàn)證控件將不占用空間；None表示驗(yàn)證控件錯誤信息不在頁面上出現(xiàn)僅在ValidationSummary中顯示ControlToValidate需要進(jìn)行驗(yàn)證的ID，該屬性必須設(shè)置否則會引發(fā)異常ErrorMessage設(shè)置驗(yàn)證失敗時ValidationSummary控件中顯示的文本，當(dāng)Text沒有值時，會代替TextText設(shè)置驗(yàn)證失敗時驗(yàn)證控件中顯示的文本IsValid獲取或設(shè)置一個值，該值指示關(guān)聯(lián)的輸入控件是否通過驗(yàn)證EnableClientScript獲取或設(shè)置一個值，該值指示是否啟用客戶端驗(yàn)證SetFocusOnError獲取或設(shè)置一個值，該值指示在驗(yàn)證失敗時是否將焦點(diǎn)設(shè)置到ControlToValidate屬性指定的控件上ValidationGrope獲取或設(shè)置此驗(yàn)證控件所屬的驗(yàn)證組的名稱2.RequiredFieldValidator（非空）例4.6在頁面中驗(yàn)證用戶名必須輸入。3.CompareValidator（比較） CompareValidator控件比較輸入控件的值與常數(shù)或其他輸入控件的值進(jìn)行比較，確定這兩個值之間的比較運(yùn)算符（小于、大于、等于等）的匹配關(guān)系CompareValidator重要屬性及說明屬性說明ControlToCompare指定與被驗(yàn)證控件比較的控件IDOperator設(shè)置比較規(guī)則操作符。Equal等于、NotEqual不等于、GreaterThan大于、GreaterThanEqual大于等于、LessThan小于、LessThanEqual小于等于、DataTypeCheek數(shù)據(jù)型檢查ValueToCompare指定與被嚴(yán)重控件比較的值Type指定比較值的數(shù)據(jù)類型。String字符、Integer整形、Double雙精度、Date日期、Currency貨幣4.RangeValidation（范圍）RangeValidation控件用來驗(yàn)證輸入值是否在指定的范圍內(nèi)。該驗(yàn)證控件除了前面提到的常用屬性外還有2個重要屬性。MaximumValue和MinimumValue用于指定最大值和最小值。例4.8輸入百分制成績和出生日期，出生日期要求2000-01-01至2010-12-31之間出生的。5.RegularExpressionValidator（正則表達(dá)式）RegularExpressionValidator控件用于驗(yàn)證用戶輸入是否與正則表達(dá)式預(yù)定義的模式相匹配，常用來驗(yàn)證電話、郵編、Email等例4.9輸入郵箱地址驗(yàn)證是否輸入正確。

6.CustomValidator（自