全網最全面的ASP.NET標準控件介紹及代碼演示

1. ASP.NET 頁面處理事件

1.1. 事件與生命週期

一個ASP.NET頁面有自己的生命週期，它的生命週期是通過按照一定的順序執行相應的事件來進行控制的

頁面處理事件	說明
PreInit事件	Prelnit事件是一個事件早期可以訪問的頁生命週期。在Prelnit 事件之後，如果有個性化設置信息和頁面主題，則會進行加載
Init事件	當服務器控件初始化時執行，是其生命週期的第一步
Load事件	當服務器控件加載到Page對象時執行
控件事件	頁面中的控件相應事件，例如Button控件的Click事件

1.2. IsPostBack屬性

IsPostBack屬性用於獲取一個值，該值指示該頁是否是Post回發(PostBack)的狀態，簡單點說就是判斷當前頁面的表單(form)請求是否是首次。IsPostBack只有在第一次請求的時候是false，其它時候都是true。

在ASP.NET框架內部有很多的場景需要判斷IsPostBack，這是一個非常常用的屬性。

語法：

public bool IsPostBack(get;)

例如：

// 在.aspx文件中添加一個Button，ID=Button1
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

// 在對應的.aspx.cs文件中添加如下判斷語句：
// 頁面是第一次請求時Button1可點擊
// 頁面非第一次請求時Button1不可點擊
protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
        Button1.Enabled = false;
    else
        Button1.Enabled = true;
}

運行效果如下圖所示，左圖爲第一次請求，此時Button可點擊；右圖爲非第一次請求，此時Button呈灰色，不可點擊。

2. 服務器控件

2.1. HTML服務器控件

HTML服務器控件用於將傳統ASP頁面轉換爲ASP.NET頁面，這類控件實質上是使用HTML元素對ASP.NET頁面進行控制。

在Visual Studio IDE中，可以切換到.aspx文件，然後在工具箱->HTML裏找到相應的HTML控件

例如如下HTML控件組合

...
<body>
    <form id="form1" runat="server">
        <!-- 一個textarea -->
        <textarea id="TextArea1" rows="2">
        </textarea>
        <div>
            <!-- 一個text -->
            <input id="Text1" type="text" />
            <!-- 一個button -->
            <input id="Button1" type="button" value="button" />
        </div>
        <div>
            <!-- 一個表單重置按鈕 -->
            <input id="Reset1" type="reset" value="reset" />
            <!-- 一個表單提交按鈕 -->
            <input id="Submit1" type="submit" value="submit" />
        </div>
    </form>    
</body>
...

可以生成出這樣的頁面佈局

2.2. WEB服務器控件

Web服務器控件是指在服務器上執行程序邏輯的組件，這個組件可以生成用戶界面，也可以不包括用戶界面。每個服務器控件都包含一些成員對象，以便開發人員調用，例如屬性、事件、方法等。

在Visual Studio IDE中，可以切換到.aspx文件，然後在工具箱裏找到相應控件，WEB服務器控件包括標準、數據、驗證、導航、登錄、WebParts、AJAX擴展、動態數據九項

3. 文本類型控件

3.1. Label控件

Label控件又可以叫做標籤控件，主要是用來在瀏覽器上顯示文本內容

在Visual Studio 2019 開發環境中，Label控件可以在工具箱->標準->Label找到

例如下例，在.apsx文件中給Label設置默認值"文本"，然後在.aspx.cs中動態地改變Label的值

...
// .aspx
<body>
    <div>
    	<!-- 一個label -->
        <asp:Label ID="Label1" runat="server" Text="文本"></asp:Label>
    </div>
</body>

// .aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = "ASP.NET文本標籤";
}
...

運行時，Label1首先會顯示"文本"，然後在執行到Page_Load()時會將Label1的值改變爲"ASP.NET文本標籤"，這是一個十分迅速的過程

3.2. TextBox控件

在Web頁面中，經常使用文本框控件(TextBox) 來接受用戶的輸入信息，包括文本、數字和日期等。

默認情況下，文本框控件是一個單行的文本框，用戶只能輸入一行內容，但是通過設置它的TextMode屬性，可以將文本框改爲允許輸入多行文本或者輸入密碼等等形式。

