NET網(wǎng)站開發(fā)項(xiàng)目化教程PPT任務(wù)2-1 設(shè)計(jì)“新知書店”用戶注冊頁面

預(yù)習(xí)檢查標(biāo)準(zhǔn)服務(wù)器控件有哪幾種類型？學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】會(huì)使用HTML服務(wù)器控件創(chuàng)建Web頁面；會(huì)使用Web標(biāo)準(zhǔn)服務(wù)器控件創(chuàng)建Web頁面；掌握常用Web標(biāo)準(zhǔn)服務(wù)器控件的功能、屬性和事件【技能目標(biāo)】會(huì)使用簡單控件完成簡單頁面表單設(shè)計(jì)Web控件分類：HTML控件

<inputid="Text1"type="text"/>HTML服務(wù)器控件

<inputid="Text1"type="text"runat="server"/>Web服務(wù)器控件

<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>用戶控件和自定義控件知識(shí)準(zhǔn)備—Web控件HTML控件和Web服務(wù)器控件的區(qū)別HTML控件運(yùn)行在客戶端沒有回傳，不能用ViewState維持狀態(tài)Web服務(wù)器控件運(yùn)行在服務(wù)器端能回傳，能用ViewState維持狀態(tài)瀏覽器完成事件處理服務(wù)器完成事件處理事件驅(qū)動(dòng)編程模型統(tǒng)一的編程接口，eg.Text屬性跨瀏覽器兼容性知識(shí)準(zhǔn)備—Web控件(續(xù))Web控件的關(guān)系圖：System.Web.UI.ControlSystem.ObjectHtmlControlWebControlDataSourceControlCompositeControlButtonLabelCheckBox……BaseDataListBaseDataBoundControl知識(shí)準(zhǔn)備—Web控件(續(xù))知識(shí)準(zhǔn)備—web服務(wù)器控件(續(xù))1.Label控件

屬性說明Text在頁面上顯示信息作用：在頁面上顯示文本。可以顯示靜態(tài)的信息，也可以在運(yùn)行時(shí)通過代碼動(dòng)態(tài)的修改文本信息。(1)頁面設(shè)計(jì)：在頁面上添加一個(gè)標(biāo)簽LblDate(2)編寫代碼：（3）瀏覽運(yùn)行頁面（4）學(xué)生練習(xí)：顯示短時(shí)間型和日期時(shí)間型protectedvoidPage_Load(objectsender,EventArgse){LblDate.Text=System.DateTime.Now.ToShortDateString();}獲取系統(tǒng)時(shí)間知識(shí)準(zhǔn)備—文本類型控件演示示例：在頁面上顯示當(dāng)前的日期知識(shí)準(zhǔn)備—文本類型控件(續(xù))2.TextBox控件

屬性名稱說明Text獲取或設(shè)置TextBox控件中的數(shù)據(jù)TextModeSingleLine單行，生成普通的文本框MultiLine多行，生成<textarea>標(biāo)簽Password密碼，生成密碼輸入框，文本為●ReadOnly只讀MaxLength設(shè)置文本輸入框中最多允許的字符數(shù)AutoPostBack設(shè)置為True時(shí)，當(dāng)用戶更改內(nèi)容后離開控件時(shí)，導(dǎo)致控件觸發(fā)TextChanged事件AutoPostBack默認(rèn)情況下設(shè)置為False.作用：建立單行文本輸入框、密碼輸入、多行文本輸入，通過TextMode屬性來區(qū)別三種輸入模式。protectedvoidTextBox1_TextChanged(objectsender,EventArgse){Response.Write(TextBox1.Text);}(3)運(yùn)行：在文本框中任意輸入文本信息回車后，觀察結(jié)果。(4)運(yùn)行時(shí)在文本框中輸入信息后，將鼠標(biāo)離開TextBox1,觀察結(jié)果。(5)將TextBox1的AutoPostBack設(shè)置為true,觀察結(jié)果(AutoPostBack=true時(shí)，焦點(diǎn)離開該文本框控件時(shí)自動(dòng)提交)(1)頁面設(shè)計(jì)：在頁面上添加一個(gè)TextBox1(2)利用文本框的TextChanged事件,雙擊TextBox1控件，編寫CS代碼知識(shí)準(zhǔn)備—文本類型控件(續(xù))演示示例：將文本框TextBox1中輸入信息，顯示在頁面上1.Button控件作用：接收用戶的click事件，并執(zhí)行相應(yīng)的事件程序。2.LinkButton控件作用：同Button控件，只是外觀上類似超級鏈接。3.ImageButton控件作用：基本功能同Button控件，只是在按鈕上不僅可以顯示一副圖片，還可以獲取圖片的點(diǎn)擊位置。.NET中默認(rèn)單擊按鈕后信息是被提交到本頁面進(jìn)行處理的，通過PostBackUrl可以改變表單提交的目標(biāo)頁.知識(shí)準(zhǔn)備—按鈕類型控件演示示例(示例2-3)：演示Button，ImageButton控件的Click單擊事件RadioButton控件用于創(chuàng)建單個(gè)單選框，供用戶選擇。聲明RadioButton控件的語法格式：<asp:RadioButtonID="控件名"runat="server"text="控件的文字"value=""/>RadioButton控件的常用屬性和事件與CheckBox控件基本相同。RadioButton控件還有一個(gè)特殊的屬性GroupName，用于設(shè)置單選按鈕所屬的組名，通過將多個(gè)單選按鈕的組名設(shè)為相同值，將其分為一組相互排斥的選項(xiàng)。知識(shí)準(zhǔn)備—選擇類型控件1.RadioButton和RadioButtonList控件與CheckBoxList控件類似，RadioButtonList控件是一個(gè)RadioButton控件組，當(dāng)存在多個(gè)單選框時(shí)，用該控件比RadioButton簡單。聲明RadioButtonList控件的語法格式：<asp:RadioButtonListID="控件名"runat="server"> <asp:ListItemValue="">Text</asp:ListItem> ……</asp:RadioButtonList>RadioButtonList控件和CheckBoxList控件的屬性和事件相同。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))演示示例：RadioButton和RadioButtonList控件實(shí)現(xiàn)性別選取CheckBox控件用于創(chuàng)建單個(gè)復(fù)選框，供用戶選擇。聲明CheckBox控件的語法格式：<asp:CheckBoxID="控件名"runat="server"Text="控件的文字"value=""/>CheckBox控件的常用屬性：Checked屬性：獲取或設(shè)置該項(xiàng)是否選中。TextAlign屬性：控件文字的位置。Text屬性：獲取或設(shè)置CheckBox控件的文本內(nèi)容。Value屬性：獲取或設(shè)置CheckBox控件的值內(nèi)容。AutoPostBack屬性：獲取或設(shè)置當(dāng)改變CheckBox控件的選擇狀態(tài)時(shí)，是否自動(dòng)回傳窗體數(shù)據(jù)到服務(wù)器。值為True時(shí)，表示單擊CheckBox控件，頁面自動(dòng)回發(fā)；值為False時(shí)，不回發(fā)。默認(rèn)值為False。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))2.CheckBox和CheckBoxList控件CheckBox控件具有CheckedChanged事件。當(dāng)Checked屬性的值改變時(shí)，會(huì)觸發(fā)此事件。與TextBox控件類似，該事件要與AutoPostBack屬性配合使用。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))聲明CheckBoxList控件的語法格式：<asp:CheckBoxListID="控件名"Runat="server"> <asp:ListItemvalue="">text</asp:ListItem> ……</asp:CheckedBoxList>該控件的屬性、用法及功能與ListBox控件基本相同。除此之外，還有自己的特殊屬性。RepeatDirection：表示是橫向還是縱向排列。RepeatColumns：一行排幾列。TextAlign屬性：控件文字的位置。Selected屬性：表示該選項(xiàng)是否選中。演示示例：CheckBox和CheckBoxList控件實(shí)現(xiàn)愛好選取知識(shí)準(zhǔn)備—選擇類型控件(續(xù))

