好的,阿杰,我给你整理一份 ASP.NET 常用控件总结,按照控件类型、用途、常用属性和实战技巧分类,方便你快速查阅和开发使用。
一、HTML 服务器控件(Web Forms 传统控件)
控件 | 类型 | 常用属性 | 功能说明 | 示例 |
---|---|---|---|---|
TextBox | 输入控件 | Text, MaxLength, ReadOnly, TextMode | 单行、多行、密码输入 | <asp:TextBox ID="txtName" runat="server" TextMode="SingleLine" /> |
Label | 输出控件 | Text, CssClass | 显示文字、绑定动态数据 | <asp:Label ID="lblMsg" runat="server" Text="Hello" /> |
Button | 按钮控件 | Text, OnClick, CssClass | 提交或触发事件 | <asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" /> |
LinkButton | 超链接按钮 | Text, OnClick | 带样式的按钮,触发服务器事件 | <asp:LinkButton ID="lnkBtn" runat="server" Text="点击" OnClick="lnkBtn_Click" /> |
ImageButton | 图片按钮 | ImageUrl, OnClick | 图片形式的按钮 | <asp:ImageButton ID="imgBtn" runat="server" ImageUrl="btn.png" OnClick="imgBtn_Click" /> |
CheckBox | 复选框 | Checked, Text | 单选复选 | <asp:CheckBox ID="chkAgree" runat="server" Text="同意条款" /> |
RadioButton | 单选按钮 | GroupName, Checked, Text | 多选组单选 | <asp:RadioButton ID="rbYes" runat="server" GroupName="Gender" Text="男" /> |
DropDownList | 下拉列表 | Items, SelectedValue, AutoPostBack | 数据选择、可绑定数据源 | <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="true" /> |
ListBox | 列表框 | Items, SelectionMode | 多选或单选列表 | <asp:ListBox ID="lstHobby" runat="server" SelectionMode="Multiple" /> |
CheckBoxList | 复选列表 | Items, RepeatColumns | 多项选择 | <asp:CheckBoxList ID="cblHobby" runat="server" RepeatColumns="2" /> |
RadioButtonList | 单选列表 | Items, RepeatDirection | 单选组列表 | <asp:RadioButtonList ID="rblGender" runat="server" RepeatDirection="Horizontal" /> |
HiddenField | 隐藏控件 | Value | 保存隐藏数据,常用于页面状态 | <asp:HiddenField ID="hfID" runat="server" /> |
二、数据绑定控件
控件 | 功能 | 常用属性 | 备注 |
---|---|---|---|
GridView | 表格显示数据 | DataSource, AutoGenerateColumns, OnRowDataBound | 支持分页、排序、模板列 |
Repeater | 自定义模板列表 | DataSource, ItemTemplate | 控制灵活、轻量,不自带分页 |
DataList | 类似 Repeater,可布局 | DataSource, ItemTemplate, RepeatColumns | 可横向/纵向排列 |
ListView | 灵活列表控件 | DataSource, LayoutTemplate, ItemTemplate | 支持分页、排序、分组,更现代 |
FormView | 单条记录详细显示 | DataSource, ItemTemplate | 支持增删改操作模板 |
三、导航与容器控件
控件 | 功能 | 常用属性 | 示例 |
---|---|---|---|
Panel | 容器控件 | Visible, CssClass | 分组控件,控制可见性 |
PlaceHolder | 占位控件 | Controls | 动态加载控件的容器 |
MultiView / View | 多视图切换 | ActiveViewIndex | 实现选项卡式界面 |
Menu | 菜单导航 | DataSource, Orientation | 可绑定站点地图 |
TreeView | 树型导航 | DataSource, ShowExpandCollapse | 支持层级展示 |
四、验证控件(Validation Controls)
控件 | 功能 | 常用属性 | 示例 |
---|---|---|---|
RequiredFieldValidator | 必填项 | ControlToValidate, ErrorMessage | <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="姓名必填" /> |
CompareValidator | 比较验证 | ControlToValidate, ControlToCompare, Operator | 比较两个控件值 |
RangeValidator | 范围验证 | MinimumValue, MaximumValue, Type | 数值/日期范围校验 |
RegularExpressionValidator | 正则验证 | ValidationExpression | 邮箱、手机号、格式校验 |
CustomValidator | 自定义验证 | OnServerValidate | 可以自定义验证逻辑 |
ValidationSummary | 显示汇总错误 | ShowMessageBox, ShowSummary | 页面顶部/弹窗汇总显示 |
五、AJAX 与增强控件
- ScriptManager
- 必须添加在页面,用于启用 ASP.NET AJAX。
- UpdatePanel
- 包裹控件,实现局部刷新,不刷新整个页面。
- UpdateProgress
- 显示局部刷新时的等待提示。
- Timer
- 定时触发事件,可结合 UpdatePanel 使用。
六、实用技巧总结
- 选择控件
- 静态显示 → Label
- 数据输入 → TextBox、DropDownList
- 数据展示 → GridView / Repeater / ListView
- 布局优化
- 尽量使用 CSS + Panel/Div 进行布局,减少表格布局。
- 数据绑定
- 推荐使用
DataSource
+DataBind()
,方便绑定数据库、集合或 XML。
- 推荐使用
- 事件处理
OnClick
,OnSelectedIndexChanged
,OnRowDataBound
等事件绑定后端 C# 方法。
- 验证逻辑
- 优先使用验证控件,确保前后端双重校验。
- 局部刷新
- UpdatePanel + ScriptManager 可减少页面闪烁,提高用户体验。
好的,阿杰,我帮你整理了一份 ASP.NET 常用控件速查表 + 可直接运行示例,内容涵盖表单控件、数据绑定控件、验证控件和 AJAX 示例,方便你直接复制到项目中练习。
下面是完整示例代码(Web Forms,.aspx + 后台 C#):
1️⃣ Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASP.NET 常用控件示例</title>
<style>
.error { color:red; }
.panel { border:1px solid #ccc; padding:10px; margin:10px 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>表单控件示例</h2>
<div class="panel">
姓名:<asp:TextBox ID="txtName" runat="server" /><br /><br />
性别:
<asp:RadioButtonList ID="rblGender" runat="server">
<asp:ListItem>男</asp:ListItem>
<asp:ListItem>女</asp:ListItem>
</asp:RadioButtonList><br />
爱好:
<asp:CheckBoxList ID="cblHobby" runat="server">
<asp:ListItem>读书</asp:ListItem>
<asp:ListItem>运动</asp:ListItem>
<asp:ListItem>旅行</asp:ListItem>
</asp:CheckBoxList><br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" /><br /><br />
<asp:Label ID="lblMsg" runat="server" Text="" ForeColor="Green"></asp:Label>
</div>
<h2>验证控件示例</h2>
<div class="panel">
邮箱:<asp:TextBox ID="txtEmail" runat="server" /><br />
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
ErrorMessage="邮箱必填" CssClass="error" Display="Dynamic" /><br />
<asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail"
ValidationExpression="\w+@\w+\.\w+" ErrorMessage="邮箱格式不正确" CssClass="error" Display="Dynamic" /><br /><br />
<asp:Button ID="btnValidate" runat="server" Text="验证" /><br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="error" />
</div>
<h2>数据绑定控件示例</h2>
<div class="panel">
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="用户名" DataField="Username" />
<asp:BoundField HeaderText="年龄" DataField="Age" />
</Columns>
</asp:GridView>
</div>
<h2>AJAX 局部刷新示例</h2>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" Text=""></asp:Label><br />
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
2️⃣ Default.aspx.cs(后台 C#)
using System;
using System.Collections.Generic;
using System.Web.UI;
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 初始化数据绑定控件
var users = new List<User>()
{
new User(){ Username="张三", Age=18 },
new User(){ Username="李四", Age=22 },
new User(){ Username="王五", Age=30 }
};
gvUsers.DataSource = users;
gvUsers.DataBind();
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string name = txtName.Text;
string gender = rblGender.SelectedValue;
string hobbies = string.Join(",", cblHobby.Items.Cast<System.Web.UI.WebControls.ListItem>()
.Where(i => i.Selected).Select(i => i.Text));
lblMsg.Text = $"姓名:{name},性别:{gender},爱好:{hobbies}";
}
protected void Timer1_Tick(object sender, EventArgs e)
{
lblTime.Text = "当前时间:" + DateTime.Now.ToString("HH:mm:ss");
}
class User
{
public string Username { get; set; }
public int Age { get; set; }
}
}
✅ 功能说明
- 表单控件示例
- TextBox、RadioButtonList、CheckBoxList、Button、Label
- 提交后显示用户输入信息
- 验证控件示例
- RequiredFieldValidator、RegularExpressionValidator、ValidationSummary
- 验证邮箱是否填写且格式正确
- 数据绑定控件示例
- GridView 显示用户列表,演示绑定 List 数据源
- AJAX 局部刷新示例
- UpdatePanel + Timer,实现每秒刷新当前时间而不刷新整个页面
这套示例可以直接在 Visual Studio → 新建 Web Forms 项目 中运行,几乎涵盖了 ASP.NET 常用控件的实际用法。
明白了,阿杰,我帮你整理了一份 完整 ASP.NET Web Forms 常用控件实战模板,包含多页面布局、数据列表、表单验证、AJAX 局部刷新,以及基础美化 CSS,你可以直接打开 Visual Studio 运行或修改。
下面我给出项目结构和核心示例代码,保证你 零基础即可上手:
一、项目结构
MyAspNetDemo/
│
├─ Default.aspx // 首页,显示欢迎信息和导航
├─ Default.aspx.cs // 首页后台逻辑
├─ ListPage.aspx // 数据列表页(GridView + Repeater)
├─ ListPage.aspx.cs
├─ FormPage.aspx // 表单页 + 验证控件示例
├─ FormPage.aspx.cs
├─ AjaxPage.aspx // AJAX 局部刷新示例
├─ AjaxPage.aspx.cs
├─ Styles/
│ └─ site.css // 全局样式
└─ Images/ // 存放图片
二、Default.aspx(首页 + 导航)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASP.NET 控件实战模板</title>
<link href="Styles/site.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<h1>欢迎使用 ASP.NET 控件实战模板</h1>
<ul>
<li><a href="FormPage.aspx">表单控件示例</a></li>
<li><a href="ListPage.aspx">数据列表示例</a></li>
<li><a href="AjaxPage.aspx">AJAX 局部刷新示例</a></li>
</ul>
</form>
</body>
</html>
三、FormPage.aspx(表单 + 验证控件)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FormPage.aspx.cs" Inherits="FormPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>表单控件与验证示例</title>
<link href="Styles/site.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<h2>个人信息表单</h2>
姓名:<asp:TextBox ID="txtName" runat="server" /><br /><br />
性别:
<asp:RadioButtonList ID="rblGender" runat="server">
<asp:ListItem>男</asp:ListItem>
<asp:ListItem>女</asp:ListItem>
</asp:RadioButtonList><br /><br />
邮箱:
<asp:TextBox ID="txtEmail" runat="server" /><br />
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
ErrorMessage="邮箱必填" CssClass="error" Display="Dynamic" /><br />
<asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail"
ValidationExpression="\w+@\w+\.\w+" ErrorMessage="邮箱格式不正确" CssClass="error" Display="Dynamic" /><br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" /><br /><br />
<asp:Label ID="lblMsg" runat="server" Text="" ForeColor="Green"></asp:Label>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="error" />
</form>
</body>
</html>
FormPage.aspx.cs
using System;
using System.Web.UI;
public partial class FormPage : Page
{
protected void Page_Load(object sender, EventArgs e) { }
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblMsg.Text = $"姓名:{txtName.Text},性别:{rblGender.SelectedValue},邮箱:{txtEmail.Text}";
}
}
四、ListPage.aspx(数据列表示例)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListPage.aspx.cs" Inherits="ListPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>数据列表示例</title>
<link href="Styles/site.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<h2>GridView 示例</h2>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="用户名" DataField="Username" />
<asp:BoundField HeaderText="年龄" DataField="Age" />
</Columns>
</asp:GridView>
<h2>Repeater 示例</h2>
<asp:Repeater ID="rptUsers" runat="server">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate><li><%# Eval("Username") %> - <%# Eval("Age") %> 岁</li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
ListPage.aspx.cs
using System;
using System.Collections.Generic;
using System.Web.UI;
public partial class ListPage : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var users = new List<User>()
{
new User(){ Username="张三", Age=18 },
new User(){ Username="李四", Age=22 },
new User(){ Username="王五", Age=30 }
};
gvUsers.DataSource = users;
gvUsers.DataBind();
rptUsers.DataSource = users;
rptUsers.DataBind();
}
}
class User
{
public string Username { get; set; }
public int Age { get; set; }
}
}
五、AjaxPage.aspx(AJAX 局部刷新示例)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage.aspx.cs" Inherits="AjaxPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>AJAX 局部刷新示例</title>
<link href="Styles/site.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h2>当前时间(每秒刷新)</h2>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" Text="" Font-Size="Large"></asp:Label><br />
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
AjaxPage.aspx.cs
using System;
using System.Web.UI;
public partial class AjaxPage : Page
{
protected void Page_Load(object sender, EventArgs e) { }
protected void Timer1_Tick(object sender, EventArgs e)
{
lblTime.Text = DateTime.Now.ToString("HH:mm:ss");
}
}
六、Styles/site.css(全局样式)
body { font-family: Arial, sans-serif; margin: 20px; }
h1, h2 { color: #333; }
ul { list-style-type: none; padding: 0; }
ul li { margin: 5px 0; }
.panel { border:1px solid #ccc; padding:10px; margin:10px 0; }
.error { color:red; }
✅ 这套模板特点:
- 多页面演示:表单、列表、AJAX刷新分开展示
- 覆盖常用控件:TextBox、Label、Button、GridView、Repeater、CheckBoxList、RadioButtonList、验证控件、UpdatePanel+Timer
- 可直接运行:Visual Studio 新建 Web Forms → 替换文件即可运行
- 便于扩展:可增加导航栏、更多表单、分页、搜索等功能
发表回复