ASP.Net教學 » ASP.NET基本控制元件

ASP.NET基本控制元件

在本章中，我們將討論和學習ASP.NET中可用的基本控制元件。

按鈕控制元件

ASP.NET提供了三種型別的按鈕控制元件：

  • 按鈕：它顯示矩形區域內的文字。
  • 連結按鈕：它顯示看起來像超連結的文字。
  • 影象按鈕：顯示影象。

當使用者點選一個按鈕時，會引發兩個事件：點選和命令。

按鈕控制的基本語法：

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="提交" / >

按鈕控制元件的常見屬性：

編號 屬性 描述
1 Text 顯示在按鈕上的文字，這僅適用於按鈕和連結按鈕控制元件。
2 ImageUrl 僅限影象按鈕控制元件，要為按鈕顯示的影象。
3 AlternateText 僅限影象按鈕控制元件，如果瀏覽器無法顯示影象，則顯示文字。
4 CausesValidation 確定使用者單擊按鈕時是否發生頁面驗證，預設值是true。
5 CommandName 當使用者單擊按鈕時傳遞給命令事件的字串值。
6 CommandArgument 當使用者單擊按鈕時傳遞給命令事件的字串值。
7 PostBackUrl 使用者單擊按鈕時請求的頁面的URL。

文字框和標籤

文字框控制元件通常用於接受來自使用者的輸入。 文字框控制元件可以接受一行或多行文字，具體取決於TextMode屬性的設定。

標籤控制元件提供了一種簡單的方法來顯示可以從一個頁面執行到下一個執行的文字。 如果要顯示不變的文字，請使用文字文字。

文字控制元件的基本語法：

<asp:TextBox ID="txtstate" runat="server" ></asp:TextBox>

文字框和標籤的常見屬性：

編號 屬性 描述
1 TextMode 指定文字框的型別。 SingleLine建立一個標準的文字框，MultiLIne建立一個接受多行文字的文字框，並且Password使輸入的字元被遮蔽。 預設是SingleLine。
2 Text 文字框的文字內容。
3 MaxLength 可以輸入文字框的最大字元數。
4 Wrap 它決定文字是否自動換行為多行文字框; 預設是True。
5 ReadOnly 確定使用者是否可以更改框中的文字; 預設是False，即使用者不能改變文字。
6 Columns 文字框的寬度以字元表示。實際寬度是根據用於文字輸入的字型確定的。
7 Rows 多行文字框的高度。 預設值是0，表示單行文字框。

標籤控制元件最常用的屬性是Text，這意味著標籤上顯示的文字。

核取方塊和無線電鈕

核取方塊顯示一個選項，使用者可以選中或取消選中，無線電鈕顯示一組選項，使用者只能從中選擇一個選項。

要建立一組無線電鈕，請為該組中的每個無線電鈕的GroupName屬性指定相同的名稱。 如果一個表單中需要多個組，則為每個組指定一個不同的組名稱。

如果希望最初顯示表單時選中核取方塊或無線電鈕，請將其「Checked」屬性設定為true。 如果組中的多個無線電鈕的Checked屬性設定為true，則只有最後一個被認為是true。

核取方塊的基本語法：

<asp:CheckBox ID= "chkoption" runat= "Server"> </asp:CheckBox>

無線電鈕的基本語法：

<asp:RadioButton ID= "rdboption" runat= "Server"> </asp: RadioButton>

核取方塊和無線電鈕的常用屬性：

編號 屬性 描述
1 Text 核取方塊或無線電鈕旁邊顯示的文字。
2 Checked 指定是否被選中，預設為false。
3 GroupName 控制元件所屬的組的名稱。

列表控制元件

ASP.NET提供了以下控制元件

  • 下拉選單
  • 列表框
  • 無線電鈕列表
  • 核取方塊列表
  • 專案符號列表

這些控制讓使用者從列表中選擇一個或多個專案。列表框和下拉選單包含一個或多個列表項。 這些列表可以通過程式碼或ListItemCollection編輯器載入。

列表框控制元件的基本語法：

<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"    OnSelectedIndexChanged="ListBox1_SelectedIndexChanged"></asp:ListBox>

下拉選單控制的基本語法：

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"   OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>

列表框和下拉選單的常見屬性列表：

編號 屬性 描述
1 Items 表示控制元件中專案的ListItem物件的集合。這個屬性返回一個ListItemCollection型別的物件。
2 Rows 指定框中顯示的專案數量。 如果實際列表包含比顯示更多的行，則會新增一個捲動條。
3 SelectedIndex 當前選定專案的索引。如果選擇多個專案，則選擇第一個專案的索引。 如果未選擇專案，則此屬性的值為-1。
4 SelectedValue 當前選擇的專案的值。如果選擇多個專案，則選擇第一個選定專案的值。如果未選擇專案，則此屬性的值為空字串("")。
5 SelectionMode 指示列表框是允許單個選擇還是多個選擇。

