NET網(wǎng)站開發(fā)項(xiàng)目化教程PPT任務(wù)2-3 設(shè)計(jì)“新知書店”求職簡(jiǎn)歷頁面

預(yù)習(xí)檢查常用的第三方控件有哪些？使用驗(yàn)證碼控件Webvalidates的步驟學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】掌握Panel容器控件、FileUpload、Image圖像控件的使用第三方控件的使用【技能目標(biāo)】會(huì)使用多種控件組合設(shè)計(jì)功能復(fù)雜的Web頁面；

Image控件屬性名稱說明ImageUrl顯示圖像的UrlAlternateText圖像不顯示時(shí)的替代文字ImageAlign圖像相對(duì)于頁面其他元素的對(duì)齊作用：顯示圖片知識(shí)準(zhǔn)備—

Image圖像控件Panel控件是一個(gè)放置其它控件的容器，可以在其內(nèi)放置不同控件。利用它的這個(gè)特性，可以將不同的控件組成一個(gè)群組，并控制它的顯示或隱藏。聲明Panel控件的語法格式：

<asp:PanelID="控件名"runat="server"></asp:Panel>Panel控件的主要屬性：BackImageUrl屬性：設(shè)置Panel背景圖形。HorizontalAlign屬性：設(shè)置水平對(duì)齊方式。Visible屬性：是否顯示還是隱藏。ScrollBars屬性：是否設(shè)置水平或垂直滾動(dòng)條。例如，將該屬性設(shè)置為Auto時(shí)，當(dāng)控件長(zhǎng)度和寬度超過Panel控件的長(zhǎng)或?qū)挄r(shí)，將自動(dòng)顯示出滾動(dòng)條。知識(shí)準(zhǔn)備—Panel控作用：在文件上傳過程中，文件數(shù)據(jù)是作為頁面請(qǐng)求的一部分，上傳并緩存到服務(wù)器內(nèi)存中，然后再寫入服務(wù)器硬盤空間的。屬性說明FileName上傳文件的文件名(只有文件名，不含路徑部分)PostedFile.FileName從客戶端上傳文件的全路徑HasFile是否選擇了上傳文件方法說明SaveAs()保存上傳文件(要求是完整路徑)知識(shí)準(zhǔn)備—FileUpLoad控件

(1)頁面設(shè)計(jì)：在頁面上添加1個(gè)FileUpLoad控件和1個(gè)Button控件，將Button的Text屬性設(shè)置為”上傳”

(2)編寫代碼實(shí)現(xiàn)文件的上傳protectedvoidButton1_Click(objectsender,EventArgse){

if(FileUpload1.HasFile)FileUpload1.SaveAs(Server.MapPath(".")+"\\"+FileUpload1.FileName);}當(dāng)前目錄的完整路徑(3)運(yùn)行在本機(jī)上選擇一個(gè)文件，實(shí)現(xiàn)上傳操作；在站點(diǎn)名上右鍵單擊，在彈出的快捷菜單中選擇“刷新文件夾”，觀察結(jié)果。知識(shí)準(zhǔn)備—FileUpLoad控件(續(xù))

演示示例：實(shí)現(xiàn)一個(gè)文件的上傳操作知識(shí)準(zhǔn)備—第三方控件微軟提供的控件不夠豐富偶爾效果不理想（比如日歷）第三方控件豐富實(shí)用大部分可以免費(fèi)下載有使用說明百度注冊(cè)的頁面為什么需要驗(yàn)證碼？防止不法分子通過窮舉方式破解密碼防止競(jìng)爭(zhēng)對(duì)手通過大量注冊(cè)，破壞網(wǎng)站的穩(wěn)定驗(yàn)證碼知識(shí)準(zhǔn)備—第三方控件(續(xù))WebValidates的使用方式1、添加控件到工具箱2、將控件拖放到頁面3、編寫驗(yàn)證代碼演示示例：WebValidates知識(shí)準(zhǔn)備—驗(yàn)證碼控件驗(yàn)證代碼：protectedvoidPage_Load(objectsender,EventArgse){if(!IsPostBack){

snCode.Create();

}}protectedboolCheckCode()

{if(snCode.CheckSN(txtCode.Text.Trim()))

{……}else{snCode.Create();}}生成驗(yàn)證碼，注意只在首次加載時(shí)使用比較驗(yàn)證碼是否正確，返回布爾型結(jié)果驗(yàn)證失敗，重新生成知識(shí)準(zhǔn)備—驗(yàn)證碼控件(續(xù))知識(shí)準(zhǔn)備—富文本控件

常用富文本控件常用控件說明RichTextBox最早的富文本控件，富文本控件因它而得名

