全网最全面的ASP.NET标准控件介绍及代码演示

白水baishui 2020-03-29 23:04:28

1568

原力计划

分类专栏： # ASP.NET

最后发布:2020-03-29 23:04:28首次发布:2020-03-29 23:04:28

本文链接：https://blog.csdn.net/baishuiniyaonulia/article/details/105155638

版权

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;
            }
        }
    }
}