top
Loading...
ASP.NET控件

2.1 ASP.net 入門

通常談一個學科,我們老是說,它入門很簡單的嘛,ASP.net也是。ASP.net提出一個概念,就是認為WEB頁面,也是一個窗體,所以,學習過面向對象編程的VB VC BC Dephi的朋友,學起來就簡單多了。

一個ASP.net頁面的后綴名是".aspx",所以,IIS在你安裝完ASP.net時,也會把Default.aspx作為你的默認首頁,網管朋友一定要注意了。

ASP.net 是后天編譯運行的,只是在第一次運行時編譯,所以,以后的運行速度比ASP執行快。

2.2 寫自己第一個ASP.net的程序

激動嗎?很快就開始寫第一個程序了,一般學任何語言都要Hello World!一下吧,那我們也來。
在這之前寫要說一下,ASP.net的程序可以用任何東西寫,甚至是Windows的記事本,當初基督山也很疑惑,要不要用 V Interdev .net 來編寫啊,事實證明,那玩意沒手寫好用。

<%@ Page Language="VB"%> '說明一下你使用的哪一種語言來寫.net的,如果是VB的話,這行可以不寫。

<%Reponse.Write ("Hello World")%>

命名 myfirstasp_net.aspx 來我們運行一下,果然,Hello World!

注意,Response.Write 語句,我們原來寫成 Response.Write "Hello World!"也是正確的,但在.net中,必須用"("和")"。

2.3 HTML 控件

ASP.net 框架中的第一組控件稱為 HTML 控件。這些控件位于 System.Web.UI.HtmlControls 命名空間中,是從 HtmlControl 基類中直接或間接派生出來的。圖 1 說明了 HTML 控件的類層次結構。



圖 1. ASP+ HTML 控件

幾乎所有對于任何包含 runat="server" 屬性的標記,都會為其生成 HTML 控件。例如,下面的 HTML 可創建一個名為"textBox1"的 HtmlInputText 控件的實例:

<input type="text" runat="server" id="textBox1" value="some text">

下表中列出了 HTML 控件以及對應的 HTML 標記。

控件對應的標記
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任何其它沒有對應控件的標記,如 <span>、<div> 等

對于現有的ASP程序,如果向ASP.net移植,毫無疑問HTML控件將發揮最大的作用。

2.4 Web 控件

ASP.net 框架中的第二組服務器控件稱為 Web 控件。這些控件位于 System.Web.UI.WebControls 命名空間中,是從 WebControl 基類中直接或間接派生出來的。圖 2 說明了 Web 控件的類層次結構。

Web 控件中包括傳統的表單控件,如 TextBox 和 Button ,以及其它更高抽象級別的控件,如 Calendar 和 DataGrid 控件。它們提供了一些能夠簡化開發工作的特性,其中包括:

豐富而一致的對象模型:WebControl 基類實現了對所有控件通用的大量屬性,這些屬性包括 ForeColor、BackColor、Font、Enabled 等。屬性和方法的名稱是經過精心挑選的,以提高在整個框架和該組控件中的一致性。通過這些組件實現的具有明確類型的對象模型將有助于減少編程錯誤。

對瀏覽器的自動檢測:Web 控件能夠自動檢測客戶機瀏覽器的功能,并相應地調整它們所提交的 HTML,從而充分發揮瀏覽器的功能。

數據綁定:在 Web 窗體頁面中,可以對控件的任何屬性進行數據綁定。此外,還有幾種 Web 控件可以用來提交數據源的內容。

在 HTML 標記中,Web 控件會表示為具有命名空間的標記,即帶有前綴的標記。前綴用于將標記映射到運行時組件的命名空間。標記的其余部分是運行時類自身的名稱。與 HTML 控件相似,這些標記也必須包含 runat="server" 屬性。下面是一個聲明的示例:

<asp:TextBox id="textBox1" runat="server" Text="基督山伯爵">
</asp:TextBox>

在上例中,"asp"是標記前綴,會映射到 System.Web.UI.WebControls 命名空間。



圖 2. ASP+ Web 控件

文本顯示

Label 控件用于在頁面中顯示只讀的靜態文本或數據綁定的文本:

<asp:Label runat="server" Text="Label1" Font-Italic="true">
</asp:Label>

輸入控件

Web 控件組中包含的一些控件,允許最終用戶輸入將由服務器上的頁面處理的數據。

TextBox 控件用于提供文本編輯能力。與 Label 控件相似,這里的文本也可以是數據綁定的。TextBox 控件支持多種模式,可以用來實現單行輸入、多行輸入和密碼輸入:

<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 控件用于生成能夠在選中和清除這兩種狀態間切換的復選框:

<asp:CheckBox runat="server" Text="CheckBox1" Checked="True">
</asp:CheckBox>


