ASP.NET講座(2)-ASP.NET控件
發(fā)表時(shí)間:2024-06-13 來(lái)源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]2.1 ASP.net 入門(mén) 通常談一個(gè)學(xué)科,我們老是說(shuō),它入門(mén)很簡(jiǎn)單的嘛,ASP.net也是。ASP.net提出一個(gè)概念,就是認(rèn)為WEB頁(yè)面,也是一個(gè)窗體,所以,學(xué)習(xí)過(guò)面向?qū)ο缶幊痰腣B VC BC Dephi的朋友,學(xué)起來(lái)就簡(jiǎn)單多了! ∫粋(gè)ASP.net頁(yè)面的后綴名是".aspx...
2.1 ASP.net 入門(mén)
通常談一個(gè)學(xué)科,我們老是說(shuō),它入門(mén)很簡(jiǎn)單的嘛,ASP.net也是。ASP.net提出一個(gè)概念,就是認(rèn)為WEB頁(yè)面,也是一個(gè)窗體,所以,學(xué)習(xí)過(guò)面向?qū)ο缶幊痰腣B VC BC Dephi的朋友,學(xué)起來(lái)就簡(jiǎn)單多了。
一個(gè)ASP.net頁(yè)面的后綴名是".aspx",所以,IIS在你安裝完ASP.net時(shí),也會(huì)把Default.aspx作為你的默認(rèn)首頁(yè),網(wǎng)管朋友一定要注意了。
ASP.net 是后天編譯運(yùn)行的,只是在第一次運(yùn)行時(shí)編譯,所以,以后的運(yùn)行速度比ASP執(zhí)行快。
2.2 寫(xiě)自己第一個(gè)ASP.net的程序
激動(dòng)嗎?很快就開(kāi)始寫(xiě)第一個(gè)程序了,一般學(xué)任何語(yǔ)言都要Hello World!一下吧,那我們也來(lái)。
在這之前寫(xiě)要說(shuō)一下,ASP.net的程序可以用任何東西寫(xiě),甚至是Windows的記事本,當(dāng)初基督山也很疑惑,要不要用 V Interdev .net 來(lái)編寫(xiě)啊,事實(shí)證明,那玩意沒(méi)手寫(xiě)好用。
。%@ Page Language="VB"%> '說(shuō)明一下你使用的哪一種語(yǔ)言來(lái)寫(xiě).net的,如果是VB的話,這行可以不寫(xiě)。
<%Reponse.Write ("Hello World")%>
命名 myfirstasp_net.aspx 來(lái)我們運(yùn)行一下,果然,Hello World!
注意,Response.Write 語(yǔ)句,我們?cè)瓉?lái)寫(xiě)成 Response.Write "Hello World!"也是正確的,但在.net中,必須用"("和")"。
2.3 HTML 控件
ASP.net 框架中的第一組控件稱為 HTML 控件。這些控件位于 System.Web.UI.HtmlControls 命名空間中,是從 HtmlControl 基類中直接或間接派生出來(lái)的。圖 1 說(shuō)明了 HTML 控件的類層次結(jié)構(gòu)。
圖 1. ASP+ HTML 控件
幾乎所有對(duì)于任何包含 runat="server" 屬性的標(biāo)記,都會(huì)為其生成 HTML 控件。例如,下面的 HTML 可創(chuàng)建一個(gè)名為"textBox1"的 HtmlInputText 控件的實(shí)例:
<input type="text" runat="server" id="textBox1" value="some text">
下表中列出了 HTML 控件以及對(duì)應(yīng)的 HTML 標(biāo)記。
控件 | 對(duì)應(yīng)的標(biāo)記 |
HtmlAnchor | <a> |
HtmlButton | <button> |
HtmlSelect | <select> |
HtmlTextArea | <textarea> |
HtmlInputButton | <input type="button"> |
HtmlInputCheckBox | <input type="check"> |
HtmlInputRadioButton | <input type="radio"> |
HtmlInputText | <input type="text"> 和 <input type="password"> |
HtmlInputHidden | <input type="hidden"> |
HtmlInputImage | <input type="image"> |
HtmlInputFile | <input type="file"> |
HtmlForm | <form> |
HtmlImage | <img> |
HtmlTable | <table> |
HtmlTableRow | <tr> |
HtmlTableCell | <td> |
HtmlGenericControl | 任何其它沒(méi)有對(duì)應(yīng)控件的標(biāo)記,如 <span>、<div> 等 |
對(duì)于現(xiàn)有的ASP程序,如果向ASP.net移植,毫無(wú)疑問(wèn)HTML控件將發(fā)揮最大的作用。
2.4 Web 控件
ASP.net 框架中的第二組服務(wù)器控件稱為 Web 控件。這些控件位于 System.Web.UI.WebControls 命名空間中,是從 WebControl 基類中直接或間接派生出來(lái)的。圖 2 說(shuō)明了 Web 控件的類層次結(jié)構(gòu)。
Web 控件中包括傳統(tǒng)的表單控件,如 TextBox 和 Button ,以及其它更高抽象級(jí)別的控件,如 Calendar 和 DataGrid 控件。它們提供了一些能夠簡(jiǎn)化開(kāi)發(fā)工作的特性,其中包括:
豐富而一致的對(duì)象模型:WebControl 基類實(shí)現(xiàn)了對(duì)所有控件通用的大量屬性,這些屬性包括 ForeColor、BackColor、Font、Enabled 等。屬性和方法的名稱是經(jīng)過(guò)精心挑選的,以提高在整個(gè)框架和該組控件中的一致性。通過(guò)這些組件實(shí)現(xiàn)的具有明確類型的對(duì)象模型將有助于減少編程錯(cuò)誤。
對(duì)瀏覽器的自動(dòng)檢測(cè):Web 控件能夠自動(dòng)檢測(cè)客戶機(jī)瀏覽器的功能,并相應(yīng)地調(diào)整它們所提交的 HTML,從而充分發(fā)揮瀏覽器的功能。
數(shù)據(jù)綁定:在 Web 窗體頁(yè)面中,可以對(duì)控件的任何屬性進(jìn)行數(shù)據(jù)綁定。此外,還有幾種 Web 控件可以用來(lái)提交數(shù)據(jù)源的內(nèi)容。
在 HTML 標(biāo)記中,Web 控件會(huì)表示為具有命名空間的標(biāo)記,即帶有前綴的標(biāo)記。前綴用于將標(biāo)記映射到運(yùn)行時(shí)組件的命名空間。標(biāo)記的其余部分是運(yùn)行時(shí)類自身的名稱。與 HTML 控件相似,這些標(biāo)記也必須包含 runat="server" 屬性。下面是一個(gè)聲明的示例:
<asp:TextBox id="textBox1" runat="server" Text="基督山伯爵">
</asp:TextBox>
在上例中,"asp"是標(biāo)記前綴,會(huì)映射到 System.Web.UI.WebControls 命名空間。
圖 2. ASP+ Web 控件
文本顯示
Label 控件用于在頁(yè)面中顯示只讀的靜態(tài)文本或數(shù)據(jù)綁定的文本:
<asp:Label runat="server" Text="Label1" Font-Italic="true">
</asp:Label>
輸入控件
Web 控件組中包含的一些控件,允許最終用戶輸入將由服務(wù)器上的頁(yè)面處理的數(shù)據(jù)。
TextBox 控件用于提供文本編輯能力。與 Label 控件相似,這里的文本也可以是數(shù)據(jù)綁定的。TextBox 控件支持多種模式,可以用來(lái)實(shí)現(xiàn)單行輸入、多行輸入和密碼輸入:
<asp:TextBox runat="server" Text="TextBox1"></asp:TextBox> |
<asp:TextBox runat="server" Mode="Multiline" Rows="3"> TextBox1 </asp:TextBox> |
<asp:TextBox runat="server" Mode="Password"></asp:TextBox> |
CheckBox 控件用于生成能夠在選中和清除這兩種狀態(tài)間切換的復(fù)選框:
<asp:CheckBox runat="server" Text="CheckBox1" Checked="True"> </asp:CheckBox> |
RadioButton 控件與 CheckBox 控件相似,但使用時(shí)通常會(huì)與其它 RadioButton 控件組成一組,以提供一組互斥的選項(xiàng):
<asp:RadioButton runat="server" Text="RadioButton1" GroupName="Group1" Checked="true"> </asp:RadioButton> <asp:RadioButton runat="server" Text="RadioButton2" GroupName="Group1"></asp:RadioButton> |
選擇控件
下面的四個(gè)控件提供了允許用戶從展示給他們的選項(xiàng)中進(jìn)行選擇的機(jī)制。選項(xiàng)列表的內(nèi)容既可像下面的示例中那樣是靜態(tài)定義的,也可以使用數(shù)據(jù)源來(lái)動(dòng)態(tài)填充。
DropDownList 控件提供了將選項(xiàng)顯示為下拉式列表,并從中進(jìn)行單項(xiàng)選擇的能力:
<asp:DropDownList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:DropDownList>
ListBox 控件能夠以可滾動(dòng)列表的形式顯示選項(xiàng),并允許從中選擇單個(gè)或多個(gè)選項(xiàng):
<asp:ListBox runat="server" SelectionMode="Multiple"> <asp:ListItem Text="Choice1" Value="1" selected="true"/> <asp:ListItem Text="Choice2" Value="2"/> </asp:ListBox> |
CheckBoxList 控件用于創(chuàng)建一組顯示為一列或多列的 Checkbox 控件:
<asp:CheckBoxList runat="server"> <asp:ListItem Text="Choice1" Value="1" selected="true"/> <asp:ListItem Text="Choice2" Value="2" selected="true"/> </asp:CheckBoxList > |
RadioButtonList 控件與 CheckBoxList 控件非常相似。不同之處在于,它使用的是一組 RadioButton 控件以創(chuàng)建一組互斥的選項(xiàng):
<asp:RadioButtonList runat="server"> <asp:ListItem Text="Choice1" Value="1" selected="true"/> <asp:ListItem Text="Choice2" Value="2"/> </asp:RadioButtonList > |
表單提交和回傳 下列控件用于將帶有用戶輸入值的頁(yè)面提交給服務(wù)器,以便用頁(yè)面中的代碼對(duì)這些值進(jìn)行處理。這些控件會(huì)在服務(wù)器上產(chǎn)生一個(gè) Click 事件,供您在代碼中使用。
Button 控件可以生成一個(gè)能夠?qū)㈨?yè)面再提交給服務(wù)器的三維按鈕:
<asp:Button runat="server" Text="單擊我"></asp:Button> |
LinkButton 控件的行為與 Button 控件相同。但它在頁(yè)面上會(huì)顯示為一個(gè)超級(jí)鏈接:
<asp:LinkButton runat="server" Text="單擊我"></asp:Button> |
ImageButton 控件也用于提交頁(yè)面。它會(huì)顯示為一幅圖像,并且能夠提供用戶單擊位置的 x 坐標(biāo)和 y 坐標(biāo):
<asp:ImageButton runat="server" ImageUrl="net.gif"></asp:Button> |
導(dǎo)航 HyperLink 控件用于生成能夠跳轉(zhuǎn)到其它 URL 的鏈接:
<asp:HyperLink runat="server" Text="跟我來(lái)" NavigateUrl="MyPage.aspx"> </asp:HyperLink> |
圖像顯示
Image 控件能夠在頁(yè)面上顯示圖像:
<asp:Image runat="server" ImageUrl="net.gif"></asp:Image>
版面控件
Panel 控件常用作簡(jiǎn)單的組合控件以及動(dòng)態(tài)創(chuàng)建的控件的容器。(請(qǐng)注意,Panel 控件通常不具有可見(jiàn)的外觀。)
<asp:Panel runat="server"></asp:Panel>
Table 控件與相關(guān)的 TableRow 和 TableCell 控件相結(jié)合,可以用來(lái)以編程的方法創(chuàng)建表或表式版面布局:
<asp:Table runat="server" GridLines="Both" BorderWidth="1px"> <asp:TableRow> <asp:TableCell>[0,0]</asp:TableCell> <asp:TableCell>[0,1]</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>[1,0]</asp:TableCell> <asp:TableCell>[1,1]</asp:TableCell> </asp:TableRow> </asp:Table> |
日期選擇 Calendar 控件能夠讓用戶瀏覽日期并進(jìn)行日期選擇(包括選擇日期范圍):
<asp:Calendar runat=server DayNameFormat="FirstLetter" ...> <property name=SelectedDayStyle> <asp:TableItemStyle Font-Bold="True" BackColor="#CCCCFF"/> </property> ... </asp:Calendar> |
列表綁定控件 列表綁定控件用于顯示與其相關(guān)聯(lián)的數(shù)據(jù)源或列表的內(nèi)容。它們提供了創(chuàng)建多種自定義及標(biāo)準(zhǔn)版式的能力。關(guān)于數(shù)據(jù)邦定,我們會(huì)用一個(gè)章節(jié)的內(nèi)容來(lái)完整的說(shuō)它。
Repeater 控件是一個(gè)簡(jiǎn)單的列表綁定控件,它使用模板(即用于設(shè)定版式的 HTML 代碼片斷)來(lái)以一種"樸實(shí)無(wú)華"的,即沒(méi)有預(yù)定義外觀的方式顯示數(shù)據(jù)源的內(nèi)容:
<asp:Repeater runat="server"> <template name="HeaderTemplate"> <o(jì)l> </template> <template name="ItemTemplate"> <li> <a runat="server" href='<%# DataBinder.Eval(Container.DataItem, "SiteURL") %>'> <%# DataBinder.Eval(Container.DataItem, "SiteName") %> </a> </li> </template> <template name="FooterTemplate"> </ol> </template> </asp:Repeater> |
DataList 控件也使用模板來(lái)顯示與之綁定的數(shù)據(jù)源的內(nèi)容。此外,它還提供了自定義外觀格式和布局的功能:
<asp:DataList runat="server"> <template name="ItemTemplate"> <%# DataBinder.Eval(Container.DataItem, "PersonName") %> ... </template> ... </asp:DataList> |
DataGrid 控件能夠創(chuàng)建格式豐富的列表版式,用來(lái)顯示與之綁定的數(shù)據(jù)源的內(nèi)容。它提供了對(duì)排序、編輯和分頁(yè)的支持。
<asp:DataGrid runat="server" ...> <property name="Columns"> <asp:BoundColumn HeaderText="ID" .../> ... </property> ... </asp:DataGrid> |
Validation 控件 Validation 控件簡(jiǎn)化了對(duì)用戶輸入的內(nèi)容進(jìn)行驗(yàn)證的工作。它們能自動(dòng)為上層瀏覽器生成客戶機(jī)端腳本,以便在進(jìn)行回傳前,在用戶的計(jì)算機(jī)上進(jìn)行驗(yàn)證,從而實(shí)現(xiàn)了交互性和對(duì)用戶友好性更加良好的頁(yè)面。與此同時(shí),它們也能在服務(wù)器上作為第二道防線來(lái)完成同樣的工作。"有關(guān)的參考資料"一節(jié)中列出的其它文章對(duì)此進(jìn)行了詳細(xì)說(shuō)明。 RequiredFieldValidator 控件用于確保用戶填寫(xiě)了必須輸入的那些輸入控件。 RangeValidator 控件用于檢查用戶輸入的內(nèi)容在有效取值范圍之內(nèi)。這對(duì)于數(shù)字或日期類型的輸入內(nèi)容十分有用。
CompareValidator 控件用于對(duì)比一個(gè)控件中的輸入內(nèi)容與另一個(gè)控件中的輸入內(nèi)容。
RegularExpressionValidator 控件能夠檢查用戶輸入的內(nèi)容是否符合作為標(biāo)準(zhǔn)的規(guī)范表達(dá)式(或字符串模式)。
CustomValidator 控件允許您提供自定義的服務(wù)器端和客戶機(jī)端驗(yàn)證邏輯。
ValidationSummary 控件能夠提供由驗(yàn)證控件生成的所有錯(cuò)誤信息的概要。
零雜控件
這個(gè),我們會(huì)在第四講,驗(yàn)證表單內(nèi)容中詳細(xì)闡述
AdRotator 控件用于顯示廣告或橫幅。廣告的有關(guān)信息(包括其圖像的 URL)使用 XML 文件來(lái)定義:
<asp:AdRotator runat="server" AdvertisementFile="AdsList.xml"> </asp:AdRotator> |
2.5 HTML 控件,WEB控件,都可以產(chǎn)生一樣的效果,到底誰(shuí)優(yōu)誰(shuí)劣? 在開(kāi)發(fā)這些控件時(shí),我們反復(fù)地問(wèn)自己,是否真的有必要同時(shí)提供具有一些重復(fù)功能的 HTML 控件組和 Web 控件組。您肯定也想了解 HTML 控件和 Web 控件究竟有什么異同,以及它們各自適用的場(chǎng)合。 這兩組控件的異同可以通過(guò)以下方面來(lái)比較。 控件抽象 HTML 控件不具備任何抽象能力。每種控件與 HTML 標(biāo)記都是一一對(duì)應(yīng)的(請(qǐng)參見(jiàn)表 1)。 Web 控件創(chuàng)建了更高級(jí)別的抽象,它們沒(méi)有任何對(duì)應(yīng)的 HTML 標(biāo)記(如 Calendar 和 DataGrid)。因?yàn)樗鼈儾恢苯佑成錇?HTML 標(biāo)記,所以 Web 控件還能夠在適當(dāng)?shù)膱?chǎng)合起到合并功能的作用(例如用一個(gè) TextBox 控件來(lái)代替多個(gè)標(biāo)記)。這種抽象為使用第三方提供的種類豐富的控件工具箱打開(kāi)了方便之門(mén)。 對(duì)象模型 HTML 控件提供了以 HTML 為中心的對(duì)象模型。每種控件都包括一個(gè)屬性集,可以使用該屬性集來(lái)控制標(biāo)記的屬性。這個(gè)屬性集使用了字符串名/值對(duì),并且不是強(qiáng)類型的。 在使用 HTML 控件時(shí),您的編程方式與使用傳統(tǒng)的 ASP 進(jìn)行編程十分類似。因而,HTML 控件提供了一條快捷的移植途徑 - 可以通過(guò)添加一個(gè) runat="server" 屬性來(lái)將一個(gè)標(biāo)記轉(zhuǎn)變?yōu)橐粋(gè)服務(wù)器控件。 Web 控件提供了基于表單的、類似于 Visual Basic 的編程模式。它們也提供了屬性集,但它們的主要目標(biāo)在于提供一種格式豐富、類型安全且具有一致性的對(duì)象模型。每種 Web 控件都包含一組標(biāo)準(zhǔn)的屬性,如 ForeColor、BackColor、Font 等。 這種對(duì)象模型還在像 Visual Studio .NET 這樣的設(shè)計(jì)工具中提供了更豐富的設(shè)計(jì)時(shí)體驗(yàn)。 目標(biāo)瀏覽器 HTML 控件不會(huì)自動(dòng)檢測(cè)請(qǐng)求頁(yè)面的瀏覽器的能力,也不會(huì)修改它們提供的 HTML。在使用這組控件時(shí),您要負(fù)責(zé)確保您的頁(yè)面能同時(shí)在高級(jí)和低級(jí)瀏覽器上工作。 Web 控件能夠自動(dòng)對(duì)它們生成的結(jié)果進(jìn)行調(diào)整,以確保輸出結(jié)果在高級(jí)瀏覽器和低級(jí)瀏覽器上的工作同樣出色。Web 控件還能夠針對(duì)不同的瀏覽器提供不同的行為,從而充分發(fā)揮瀏覽器的潛力。例如,validation 控件還可以通過(guò)客戶端的腳本來(lái)創(chuàng)建用于高級(jí)瀏覽器的具有高度交互性的頁(yè)面。 對(duì)生成的 HTML 的控制 HTML 控件允許您完全控制所顯示的內(nèi)容以及發(fā)送到客戶機(jī)瀏覽器的內(nèi)容。 Web 控件提供了更為豐富的對(duì)象模型,以及適應(yīng)多種瀏覽器的能力。因而,它們沒(méi)有提供對(duì)輸出結(jié)果的相同程度的控制能力。 在您開(kāi)發(fā) Web 應(yīng)用程序時(shí),您可以根據(jù)這兩組控件的能力以及您的需求來(lái)從中進(jìn)行選擇。您還可以選擇在同一頁(yè)上混合使用這兩組控件,使用一種類型的控件并不妨礙您同時(shí)使用另一種類型的控件。 2.6 修飾和打扮你的控件 <span style="font: 12pt verdana; color:orange;font-weight:700" runat="server"> This is some literal text inside a styled span control </span> 注意畫(huà)線部分,漂亮的字 <button style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server">Click me!</button> 漂亮的按鈕,有圓角,很Cool,不用自己用Photoshop做了 <input type="text" value="One, Two, Three" style="font: 14pt verdana;background-color:yellow;border-style:dashed;border-color:red;width:300;" runat="server"/> 虛線框哦,也不用Photoshop就可以做了,style很強(qiáng)大。 asp:Calender 控件中 <form runat="server"> <ASP:Calendar runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" BorderStyle="Solid" BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true /> </form> 注意有顏色部分,這部分就是對(duì)控件的修飾,它的作用,就是讓你的Web窗體更漂亮。 再給一個(gè)例子 <ASP:Calendar CssClass="calstyle" runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" BorderStyle="Solid" BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true TitleStyle-BorderColor="darkolivegreen" TitleStyle-BorderWidth="3" TitleStyle-BackColor="olivedrab" TitleStyle-Height="50px" DayHeaderStyle-BorderColor="darkolivegreen" DayHeaderStyle-BorderWidth="3" DayHeaderStyle-BackColor="olivedrab" DayHeaderStyle-ForeColor="black" DayHeaderStyle-Height="20px" DayStyle-Width="50px" DayStyle-Height="50px" TodayDayStyle-BorderWidth="3" WeekEndDayStyle-BackColor="palegoldenrod" WeekEndDayStyle-Width="50px" WeekEndDayStyle-Height="50px" SelectedDayStyle-BorderColor="firebrick" SelectedDayStyle-BorderWidth="3" OtherMonthDayStyle-Width="50px" OtherMonthDayStyle-Height="50px" /> 是不是更漂亮,設(shè)置也很簡(jiǎn)單,一看就能明白。 2.7 最重要的兩個(gè)注意事項(xiàng) 注意,.net支持的語(yǔ)言不是VBScript 而是VB,所以聲明變量的時(shí)候,不是簡(jiǎn)單的Dim就行了。 注意 你寫(xiě)程序有99.9999999999999999%的可能不能正常顯示中文,解決的方法就是:在D:\WINNT\Microsoft.NET\Framework\v1.0.2204(具體目錄有可能不是這個(gè),自己看著像就是了)有一個(gè)config.web的文件,在這個(gè)文件里面把 <globalization requestencoding="iso-8859-1" responseencoding="iso-8859-1" />改為<globalization requestencoding=" gb2312" responseencoding="gb2312"/> 好了,去體驗(yàn)一下中文的樂(lè)趣(同時(shí)大罵M$,應(yīng)該把作為缺省語(yǔ)言。。
|