NET網站開發(fā)項目化教程PPT任務2-3 設計“新知書店”求職簡歷頁面

預習檢查常用的第三方控件有哪些？使用驗證碼控件Webvalidates的步驟學習目標【知識目標】掌握Panel容器控件、FileUpload、Image圖像控件的使用第三方控件的使用【技能目標】會使用多種控件組合設計功能復雜的Web頁面；

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

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

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

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

(2)編寫代碼實現文件的上傳protectedvoidButton1_Click(objectsender,EventArgse){

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

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

snCode.Create();

}}protectedboolCheckCode()

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

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

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

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

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

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

<h1><spanstyle="font-family:timesnewroman,times,serif"><spanstyle="font-size:16px"><u><em><strong>G:\ASP.Net網站開發(fā)項目化教程</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>其實CKeditor存儲的是一段HTML文本，可以把這段文本直接存入數據庫或從數據庫讀取后顯示在頁面上，由瀏覽器本身解析這些圖片、表格、字體等。由ASP.NET安全機制引起的常見錯誤修改錯誤的方法在Page指令上添加：ValidateRequest="false"演示示例：富文本框控件知識準備—CKeditor(續(xù))

知識準備—日期輸入控件Calendar控件

屬性說明SelectedDate設置或獲取選擇的日期VisibleDate當前可見的日期（默認顯示的月份）TitleFormat標題格式（“某月”或“某年某月”）事件說明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>標簽中

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