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 = ""; } }
效果如图所示: