第4章標準控件

第4章ASP.NET3.5標準控件1本章要點：理解ASP.NET3.5頁面事件處理流程了解HTML服務器控件熟悉ASP.NET3.5標準控件熟練掌握各個控件應用實例2目錄4.1ASP.NET3.5頁面事件處理4.1.1ASP.NET3.5事件4.1.2屬性IsPostBack4.2ASP.NET3.5服務器控件概述4.2.1HTML服務器控件簡介4.2.2Web服務器控件簡介3目錄4.3標準控件4.3.1Label控件4.3.2TextBox控件4.3.3Button、LinkButton和ImageButton控件4.3.4DropDownList控件4.3.5ListBox控件4.3.6CheckBox和CheckBoxList控件4.3.7RadioButton和RadioButtonList控件4.3.8Image和ImageMap控件4目錄4.3.9HyperLink控件4.3.10Table控件4.3.11Panel和PlaceHolder控件4.3.12MultiView和View控件4.3.13Wizard控件4.4小結

54.1ASP.NET3.5頁面事件處理只有熟悉ASP.NET3.5頁面事件處理流程，才能理解代碼的執(zhí)行順序。64.1.1ASP.NET3.5事件常用頁面處理事件Page_PreInit：通過IsPostBack屬性確定是否第一次處理該頁、創(chuàng)建動態(tài)控件、動態(tài)設置主題屬性、讀取配置文件屬性等。Page_Init：初始化控件屬性。Page_Load：讀取和更新控件屬性?？丶录禾幚硖囟ㄊ录?，如Button控件的Click事件。事件處理的先后順序Page_PreInit、Page_Init、Page_Load和控件的事件74.1.1ASP.NET3.5事件（續(xù)）Click事件被觸發(fā)時會引起頁面往返處理。Change事件被觸發(fā)時，先將事件的信息暫時保存在客戶端的緩沖區(qū)中，等到下一次向服務器傳遞信息時，再和其他信息一起發(fā)送給服務器。若要讓控件的Change事件立即得到服務器的響應，就需要將該控件的屬性AutoPostBack值設為true。84.1.2屬性IsPostBack當控件的事件被觸發(fā)時，Page_Load事件會在控件的事件之前被觸發(fā)。如果想在執(zhí)行控件的事件代碼時不執(zhí)行Page_Load事件中的代碼，可以通過判斷屬性Page.IsPostBack實現(xiàn)。屬性IsPostBack在用戶第一次瀏覽網(wǎng)頁時，會返回值false，否則返回值true。9實例4-1屬性IsPostBack應用本實例在頁面第一次載入時顯示“頁面第一次加載！”。當單擊按鈕時顯示“執(zhí)行Click事件代碼！”信息。源程序：IsPostBack.aspx程序說明：當單擊按鈕時引起頁面往返，此時首先處理Page_Load事件中代碼，但因為“！IsPostBack”值為false，所以不執(zhí)行“Response.Write(“頁面第一次加載！”)”，然后處理Click事件中代碼，顯示“執(zhí)行Click事件代碼！”信息。104.2ASP.NET3.5服務器控件概述HTML服務器控件：常用于升級原有的ASP頁面到ASP.NET頁面。Web服務器控件：目前的ASP.NET3.5網(wǎng)站建設中，優(yōu)先考慮Web服務器控件。當Web服務器控件無法完成特定的任務時，可考慮HTML服務器控件。114.2.1HTML服務器控件簡介實現(xiàn)了將XHTML元素到服務器控件的轉換。經(jīng)過轉換后，Web窗體頁就可訪問XHTML元素（HTML服務器控件），從而實現(xiàn)在服務器端對HTML服務器控件的編程。添加屬性“runat="server"”將轉換XHTML元素到HTML服務器控件。 <inputid="Button2"type="button"value="button"/> <inputid="Button2"type="button"value="button"runat="server"/>124.2.2Web服務器控件簡介可以描述頁面元素的功能、外觀、操作方式和行為等。對于不同的瀏覽器，可能會得到不同的XHTML輸出。根據(jù)功能不同分成標準控件、數(shù)據(jù)控件、驗證控件、導航控件、登錄控件、WebParts控件、AJAXExtensions控件和用戶自定義控件。