例如

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="單行文本框"></asp:Label>
            <!-- 單行文本框 -->
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="多行文本框"></asp:Label>
            <!-- 多行文本框 -->
            <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="密碼文本框"></asp:Label>
            <!-- 密碼文本框 -->
            <asp:TextBox ID="TextBox3" runat="server" TextMode="Password"></asp:TextBox>
        </div>
    </form>
</body>
...

效果如下圖所示

4. 按鈕類型控件

4.1. Button控件

Button控件是一個命令按鈕控件，可以將Web頁面回送到服務器，也可以處理控件命令事件。Button控件最重要的是Click事件，該事件在單擊Button控件時發生。

例如，創建兩個Button，"登錄"和重置。

// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密碼"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="登錄" OnClick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="重置" OnClick="Button2_Click" />
        </div>
    </form>
</body>
...

// .aspx.cs文件
// 登錄Button的Click事件
protected void Button1_Click(object sender, EventArgs e)
{
	// 彈出窗口，提示登錄成功
    Response.Write("<script>alert('登錄成功')</script>");
}

protected void Button2_Click(object sender, EventArgs e)
{
	// 將兩個TextBox的內容置爲空
    TextBox1.Text = "";
    TextBox2.Text = "";

}

登錄按鈕的點擊事件效果如下圖所示

4.2. ImageButton控件

ImageButton控件爲圖像按鈕控件，它在功能上和Button控件相同，只是在呈現外觀上表現爲圖像。

ImageButton的兩個重要屬性：

lmageUrl屬性，設置在ImageButton控件中顯示的圖像的地址
PostBackUrl屬性，設置單擊ImageButton控件時從當前頁發送到的網頁的地址

因此在使用ImageButton控件時通常都需要兩個網頁，一個是當前頁，一個是跳轉到的頁面

例如以下代碼，ImageUrl="~/timg.jpg" PostBackUrl="~/WebForm2.aspx"，即會顯示timg.jpg，點擊後會跳轉到WebForm2.aspx：

...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:ImageButton ID="ImageButton1" runat="server" Height="51px" ImageUrl="~/timg.jpg" PostBackUrl="~/WebForm2.aspx" Width="51px" />          
        </div>            
    </form>
</body>
...

效果如下圖所示

5. 鏈接類型控件

5.1. HyperLink控件

HyperLink控件又稱超鏈接控件，該控件在功能上和HTML的<a href="">元素相似。HyperLink控件與大多數Web服務器控件不同，當用戶單擊HyperLink控件時並不會在服務器代碼中引發事件，它只實現導航功能。

它有三個主要屬性：

Text屬性，設置HyperLink控件的文本標題
NavigateURL屬性，設置點擊HyperLink控件鏈接到的url
Target屬性，設置單擊HyperLink控件時鏈接到的Web頁內容的框架，有_blank、_parent、search、_self、_top五個框架類型可供選擇

例如下面的代碼，NavigateUrl="~/WebForm2.aspx" Target="_self"，即點擊時在自身窗口中打開WebForm2.aspx

...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/WebForm2.aspx" Target="_self">超鏈接</asp:HyperLink>
        </div>            
    </form>
</body>
...

效果如下所示

5.2. LinkButton控件

LinkButton控件又稱鏈接按鈕控件，該控件在功能上與Button控件相似；但在呈現樣式上與HperLink相似，LinkButton控件以超鏈接的形式顯示。

它有一個主要屬性和一個主要事件：

PostBackURL屬性，設置單擊LinkButton控件時從當前頁發送到的網頁的URL
Click事件，設置單擊該超鏈接時發生的事件

例如下面的代碼，OnClick="LinkButton1_Click" PostBackUrl="~/WebForm2.aspx"，即點擊該LinkButton後，頁面會跳轉到WebForm2.aspx，並且執行LinkButton1_Click()函數的代碼。

// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" PostBackUrl="~/WebForm2.aspx">鏈接按鈕</asp:LinkButton>
        </div>            
    </form>
</body>
...

// .aspx.cs文件
protected void LinkButton1_Click(object sender, EventArgs e)
{
    // 代碼
}

效果如下圖所示：

6. 選擇類型控件

6.1. RadioButton控件

RadioButton控件是一種單選按鈕控件，用戶可以在頁面中添加一組RadioButton控件，通過爲所有的單選按鈕分配相同的GroupName (組名) ，來強制執行從給出的所有選項集合中僅選擇一個選項的功能。