DropDownList控件允許用戶從預(yù)定義的下拉列表中選擇一項(xiàng)。聲明DropDownList控件的語法格式為：<asp:DropDownListID="控件名"runat="server"> <asp:ListItemValue="">Text</asp:ListItem> …</asp:DropDownList>知識(shí)準(zhǔn)備—選擇類型控件(續(xù))3.DropDownList和ListBox控件DropDownList控件的主要屬性如下：AutoPostBack屬性：獲取或設(shè)置當(dāng)改變DropDownList控件的選擇狀態(tài)時(shí)，是否自動(dòng)上傳窗體數(shù)據(jù)到服務(wù)器。默認(rèn)為False。Items屬性：包含該控件所有選項(xiàng)的集合。每個(gè)列表項(xiàng)都是一個(gè)單獨(dú)的對象，具有自己的屬性。SelectedIndex屬性：獲取當(dāng)前選擇項(xiàng)的下標(biāo)（下標(biāo)從0開始）。SelectedItem屬性：獲取當(dāng)前選擇項(xiàng)對象。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))DropDownList控件有SelectedIndexChanged事件，當(dāng)用戶選擇一項(xiàng)時(shí)，DropDownList控件將引發(fā)SelectedIndexChanged事件。默認(rèn)情況下，此事件不會(huì)導(dǎo)致向服務(wù)器發(fā)送頁面，但當(dāng)該控件的AutoPostBack屬性設(shè)置為True時(shí)，該事件會(huì)立即回發(fā)頁面。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))

ListBox控件與DropDownList控件的功能基本相似，ListBox控件將所有選項(xiàng)都顯示出來，提供單選或多選的列表框。知識(shí)準(zhǔn)備—選擇類型控件(續(xù))演示示例：DropDownList和ListBox控件實(shí)現(xiàn)選課ListBox控件比DropDownList控件多兩個(gè)屬性：Rows屬性：獲取或設(shè)置ListBox控件顯示的選項(xiàng)行數(shù)，默認(rèn)值為4。SelectionMode屬性：獲取或設(shè)置ListBox控件的選項(xiàng)模式，Single為單選，Multiple為多選，默認(rèn)為Single。當(dāng)允許多選時(shí)，只需按住Ctrl鍵或Shift鍵并單擊要選取的選項(xiàng)，便可完成多選。使用控件設(shè)計(jì)如圖2-15所示的用戶注冊頁面?！耙呀?jīng)有帳號，馬上登錄”和“這里”是個(gè)鏈接，鏈接地址設(shè)為空。任務(wù)描述1)創(chuàng)建網(wǎng)站項(xiàng)目rw2-1，將教學(xué)資源包中對應(yīng)的的Css及image文件夾復(fù)制到網(wǎng)站根目錄，右擊網(wǎng)站項(xiàng)目，創(chuàng)建頁面Register.aspx。2)在頁面Register.aspx