134.3標準控件屬性名說明屬性名說明AccessKey控件的鍵盤快捷鍵Font控件的字體屬性Attributes控件的所有屬性集合Height控件的高度BackColor控件的背景色ID控件的編程標識符BoderWidth控件的邊框?qū)挾萒abIndex控件的索引順序BoderStyle控件的邊框樣式Text控件上顯示的文本CssClass控件的CSS類名ToolTip當鼠標懸停在控件上時顯示的文本CssStyle控件的樣式Visible控件是否在Web頁上顯示Enabled是否啟用Web服務器控件Width控件的寬度144.3.1Label控件用于在瀏覽器上顯示文本，可以在服務器端動態(tài)地修改文本。通過Text屬性指定控件顯示的內(nèi)容。定義的語法格式如下： <asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>很實用的屬性AssociatedControlID：值可把Label控件與窗體中另一個服務器控件關聯(lián)起來。15實例4-2通過鍵盤快捷鍵激活特定文本框當按下ALT+N時，將激活用戶名右邊的文本框；當按下ALT+P時將激活密碼右邊的文本框。源程序：Lable.aspx164.3.2TextBox控件用于顯示數(shù)據(jù)或輸入數(shù)據(jù)。語法格式如下：

<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>

17

TextBox控件常用屬性、方法和事件表TextMode屬性值“SingleLine”表示單行文本框；值“Password”表示密碼框，將顯示特殊字符，如“*”；值“MultiLine”表示多行文本框。AutoPostBack屬性值“true”表示當文本框內(nèi)容改變且把焦點移出文本框時觸發(fā)TextChanged事件，引起頁面往返處理。AutoCompleteType屬性標注能自動完成的類型，如Email表示能自動完成郵件列表。Focus()方法設置文本框焦點。TextChanged事件當改變文本框中內(nèi)容且焦點離開文本框后觸發(fā)。18實例4-3控件TextBox綜合應用當頁面載入時，焦點自動定位在用戶名右邊的文本框中；當輸入用戶名并把焦點移出文本框時，將觸發(fā)TextChanged事件，判斷用戶名是否可用，若可用則在lblValidate中顯示“√”，否則顯示“用戶名已占用！”；密碼右邊的文本框顯示為密碼框；E-mail右邊的文本框具有自動完成功能。源程序：TextBox.aspx

19程序說明當頁面載入時，觸發(fā)Page_Load事件，將焦點定位在用戶名右邊的文本框中。本示例中用戶合法性判斷是與固定用戶名“jxssg”比較，實際使用需連接數(shù)據(jù)庫，與數(shù)據(jù)庫中保存的用戶名比較。要看到自動完成Email列表的效果，需先輸入E-mail并單擊確認后再次輸入信息時才能看到效果。204.3.3Button、LinkButton和ImageButton控件

Button：傳統(tǒng)按鈕外觀。LinkButton：超鏈接外觀。ImageButton：圖形外觀，其圖像由ImageUrl屬性設置。 <asp:ButtonID="Button1"runat="server"Text="Button"/> <asp:LinkButtonID="LinkButton1"runat="server">LinkButton</asp:LinkButton> <asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/pic/map.JPG"/>

21按鈕控件實用屬性和事件PostBackUrl屬性：單擊按鈕時發(fā)送到的URL。Click事件：當單擊按鈕時被觸發(fā)，執(zhí)行服務器端代碼。ClientClick事件：當單擊按鈕時被觸發(fā)，執(zhí)行客戶端代碼。22比較<a>與LinkButton兩者都能呈現(xiàn)超鏈接形式設置具體的跳轉方法不同。在<a>元素中通過屬性href設置，如：

<ahref="">鏈接到21世紀</a>

