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

简介: 全网最全面的ASP.NET标准控件介绍及代码演示(上)

1. ASP.NET 页面处理事件


1.1. 事件与生命周期


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


image.png


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呈灰色,不可点击。


0a2653c851af460fa595bd959398a8f1.png


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>
...


可以生成出这样的页面布局


2d65d23f6d4748949b924e4057485923.png


2.2. WEB服务器控件


Web服务器控件是指在服务器上执行程序逻辑的组件,这个组件可以生成用户界面,也可以不包括用户界面。每个服务器控件都包含一些成员对象,以便开发人员调用,例如属性、事件、方法等。


在Visual Studio IDE中,可以切换到.aspx文件,然后在工具箱里找到相应控件,WEB服务器控件包括标准、数据、验证、导航、登录、WebParts、AJAX扩展、动态数据九项


0a2653c851af460fa595bd959398a8f1.png


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文本标签",这是一个十分迅速的过程


0a2653c851af460fa595bd959398a8f1.png


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>
...


效果如下图所示


0a2653c851af460fa595bd959398a8f1.png


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


登录按钮的点击事件效果如下图所示


0a2653c851af460fa595bd959398a8f1.png


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>
...


效果如下图所示


0a2653c851af460fa595bd959398a8f1.png



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>
...


效果如下所示


0a2653c851af460fa595bd959398a8f1.png


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)
{
    // 代码
}


效果如下图所示:


0a2653c851af460fa595bd959398a8f1.png


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


效果如图所示:


0a2653c851af460fa595bd959398a8f1.png


相关文章
|
22天前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
25 0
|
2月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码,总有一款适合您
15 0
|
3月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
24 0
|
3月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
40 0
|
3月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
17 0
|
3月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
39 0
|
3月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
30 1
|
3月前
|
XML 数据可视化 数据库
VB.NET—DataGridView控件教程详解
VB.NET—DataGridView控件教程详解
86 0
|
4月前
|
开发框架 前端开发 JavaScript
Asp.net动态加载用户自定义控件,并转换成HTML代码
Asp.net动态加载用户自定义控件,并转换成HTML代码
23 0
|
9月前
|
开发框架 JavaScript .NET
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...(续)
Asp.net 控件用法汇总-RadioButtonList、DropDownList、button、Checkbox...(续)
77 0

相关产品

  • 云迁移中心
  • 相关实验场景

    更多