它有兩個主要屬性和一個主要事件：

Checked屬性，判斷單選按鈕的選中狀態
GroupName屬性，給單選按鈕分組，同一個組的單選按鈕，最多只能有一個處於選中狀態
CheckedChanged事件，響應單選按鈕選中狀態更改時的事件

例如下面的代碼

// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div><asp:Label ID="Label1" runat="server" Text="Label">選擇用戶登錄角色</asp:Label></div>      
        <div><asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged" Text="管理員" AutoPostBack="True" GroupName="role" /></div>    
        <div><asp:RadioButton ID="RadioButton2" runat="server" OnCheckedChanged="RadioButton2_CheckedChanged" Text="教師" AutoPostBack="True" GroupName="role" /></div>    
        <div><asp:RadioButton ID="RadioButton3" runat="server" OnCheckedChanged="RadioButton3_CheckedChanged" Text="學生" AutoPostBack="True" GroupName="role" /></div> 
        <div><asp:RadioButton ID="RadioButton4" runat="server" OnCheckedChanged="RadioButton4_CheckedChanged" Text="遊客" AutoPostBack="True" GroupName="role" /></div> 
        <div>
            <asp:Label ID="Label2" runat="server" Text="你選擇的角色是："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...

// .aspx.cs文件
protected void RadioButton1_CheckedChanged(object sender, EventArgs e){
    if (RadioButton1.Checked){
        Label3.Text = RadioButton1.Text;
    }else {
        Label3.Text = "";
    }
}

protected void RadioButton2_CheckedChanged(object sender, EventArgs e){
    if (RadioButton2.Checked){
        Label3.Text = RadioButton2.Text;
    }else{
        Label3.Text = "";
    }
}

protected void RadioButton3_CheckedChanged(object sender, EventArgs e){
    if (RadioButton3.Checked){
        Label3.Text = RadioButton3.Text;
    }else{
        Label3.Text = "";
    }
}

protected void RadioButton4_CheckedChanged(object sender, EventArgs e){
    if (RadioButton4.Checked){
        Label3.Text = RadioButton4.Text;
    }else{
        Label3.Text = "";
    }
}

效果如圖所示：

6.2. RadioButtonList控件

RadioButtonList控件表示封裝的一組單選按鈕控件的列表控件，可以簡單的看做是自動分組的RadioButton。

它有兩個主要屬性和一個主要事件：

ltems屬性，獲取列表控件項的集合
SelectedIndex屬性，獲取選中項的索引位置
SelectedIndexChanged事件，在單選按鈕組中的選定或取消選定時觸發

例如下面的代碼

// .apsx文件
...
<body>
   <form id="form1" runat="server" aria-live="off">
        <div><asp:Label ID="Label1" runat="server" Text="Label">選擇用戶登錄角色</asp:Label</div>      
        <div>
            <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                <asp:ListItem>管理員</asp:ListItem>
                <asp:ListItem>教師</asp:ListItem>
                <asp:ListItem>學生</asp:ListItem>
                <asp:ListItem>遊客</asp:ListItem>
            </asp:RadioButtonList>
        </div> 
        <div>
            <asp:Label ID="Label2" runat="server" Text="你選擇的角色是："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...

// .aspx.cs文件
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e){
    Label3.Text = RadioButtonList1.SelectedItem.Text;
}

效果如圖所示，與上圖RadioButton效果一致：

6.3. CheckBox控件

CheckBox控件用於在頁面上創建複選框。如果將複選框分組，則可以使用這些複選框代表一系列不互斥的選項，並可以同時選擇多個複選框。

它有一個主要屬性和一個主要事件：

Checked屬性，指示是否已選中CheckBox控件
CheckedChanged事件，響應複選框的選中狀態更改事件

如下面代碼：

// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label">選擇要買的書</asp:Label>
        </div>      
        <div><asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" Text="面向百度絕症治療方案" /></div> 
        <div><asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged" Text="家豬優選優育指南" /></div> 
        <div><asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox3_CheckedChanged" Text="知乎裝逼寶典" /></div> 
        <div><asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox4_CheckedChanged" Text="微博噴子話術大全" /></div> 
        <div>
            <asp:Label ID="Label2" runat="server" Text="你選擇的角色是："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...