而在LinkButton中需要設置PostBackUrl屬性或在Click事件中輸入代碼，通過Response對象的重定向方法Redirect()實現(xiàn)，如：

Response.Redirect("");23實例4-4利用Button控件執(zhí)行客戶端腳本要在單擊Button控件后執(zhí)行客戶端腳本，需要使用ClientClick事件和JavaScript。源程序：ClientClick.aspx程序說明：當單擊刪除按鈕時，觸發(fā)ClientClick事件，執(zhí)行JavaScript代碼“returnconfirm('確定要刪除記錄嗎?')”，彈出確認對話框。若單擊“確定”按鈕，觸發(fā)Click事件，執(zhí)行刪除操作（這里僅輸出信息，實際操作需連接數(shù)據(jù)庫）；若單擊“取消”，將不再觸發(fā)Click事件，運行結束。244.3.4DropDownList控件允許用戶從預定義的下拉列表中選擇一項。 <asp:DropDownListID="DropDownList1"runat="server"></asp:DropDownList>25DropDownList控件實用屬性和事件表DataSource屬性使用的數(shù)據(jù)源。DataTextField屬性對應數(shù)據(jù)源中的一個字段，該字段所有內(nèi)容將被顯示于下拉列表中。DataValueField屬性數(shù)據(jù)源中的一個字段，指定下拉列表中每個可選項的值。Items屬性列表中所有選項的集合，經(jīng)常使用Items.Add()方法添加項，Clear()方法刪除所有項。SelectedItem屬性當前選定項。SelectedValue屬性當前選定項的屬性Value值。SelectedIndexChanged事件當選擇下拉列表中一項后被觸發(fā)。DataBind()方法綁定數(shù)據(jù)源。26添加項到DropDownList中在屬性窗口中直接對屬性Items進行設置利用DropDownList對象的Items.Add()方法添加項，如： DropDownList1.Items.Add(newListItem("浙江","zhejiang"));通過屬性DataSource設置數(shù)據(jù)源，再通過DataBind()方法顯示數(shù)據(jù)。27實例4-5實現(xiàn)聯(lián)動的下拉列表聯(lián)動的下拉列表在實際工程項目中非常普遍，如要查詢某班級的課表，需要“學年—學期—分院—班級”這樣聯(lián)動的下拉列表。本實例以日期聯(lián)動為例，在默認情況下，顯示系統(tǒng)日期，當改變年或月時，相應的每月天數(shù)會隨之而變。28實例4-5實現(xiàn)聯(lián)動的下拉列表（續(xù)）源程序：DropDownList.aspx程序說明：瀏覽時首先觸發(fā)Page_Load事件，綁定年、月、日到三個DropDownList控件。當改變年或月份時，觸發(fā)相應控件的SelectedIndexChanged事件形成頁面往返，將相應月份的天數(shù)綁定到ddlDay。294.3.5ListBox控件DropDownList和ListBox控件都允許用戶從列表中選擇項，區(qū)別在于DropDownList的列表在用戶選擇前處于隱藏狀態(tài)，而ListBox的選項列表是可見的，并且可同時選擇多項。<asp:ListBoxID="ListBox1"runat="server"></asp:ListBox>SelectionMode屬性：值為Multiple表示允許選擇多項。30實例4-6實現(xiàn)數(shù)據(jù)項在ListBox控件之間的移動當選擇左邊列表框中的項，再單擊按鈕后相應的項將移動到右邊的列表框。源程序：ListBox.aspx314.3.6CheckBox和CheckBoxList控件為用戶提供“真/假”、“是/否”或“開/關”選項之間進行選擇的方法，若需要多項選擇，可以使用多個CheckBox或單個CheckBoxList，但一般采用CheckBoxList。<asp:CheckBoxID="CheckBox1"runat="server"/> <asp:CheckBoxListID="CheckBoxList1"runat="server"></asp:CheckBoxList>324.3.6CheckBox和CheckBoxList控件（續(xù)）注意：判斷CheckBox是否選中的屬性是Checked，而CheckBoxList作為集合控件，判斷列表項是否選中的屬性是成員的Selected屬性。在實際工程項目中，一般設置CheckBoxList的屬性AutoPostBack值為false。要提交數(shù)據(jù)到服務器，不采用CheckBoxList的自身事件，而是常配合Button控件實現(xiàn)。33實例4-7CheckBoxList應用當選擇個人愛好并單擊提交按鈕后顯示選中項的提示信息。源程序：CheckBoxList.aspx344.3.7RadioButton和RadioButtonList控件常用于在多種選擇中只能選擇一項的場合。單個的RadioButton只能提供單項選擇，可以將多個RadioButton形成一組，方法是設置每個RadioButton的屬性GroupName為同一名稱。<asp:RadioButtonID="RadioButton1"runat="server"GroupName="group"/> <asp:RadioButtonID="RadioButton2"runat="server"GroupName="group"/>354.3.7RadioButton和RadioButtonList控件<asp:RadioButtonListID="RadioButtonList1"runat="server"><asp:ListItem>男</asp:ListItem><asp:ListItem>女</asp:ListItem></asp:RadioButtonList>注意：判斷RadioButton是否選中使用Checked屬性，而獲取RadioButtonList的選中項使用屬性SelectedItem。364.3.8Image和ImageMap控件Image控件用于在Web窗體上顯示圖像，圖像源文件可以使用ImageUrl屬性在界面設計時確定，也可以在編程時指定。在工程實際項目中常與數(shù)據(jù)源綁定，根據(jù)數(shù)據(jù)源指定信息顯示圖像。<asp:ImageID="Image1"runat="server"ImageUrl="~/pic/map.JPG"/>注意：Image控件不包含Click事件，如果需要Click事件處理流程，可使用ImageButton控件代替Image控件。374.3.8Image和ImageMap控件（續(xù)）ImageMap控件除可以用來顯示圖像外，還可以實現(xiàn)圖像的超鏈接?？梢詫@示的圖像劃分為不同形狀的熱點區(qū)域，分別鏈接到不同的網(wǎng)頁。在工程實際項目中，常用于導航條、地圖等。熱點區(qū)域通過屬性HotSpot設置，劃分的區(qū)域有圓形CircleHotSpot、長方形RectangleHotSpot和任意多邊形PolygonHotSpot，每個區(qū)域通過屬性NavigateUrl確定要鏈接到的URL。38實例4-8利用ImageMap設計導航條整個導航條是一張圖片，當設置好熱點區(qū)域后，點擊不同區(qū)域?qū)㈡溄拥讲煌W(wǎng)頁。源程序：ImageMap.aspx394.3.9HyperLink控件用于在網(wǎng)頁上創(chuàng)建鏈接，與元素<a>不同，HyperLink控件可以與數(shù)據(jù)源綁定。<asp:HyperLinkID="HyperLink1"runat="server"Target="_blank">HyperLink</asp:HyperLink>屬性Target：值為框架名、_blank或_self。框架名決定了在指定的框架中顯示鏈接頁，_blank決定了在一個新窗口中顯示鏈接頁，而_self決定了在原窗口中顯示鏈接頁。404.3.9HyperLink控件注意：HyperLink控件不包含Click事件，要使用Click事件可用LinkButton控件代替。在同時設置屬性Text和ImageUrl的情況下，ImageUrl優(yōu)先。若找不到圖片則顯示屬性Text設置的內(nèi)容。在HyperLink中直接設置ImageUrl后顯示的圖形尺寸是不可調(diào)的，若要改變圖形尺寸，可配合使用Image控件。41實例4-9組合使用HyperLink和Image控件本實例呈現(xiàn)頁面中顯示圖片的尺寸與實際圖片的尺寸不相同。源程序：HyperLink.aspx424.3.10Table控件用于在Web窗體上動態(tài)地創(chuàng)建表格，是一種容器控件。Table對象由行（TableRow）對象組成，TableRow對象由單元格（TableCell）對象組成。<asp:TableID="Table1"runat="server"GridLines="Both"><asp:TableRowrunat="server"><asp:TableCellrunat="server">學號</asp:TableCell><asp:TableCellrunat="server">姓名</asp:TableCell><asp:TableCellrunat="server">成績</asp:TableCell></asp:TableRow></asp:Table>434.3.10Table控件（續(xù)）注意：向Table添加行使用屬性Rows；向TableRow添加單元格使用屬性Cells；向TableCell添加控件使用屬性Controls。44實例4-10動態(tài)生成表格本實例頁面上的簡易成績錄入界面實質(zhì)是動態(tài)生成的表格。源程序：Table.aspx454.3.11Panel和PlaceHolder控件都是Web窗體上的容器控件，常用于動態(tài)地建立控件和不同情況下在同一個頁面上顯示不同內(nèi)容。相比較而言，Panel控件的屬性要豐富得多。Panel控件把包含在其中的控件組當成一個整體看待，這樣可以統(tǒng)一設置屬性。 <asp:PanelID="Panel1"runat="server"></asp:Panel> <asp:PlaceHolderID="PlaceHolder1"runat="server"></asp:PlaceHolder>46實例4-11利用Panel實現(xiàn)簡易注冊頁面源程序：Panel.aspx程序說明：當頁面載入時，首先執(zhí)行Page_Load事件代碼，將pnlStep1設置為可見，而將其它兩個Panel控件設置為不可見。判斷用戶名是否重復在實際工程項目中將與數(shù)據(jù)庫連接。信息也將保存到數(shù)據(jù)庫中。47實例4-12利用PlaceHolder動態(tài)添加控件PlaceHolder控件在Web窗體上起到占位的作用，可向其中動態(tài)地添加需要的控件。源程序：PlaceHolder.aspx程序說明：頁面載入時，執(zhí)行Page_Load事件代碼，動態(tài)生成一個Button控件和一個TextBox控件。當單擊“確認”按鈕時，根據(jù)注冊的事件執(zhí)行btnSubmit_Click()中代碼。48實例4-12利用PlaceHolder動態(tài)添加控件注意：如果一個包含動態(tài)生成控件的頁面有往返處理，那么動態(tài)生成控件的代碼要放在Page_Load事件中，當頁面往返時觸發(fā)Page_Load事件需要重復生成動態(tài)控件；動態(tài)生成的控件不能在設計時直接綁定事件代碼，需手工注冊；在獲取動態(tài)生成控件中文本框等控件的輸入信息時，需要使用FindControl()方法先找到控件。494.3.12MultiView和View控件提供了一種多視圖切換顯示信息的方式，可以容易地實現(xiàn)分頁多步驟功能。在使用時，MultiView作為View的容器控件，View作為其它控件的容器控件。<asp:MultiViewID="MultiView1"runat="server"><asp:ViewID="View1"runat="server"></asp:View><asp:ViewID="View2"runat="server"></asp:View></asp:MultiView>ActiveViewIndex屬性：決定了當前顯示哪個視圖，默認值為-1，值0表示MultiView中包含的第一個View。50View中Button類型控件實用屬性表CommandNameCommandArgument說明NextView不需要設置顯示下一個ViewPrevView不需要設置顯示上一個ViewSwitchViewByID要切換到的View控件ID切換到指定ID的ViewViewByIndex要切換到的View控件索引號切換到指定索引號的View51實例4-13利用MultiView和View實現(xiàn)用戶編程習慣調(diào)查源程序：MultiView.aspx524.3.13Wizard控件Wizard控件作為一種向?qū)Э丶?，主要用于搜集用戶信息、配置系統(tǒng)等。<asp:WizardID="Wizard1"runat="server"><WizardSteps><asp:WizardSteprunat="server"title="Step1"></asp:WizardStep><asp:WizardSteprunat=