每個列表專案物件的通用屬性：

編號 屬性 描述
1 Text 顯示該專案的文字。
2 Selected 指示是否選擇該專案。
3 Value 與該專案關聯的字串值。

要注意：

  • 要使用下拉選單或列表框中的專案，可以使用控制元件的Items屬性。該屬性返回一個ListItemCollection物件，其中包含列表的所有專案。
  • 當使用者從下拉選單或列表框中選擇不同的專案時，引發SelectedIndexChanged事件。

ListItemCollection

ListItemCollection物件是ListItem物件的集合。每個ListItem物件表示列表中的一個專案。ListItemCollection中的專案從0開始編號。

當使用字串載入列表框中的專案時，例如：lstcolor.Items.Add("Blue")，則列表專案的Text和Value屬性都將設定為指定的字串值。要設定它不同，必須建立一個列表專案物件，然後將該專案新增到集合。

ListItemCollection編輯器用於將專案新增到下拉選單或列表框中。這用於建立專案的靜態列表。 要顯示集合編輯器，請從智慧標記選單中選擇編輯專案，或選擇控制元件，然後單擊屬性視窗中的專案屬性中的省略號按鈕。

ListItemCollection的通用屬性：

編號 屬性 描述
1 Item(integer) 表示指定索引處的專案的ListItem物件。
2 Count 集合中的專案數量。

ListItemCollection的常用方法：

編號 方法 描述
1 Add(string) 在集合的末尾新增一個新專案，並將字串引數分配給專案的Text屬性。
2 Add(ListItem) 在集合的末尾新增一個新專案。
3 Insert(integer, string) 在集合中的指定索引位置插入專案，並將字串引數分配給專案的文字屬性。
4 Insert(integer, ListItem) 將專案插入集合中指定的索引位置。
5 Remove(string) 刪除文字值與字串相同的專案。
6 Remove(ListItem) 刪除指定的專案。
7 RemoveAt(integer) 以整數形式刪除指定索引處的專案。
8 Clear 刪除集合中的所有專案。
9 FindByValue(string) 返回值與字串相同的專案。
10 FindByValue(Text) 返回文字與字串相同的專案。

無線電鈕列表和核取方塊列表

無線電鈕列表顯示了一個互斥選項列表。 核取方塊列表顯示了獨立選項的列表。 這些控制元件包含可以通過控制元件的Items屬性參照的ListItem物件的集合。

無線電鈕列表的基本語法：

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" 
   OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>

核取方塊列表的基本語法：

<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" 
   OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>

核取方塊和無線電鈕列表的常用屬性：

編號 屬性 描述
1 RepeatLayout 此屬性指定在呈現時格式化列表時是使用表標記還是正常的html流。預設值是Table。
2 RepeatDirection 它規定了重複控制的方向，可用的值是Horizontal和Vertical。預設是Vertical。
3 RepeatColumns 它指定重復控制元件時要使用的列數。預設為0。

專案符號列表和編號列表

專案符號列表控制元件建立專案符號列表或編號列表。 這些控制元件包含可以通過控制元件的Items屬性參照ListItem物件的集合。

專案符號列表的基本語法：

<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>

專案符號列表的通用屬性：

編號 屬性 描述
1 BulletStyle 此屬性指定專案符號或編號的樣式和外觀。
2 RepeatDirection 它規定了重複控制的方向。可用的值是Horizontal和Vertical。 預設是Vertical。
3 RepeatColumns 它指定重復控制元件時要使用的列數。 預設為0。

超連結控制元件

HyperLink控制元件就像HTML <a>元素。

超連結控制元件的基本語法：

<asp:HyperLink ID="HyperLink1" runat="server">
   HyperLink
</asp:HyperLink>

它具有以下重要屬性：

編號 屬性 描述
1 ImageUrl 要由控制元件顯示的影象的路徑。
2 NavigateUrl 目標連結網址。
3 Text 要顯示作為連結的文字。
4 Target 載入連結頁面的視窗或框架。

影象控制元件

影象控制元件用於在網頁上顯示影象，或者如果影象不可用，則使用其他文字。

影象控制元件的基本語法：

<asp:Image ID="Image1" runat="server">

它具有以下重要屬性：

編號 屬性 描述
1 AlternateText 在沒有影象的情況下顯示替代文字。
2 ImageAlign 控制元件的對齊選項。
3 ImageUrl 控制元件要顯示的影象的路徑。