// .aspx.cs文件
protected void CheckBox1_CheckedChanged(object sender, EventArgs e){
    if (CheckBox1.Checked){
        if (Label3.Text.IndexOf(CheckBox1.Text) < 0) {
            Label3.Text += (CheckBox1.Text + ";");
        }
    }else {
        Label3.Text = Label3.Text.Replace(CheckBox1.Text + ";", "");
    }
}

protected void CheckBox2_CheckedChanged(object sender, EventArgs e){
    if (CheckBox2.Checked){
        if (Label3.Text.IndexOf(CheckBox2.Text) < 0){
            Label3.Text += (CheckBox2.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox2.Text + ";", "");
    }
}

protected void CheckBox3_CheckedChanged(object sender, EventArgs e){
    if (CheckBox3.Checked){
        if (Label3.Text.IndexOf(CheckBox3.Text) < 0){
            Label3.Text += (CheckBox3.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox3.Text + ";", "");
    }
}

protected void CheckBox4_CheckedChanged(object sender, EventArgs e){
    if (CheckBox4.Checked){
        if (Label3.Text.IndexOf(CheckBox4.Text) < 0){
            Label3.Text += (CheckBox4.Text + ";");
        }
    }else{
        Label3.Text = Label3.Text.Replace(CheckBox4.Text + ";", "");
    }
}

效果如圖所示：

6.4. CheckBoxList控件

CheckBoxList控件表示封裝的一組複選框控件的列表控件。

它有一個主要屬性和一個主要事件

ltems屬性，列表控件項的集合
SelectedindexChanged事件，在複選框中的選項選定或取消選定時觸發

例如下面代碼：

// .aspx文件
...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label">選擇要買的書</asp:Label>
        </div>      
        <div>
            <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                <asp:ListItem>面向百度絕症治療方案</asp:ListItem>
                <asp:ListItem>家豬優選優育指南</asp:ListItem>
                <asp:ListItem>知乎裝逼寶典</asp:ListItem>
                <asp:ListItem>微博噴子話術大全</asp:ListItem>
            </asp:CheckBoxList>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="你選擇的書有："></asp:Label>
            <asp:Label ID="Label3" runat="server"></asp:Label>
        </div>  
    </form>
</body>
...

// .aspx.cs文件
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e){
    String books = "";
    foreach (ListItem item in CheckBoxList1.Items) {
        if (item.Selected) {
            books += item.Text + ";";
        }
    }
    Label3.Text = books;
}

效果如圖所示，與上圖CheckBox效果一致：

6.5. ListBox控件

ListBox控件用於顯示一組列表項，用戶可以從中選擇一或多項，如果列表項的總數超出可以顯示的項數，那麼ListBox控件會自動添加滾動條。

它有四個主要功能，通過2個方法和7個屬性實現

添加和移除項，Items屬性的Add()方法和Remove()方法
選擇項，SelectedIndex、SelectedValue和Selectedltem屬性
選擇多項，SelectionMode屬性
數據綁定，DataSource、DataTextField和DataValueField屬性

例如下面代碼，模擬了一個用戶授權模塊

// .aspx文件
...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            display:inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server" aria-live="off">
        <div class="auto-style1">        	
            <div style="float:left"> 
            	<!-- 一個ListBox -->
                <asp:ListBox ID="ListBox1" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox>
            </div>                
            <div style="float:left; text-align:center">                   
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="&gt;" /><br />
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="&lt;" />
            </div>
            <div style="float:left">
            	<!-- 一個ListBox -->
                <asp:ListBox ID="ListBox2" runat="server" Height="105px" Width="100px" AutoPostBack="True" SelectionMode="Multiple"></asp:ListBox>
            </div>
        </div>
    </form>
</body>
...

// .aspx.cs文件
protected void Page_Load(object sender, EventArgs e){
    if (!IsPostBack){
        ListBox1.Items.Add("管理員");
        ListBox1.Items.Add("教師");
        ListBox1.Items.Add("學生");
        ListBox1.Items.Add("遊客");
	}
}
       
protected void Button1_Click(object sender, EventArgs e){
    //獲取列表框的選項數
    int count = ListBox1.Items.Count;
    int index = 0;
    //循環判斷各個項的選中狀態
    for (int i = 0; i < count; i++){
        ListItem Item = ListBox1.Items[index];
        //如果選項爲選中狀態從源列表框中刪除並添加到目的列表框中
        if (ListBox1.Items[index].Selected == true){
            ListBox1.Items.Remove(Item);
            ListBox2.Items.Add(Item);
            //將當前選項索引值減1
            index--;
        }
        //獲取下一個選項的素引值
        index++;
    }            
}

protected void Button2_Click(object sender, EventArgs e){
    //獲取列表框的選項數
    int count = ListBox2.Items.Count;
    int index = 0;
    //循環判斷各個項的選中狀態  
    for (int i = 0; i < count; i++){
        ListItem Item = ListBox2.Items[index];
        //如果選項爲選中狀態從源列表框中刪除並添加到目的列表框中
        if (ListBox2.Items[index].Selected == true){
            ListBox2.Items.Remove(Item);
            ListBox1.Items.Add(Item);
            //將當前選項索引值減1
            index--;
        }
        //獲取下一個選項的素引值
        index++;
    }            
}

效果如圖所示

6.6. DropDownList控件

DropDownList控件與ListBox控件的使用很類似，但是DropDownList控件只允許每次從列表中選擇一項，而且只在框中顯示選定項。

它有一個主要事件：

SelectedIndexChanged事件，在DropDownList中的選項選定時觸發

例如下面的代碼，實現了一個選擇省份的功能

// .aspx文件
...
<body>
	<form id="form1" runat="server" aria-live="off">
	   <div>
	       <asp:Label ID="Label1" runat="server" Text="Label">請選擇所在省份</asp:Label>
	   </div>
	   <div>
	       <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
	           <asp:ListItem>湖北</asp:ListItem>
	           <asp:ListItem>河南</asp:ListItem>
	           <asp:ListItem>江西</asp:ListItem>
	           <asp:ListItem>湖南</asp:ListItem>
	           <asp:ListItem>安徽</asp:ListItem>
	       </asp:DropDownList>
	       <asp:Label ID="Label2" runat="server" Text="Label">所在省份:</asp:Label>
	       <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
	   </div>
	</form>
</body>
...

// .aspx.cs文件
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
	String province = DropDownList1.SelectedValue.ToString();
    Label3.Text = province;
}