RadioButton 控件與 CheckBox 控件相似,但使用時通常會與其它 RadioButton 控件組成一組,以提供一組互斥的選項:

<asp:RadioButton runat="server" Text="RadioButton1" GroupName="Group1" Checked="true">
</asp:RadioButton>
<asp:RadioButton runat="server" Text="RadioButton2" GroupName="Group1"></asp:RadioButton>


選擇控件

下面的四個控件提供了允許用戶從展示給他們的選項中進行選擇的機制。選項列表的內容既可像下面的示例中那樣是靜態定義的,也可以使用數據源來動態填充。

DropDownList 控件提供了將選項顯示為下拉式列表,并從中進行單項選擇的能力:

<asp:DropDownList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:DropDownList>


ListBox 控件能夠以可滾動列表的形式顯示選項,并允許從中選擇單個或多個選項:

<asp:ListBox runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:ListBox>


CheckBoxList 控件用于創建一組顯示為一列或多列的 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 控件以創建一組互斥的選項:

<asp:RadioButtonList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:RadioButtonList >


表單提交和回傳

下列控件用于將帶有用戶輸入值的頁面提交給服務器,以便用頁面中的代碼對這些值進行處理。這些控件會在服務器上產生一個 Click 事件,供您在代碼中使用。

Button 控件可以生成一個能夠將頁面再提交給服務器的三維按鈕:

<asp:Button runat="server" Text="單擊我"></asp:Button>


LinkButton 控件的行為與 Button 控件相同。但它在頁面上會顯示為一個超級鏈接:

<asp:LinkButton runat="server" Text="單擊我"></asp:Button>


ImageButton 控件也用于提交頁面。它會顯示為一幅圖像,并且能夠提供用戶單擊位置的 x 坐標和 y 坐標:

<asp:ImageButton runat="server" ImageUrl="net.gif"></asp:Button>


導航

HyperLink 控件用于生成能夠跳轉到其它 URL 的鏈接:

<asp:HyperLink runat="server" Text="跟我來" NavigateUrl="MyPage.aspx">
</asp:HyperLink>


圖像顯示

Image 控件能夠在頁面上顯示圖像:

<asp:Image runat="server" ImageUrl="net.gif"></asp:Image>


版面控件

Panel 控件常用作簡單的組合控件以及動態創建的控件的容器。(請注意,Panel 控件通常不具有可見的外觀。)

<asp:Panel runat="server"></asp:Panel>

Table 控件與相關的 TableRow 和 TableCell 控件相結合,可以用來以編程的方法創建表或表式版面布局:

<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 控件能夠讓用戶瀏覽日期并進行日期選擇(包括選擇日期范圍):

<asp:Calendar runat=server DayNameFormat="FirstLetter" ...>
<property name=SelectedDayStyle>
<asp:TableItemStyle Font-Bold="True" BackColor="#CCCCFF"/>
</property>
...
</asp:Calendar>


列表綁定控件

列表綁定控件用于顯示與其相關聯的數據源或列表的內容。它們提供了創建多種自定義及標準版式的能力。關于數據邦定,我們會用一個章節的內容來完整的說它。

Repeater 控件是一個簡單的列表綁定控件,它使用模板(即用于設定版式的 HTML 代碼片斷)來以一種"樸實無華"的,即沒有預定義外觀的方式顯示數據源的內容:

<asp:Repeater runat="server">
<template name="HeaderTemplate">
<ol>
</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 控件也使用模板來顯示與之綁定的數據源的內容。此外,它還提供了自定義外觀格式和布局的功能:

<asp:DataList runat="server">
<template name="ItemTemplate">
<%# DataBinder.Eval(Container.DataItem, "PersonName") %>
...
</template>
...
</asp:DataList>


DataGrid 控件能夠創建格式豐富的列表版式,用來顯示與之綁定的數據源的內容。它提供了對排序、編輯和分頁的支持。

<asp:DataGrid runat="server" ...>
<property name="Columns">
<asp:BoundColumn HeaderText="ID" .http://www.zhujiangroad.com/>
...
</property>
...
</asp:DataGrid>


Validation 控件

Validation 控件簡化了對用戶輸入的內容進行驗證的工作。它們能自動為上層瀏覽器生成客戶機端腳本,以便在進行回傳前,在用戶的計算機上進行驗證,從而實現了交互性和對用戶友好性更加良好的頁面。與此同時,它們也能在服務器上作為第二道防線來完成同樣的工作。"有關的參考資料"一節中列出的其它文章對此進行了詳細說明。

RequiredFieldValidator 控件用于確保用戶填寫了必須輸入的那些輸入控件。

RangeValidator 控件用于檢查用戶輸入的內容在有效取值范圍之內。這對于數字或日期類型的輸入內容十分有用。

