明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

ASP.NET講座(2)-ASP.NET控件

[摘要]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ǔ)言。。




相關(guān)文章