效果如圖所示：

7. Image圖像控件

Image控件是一個基於HTML img元素的控件，主要用來在網頁上顯示圖像。

它有三個常用屬性：

屬性	說明
AlternateText	設置當圖像不可用時，Image控件中顯示的替換文本
ImageAlign	設置Image控件相對於網頁上其他元素的對齊方式
ImageUrl	設置Image控件所顯示的圖像的Url

例如下面代碼，設置AlternateText爲“圖像描述”，這時，若圖像沒有加載出來，那就默認顯示“圖像描述”四個字：

...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" AlternateText="圖像描述" />
        </div>            
    </form>
</body>
...

下面代碼設置了ImageUrl，這時網頁上顯示該Image控件時，就會顯示ImageURL關聯的圖像：

...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" AlternateText="圖像描述" Height="175px" Width="175px" />
        </div>            
    </form>
</body>
...

下面代碼將Image控件的ImageAlign設置爲了Right(右對齊)，這時，圖像會顯示在瀏覽器的右端

...
<body>
    <form id="form1" runat="server" aria-live="off">
        <div>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/timg.jpg" ImageAlign="Right" AlternateText="圖像描述" Height="175px"   Width="175px" />
        </div>            
    </form>
</body>
...

8. Panel容器控件

Panel控件是一個容器控件，它可以當作靜態文本和其他控件的父級控件，用來把靜態文本或其他控件裝在裏面。

它有兩個主要屬性：

GroupingText屬性，設置面板控件中包含的控件組的標題
ScrollBars屬性，設置Panel控件中滾動條的可見性和位置，有Horizontal、Vertical、Both、Auto、None五個枚舉值可供選擇，一般情況下使用Auto即可

例如下面的代碼，將三個Label、三個TextBox和一個Button放在了一個Panel容器中：

...
<body>
    <form id="form1" runat="server">
    <div>
    	<!-- 一個panel容器 -->
        <asp:Panel ID="Panel1" runat="server" Height="150px" Width="215px" ScrollBars="Both">
            <asp:Label ID="Label1" runat="server" Text="Label">用戶名:</asp:Label>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />                
            <asp:Label ID="Label2" runat="server" Text="Label">密碼：</asp:Label>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <br />                
            <asp:Label ID="Label3" runat="server" Text="Label">手機號：</asp:Label>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="註冊" />
        </asp:Panel>
    </div>            
    </form>