CompareValidator 控件用于對比一個控件中的輸入內容與另一個控件中的輸入內容。

RegularExpressionValidator 控件能夠檢查用戶輸入的內容是否符合作為標準的規范表達式(或字符串模式)。

CustomValidator 控件允許您提供自定義的服務器端和客戶機端驗證邏輯。

ValidationSummary 控件能夠提供由驗證控件生成的所有錯誤信息的概要。

零雜控件

這個,我們會在第四講,驗證表單內容中詳細闡述

AdRotator 控件用于顯示廣告或橫幅。廣告的有關信息(包括其圖像的 URL)使用 XML 文件來定義:

<asp:AdRotator runat="server" AdvertisementFile="AdsList.xml">
</asp:AdRotator>


2.5 HTML 控件,WEB控件,都可以產生一樣的效果,到底誰優誰劣?

在開發這些控件時,我們反復地問自己,是否真的有必要同時提供具有一些重復功能的 HTML 控件組和 Web 控件組。您肯定也想了解 HTML 控件和 Web 控件究竟有什么異同,以及它們各自適用的場合。
這兩組控件的異同可以通過以下方面來比較。

控件抽象

HTML 控件不具備任何抽象能力。每種控件與 HTML 標記都是一一對應的(請參見表 1)。

Web 控件創建了更高級別的抽象,它們沒有任何對應的 HTML 標記(如 Calendar 和 DataGrid)。因為它們不直接映射為 HTML 標記,所以 Web 控件還能夠在適當的場合起到合并功能的作用(例如用一個 TextBox 控件來代替多個標記)。這種抽象為使用第三方提供的種類豐富的控件工具箱打開了方便之門。

對象模型

HTML 控件提供了以 HTML 為中心的對象模型。每種控件都包括一個屬性集,可以使用該屬性集來控制標記的屬性。這個屬性集使用了字符串名/值對,并且不是強類型的。

在使用 HTML 控件時,您的編程方式與使用傳統的 ASP 進行編程十分類似。因而,HTML 控件提供了一條快捷的移植途徑 - 可以通過添加一個 runat="server" 屬性來將一個標記轉變為一個服務器控件。

Web 控件提供了基于表單的、類似于 Visual Basic 的編程模式。它們也提供了屬性集,但它們的主要目標在于提供一種格式豐富、類型安全且具有一致性的對象模型。每種 Web 控件都包含一組標準的屬性,如 ForeColor、BackColor、Font 等。

這種對象模型還在像 Visual Studio .NET 這樣的設計工具中提供了更豐富的設計時體驗。

目標瀏覽器

HTML 控件不會自動檢測請求頁面的瀏覽器的能力,也不會修改它們提供的 HTML。在使用這組控件時,您要負責確保您的頁面能同時在高級和低級瀏覽器上工作。

Web 控件能夠自動對它們生成的結果進行調整,以確保輸出結果在高級瀏覽器和低級瀏覽器上的工作同樣出色。Web 控件還能夠針對不同的瀏覽器提供不同的行為,從而充分發揮瀏覽器的潛力。例如,validation 控件還可以通過客戶端的腳本來創建用于高級瀏覽器的具有高度交互性的頁面。

對生成的 HTML 的控制

HTML 控件允許您完全控制所顯示的內容以及發送到客戶機瀏覽器的內容。

Web 控件提供了更為豐富的對象模型,以及適應多種瀏覽器的能力。因而,它們沒有提供對輸出結果的相同程度的控制能力。

在您開發 Web 應用程序時,您可以根據這兩組控件的能力以及您的需求來從中進行選擇。您還可以選擇在同一頁上混合使用這兩組控件,使用一種類型的控件并不妨礙您同時使用另一種類型的控件。

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>

注意畫線部分,漂亮的字

<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很強大。

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>

注意有顏色部分,這部分就是對控件的修飾,它的作用,就是讓你的Web窗體更漂亮。

再給一個例子

<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"
/>

是不是更漂亮,設置也很簡單,一看就能明白。

2.7 最重要的兩個注意事項

注意,.net支持的語言不是VBScript 而是VB,所以聲明變量的時候,不是簡單的Dim就行了。

注意 你寫程序有99.9999999999999999%的可能不能正常顯示中文,解決的方法就是:在D:WINNTMicrosoft.NETFrameworkv1.0.2204(具體目錄有可能不是這個,自己看著像就是了)有一個config.web的文件,在這個文件里面把 <globalization requestencoding="iso-8859-1" responseencoding="iso-8859-1" />改為<globalization requestencoding=" gb2312" responseencoding="gb2312"/> 好了,去體驗一下中文的樂趣(同時大罵M$,應該把作為缺省語言啊!)


作者:http://www.zhujiangroad.com
來源:http://www.zhujiangroad.com
北斗有巢氏 有巢氏北斗