全网最全面的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


相关文章
|
3月前
|
API
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
【Azure 媒体服务】Media Service的编码示例 -- 创建缩略图子画面的.NET代码调试问题
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
45 8
|
27天前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
1月前
|
前端开发 JavaScript C#
CodeMaid:一款基于.NET开发的Visual Studio代码简化和整理实用插件
CodeMaid:一款基于.NET开发的Visual Studio代码简化和整理实用插件
|
1月前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
2月前
|
开发框架 JavaScript 前端开发
|
3月前
|
Kubernetes 监控 Devops
【独家揭秘】.NET项目中的DevOps实践:从代码提交到生产部署,你不知道的那些事!
【8月更文挑战第28天】.NET 项目中的 DevOps 实践贯穿代码提交到生产部署全流程,涵盖健壮的源代码管理、GitFlow 工作流、持续集成与部署、容器化及监控日志记录。通过 Git、CI/CD 工具、Kubernetes 及日志框架的最佳实践应用,显著提升软件开发效率与质量。本文通过具体示例,助力开发者构建高效可靠的 DevOps 流程,确保项目成功交付。
75 0
|
3月前
|
XML 开发框架 .NET
.NET框架:软件开发领域的瑞士军刀,如何让初学者变身代码艺术家——从基础架构到独特优势,一篇不可错过的深度解读。
【8月更文挑战第28天】.NET框架是由微软推出的统一开发平台,支持多种编程语言,简化应用程序的开发与部署。其核心组件包括公共语言运行库(CLR)和类库(FCL)。CLR负责内存管理、线程管理和异常处理等任务,确保代码稳定运行;FCL则提供了丰富的类和接口,涵盖网络、数据访问、安全性等多个领域,提高开发效率。此外,.NET框架还支持跨语言互操作,允许开发者使用C#、VB.NET等语言编写代码并无缝集成。这一框架凭借其强大的功能和广泛的社区支持,已成为软件开发领域的重要工具,适合初学者深入学习以奠定职业生涯基础。
102 1
|
3月前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)

热门文章

最新文章

相关实验场景

更多