FCKeditor國(guó)外一個(gè)開源項(xiàng)目，已經(jīng)命名為CKedtorCuteEditor功能最為完善，但它自身也是相當(dāng)龐大eWebEditor國(guó)產(chǎn)軟件，有中國(guó)特色FreeTextBox簡(jiǎn)單方便，在國(guó)內(nèi)使用相當(dāng)普遍1.下載CKeditor最新的CKeditor可以從CKeditor官網(wǎng)“”上下載，這里我們使用最新發(fā)布的CKeditor3.6.4。下載ckeditor_aspnet_3.6.4.zip壓縮包并解壓后，如圖3-21所示，打開_Samples文件夾，有一個(gè)包括CKeditor所使用的全部圖片、JavaScript腳本等文件的CKeditor資源文件，在bin目錄下的Debug文件夾下有一個(gè)CKEditor.NET.dll文件，提供可以運(yùn)行在.NET環(huán)境下的程序集。知識(shí)準(zhǔn)備—CKeditor2.配置CKeditor1)將Debug文件夾下的CKEditor.NET.dll文件添加到VisualStudio的工具箱中，效果如圖3-22所示。2)將CKeditor文件夾拷貝至網(wǎng)站根目錄。知識(shí)準(zhǔn)備—CKeditor(續(xù))

3.使用CKeditor將CKeditor拖入頁面設(shè)計(jì)視圖中，會(huì)自動(dòng)生成如下所示代碼。<%@RegisterAssembly="CKEditor.NET"Namespace="CKEditor.NET"TagPrefix="CKEditor"%><CKEditor:CKEditorControlID="cec"runat="server"Width="832px"></CKEditor:CKEditorControl>@Register指令：在ASP.NET應(yīng)用程序文件中注冊(cè)該控件，該指令有如下幾個(gè)屬性。其中Assembly表示使用的程序集，Namespace表示使用的命名空間，TagPrefix表示標(biāo)簽的前綴，如“<asp:TextBox>”中的“asp”就是前綴。@Register指令下的CKeditor的定義要以CKeditor作為標(biāo)簽的前綴。運(yùn)行頁面CkeditorDemo.aspx，效果如圖。知識(shí)準(zhǔn)備—CKeditor(續(xù))

CKeditor不同于TextBox，在CKeditor獲取輸入內(nèi)容需要使用Text屬性。如果在圖3-23中插入表情，進(jìn)行樣式設(shè)置等，使用Text屬性獲取到的CKeditor控件中的值，觀察后內(nèi)容如下所示。知識(shí)準(zhǔn)備—CKeditor(續(xù))

<h1><spanstyle="font-family:timesnewroman,times,serif"><spanstyle="font-size:16px"><u><em><strong>G:\ASP.Net網(wǎng)站開發(fā)項(xiàng)目化教程</strong></em></u>\chapter03</span></span></h1><p><spanstyle="font-family:timesnewroman,times,serif"><spanstyle="font-size:16px"><imgalt="smiley"height="20"src="http://localhost:8589/CkeditorDemo/ckeditor/plugins/smiley/images/regular_smile.gif"title="smiley"width="20"/></span></span></p>其實(shí)CKeditor存儲(chǔ)的是一段HTML文本，可以把這段文本直接存入數(shù)據(jù)庫或從數(shù)據(jù)庫讀取后顯示在頁面上，由瀏覽器本身解析這些圖片、表格、字體等。由ASP.NET安全機(jī)制引起的常見錯(cuò)誤修改錯(cuò)誤的方法在Page指令上添加：ValidateRequest="false"演示示例：富文本框控件知識(shí)準(zhǔn)備—CKeditor(續(xù))

知識(shí)準(zhǔn)備—日期輸入控件Calendar控件

屬性說明SelectedDate設(shè)置或獲取選擇的日期VisibleDate當(dāng)前可見的日期（默認(rèn)顯示的月份）TitleFormat標(biāo)題格式（“某月”或“某年某月”）事件說明SelectionChanged

選擇某日期后的事件JS版日歷使用方法<asp:TextBoxID="txtDate"runat="server"CssClass="Wdate"onFocus="WdatePicker()"></asp:TextBox><scriptlanguage="javascript"type="text/javascript"src="../My97DatePicker/WdatePicker.js"></script>

添加在頁面<title></title>標(biāo)簽中

onFocus事件中添加WdatePicker()方法知識(shí)準(zhǔn)備—日期輸入控件(續(xù))在“新知圖書”網(wǎng)站系統(tǒng)的招聘頁中，有求職意向的人員在注冊(cè)后可填寫本人簡(jiǎn)歷，包括個(gè)人基本信息、求職期望、聯(lián)系方式、個(gè)人照片等。簡(jiǎn)歷頁面效果如圖2-32和圖2-33所示。任務(wù)描述1)創(chuàng)建網(wǎng)站項(xiàng)目rw2-3，在網(wǎng)站根目錄新建Photos文件夾，復(fù)制JS日歷文件夾My97DatePicker到網(wǎng)站根目錄，右擊網(wǎng)站項(xiàng)目，創(chuàng)建頁面Resume.aspx，在其中插入一DIV層，命名為Container，并設(shè)置其內(nèi)容居中顯示，輸入文字“新知圖書招聘簡(jiǎn)歷登記表”。2)從工具箱中拖動(dòng)兩個(gè)Panel控件添加到Container層中，主要屬性設(shè)置如表2-7所示。在面板pnl_add中插入HTML表格控件，對(duì)表格進(jìn)行編輯，輸入相應(yīng)文本后復(fù)制表格到面板pnl_display中。3)向pnl_add中的表格拖入相應(yīng)Web控件，各控件