全网最全面的ASP.NET标准控件介绍及代码演示（上）-阿里云开发者社区

1. ASP.NET 页面处理事件

1.1. 事件与生命周期

一个ASP.NET页面有自己的生命周期，它的生命周期是通过按照一定的顺序执行相应的事件来进行控制的

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

效果如图所示：

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