</body>
...

效果如圖所示，左圖是一個足夠大的panel容器，可以顯示裏面所有的控件；右圖高度不夠，因此會顯示豎向的滾動條

9. FileUpload文件上傳控件

FileUpload控件的主要功能是向指定目錄上傳文件，這個控件包括一個文本和一個瀏覽按鈕。用戶可以在文本框中輸入完整的文件路徑，或者通過“瀏覽按鈕”瀏覽並選擇需要上傳的文件。

FileUpload控件不能自動上傳文件，必須設置相關的事件處理程序，並在程序中實現文件上傳。

它有四個主要屬性和一個主要方法

成員	說明
FileBytes屬性	獲取上傳文件的字節數組
FileContent屬性	獲取指向上傳文件的Stream對象
FileName屬性	獲取上傳文件在客戶端的文件名稱
PostedFile屬性	獲取一個用於上傳文件的HttpPostedFile對象，這個對象可以獲取上傳的文件的相關屬性
SaveAs方法	將文件保存到服務器上的指定路徑下

如下例代碼：

// .aspx文件
...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="Button1" runat="server" Text="文件上傳" OnClick="Button1_Click1" />
        </div> 
        <div>
            <asp:Image ID="Image1" runat="server" />
        </div>
        <div>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
    </form>
</body>
...

// .aspx.cs文件
protected void Button1_Click1(object sender, EventArgs e){
    bool fileIsValid = false;
    //如果確認了上傳文件，則判斷文件類型是否符合要求
    if (this.FileUpload1.HasFile){
        //獲取上傳文件的後綴
        String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
        String[] restrictExtension = { ".gif' ", ".jpg", ".bmp", ".png" };
        //判斷文件類型是否符合要求
        for (int i = 0; i < restrictExtension.Length; i++){
            if (fileExtension == restrictExtension[i]){
                fileIsValid = true;
            }
        }
        //如果文件類型符合要求,調用SaveAs方法實現上傳,並顯示相關信息
        if (fileIsValid == true){
            try{
                this.Image1.ImageUrl = "/images/" + FileUpload1.FileName;
                this.FileUpload1.SaveAs(Server.MapPath("~/images/") + FileUpload1.FileName);
                this.Label1.Text = "文件上傳成功";
                this.Label1.Text += "<Br/>";

                this.Label1.Text += "<li>" + "原文件路徑:" + this.FileUpload1.PostedFile.FileName;
                this.Label1.Text += "<Br/>";

                this.Label1.Text += "<li>" + "文件大小:" + this.FileUpload1.PostedFile.ContentLength + "字節";
                this.Label1.Text += "<Br/>";

                this.Label1.Text += "<li>" + "文件類型:" + this.FileUpload1.PostedFile.ContentType;
            }
            catch (Exception ex) {
                this.Label1.Text = "無法上傳文件" + ex.Message;
            }
        }
    }
}

效果如下圖，上圖是原始狀態，下圖是已上傳文件後的狀態

全網最全面的ASP.NET標準控件介紹及代碼演示

文章目錄

1. ASP.NET 頁面處理事件

1.1. 事件與生命週期

1.2. IsPostBack屬性

2. 服務器控件

2.1. HTML服務器控件

2.2. WEB服務器控件

3. 文本類型控件

3.1. Label控件

3.2. TextBox控件

4. 按鈕類型控件

4.1. Button控件

4.2. ImageButton控件

5. 鏈接類型控件

5.1. HyperLink控件

5.2. LinkButton控件

6. 選擇類型控件

6.1. RadioButton控件

6.2. RadioButtonList控件

6.3. CheckBox控件

6.4. CheckBoxList控件

6.5. ListBox控件

6.6. DropDownList控件

7. Image圖像控件

8. Panel容器控件

9. FileUpload文件上傳控件

ASP.NET 用戶和角色管理附加代碼詳解

軟件工程導論—軟件測試

用Python模擬一個區域廣播通信網絡 2020年4月認證杯數學建模比賽代碼

軟件工程導論—詳細設計

軟件工程導論—總體設計

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結