好的,阿杰,我给你整理一份 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 与增强控件

  1. ScriptManager
    • 必须添加在页面,用于启用 ASP.NET AJAX。
  2. UpdatePanel
    • 包裹控件,实现局部刷新,不刷新整个页面。
  3. UpdateProgress
    • 显示局部刷新时的等待提示。
  4. Timer
    • 定时触发事件,可结合 UpdatePanel 使用。

六、实用技巧总结

  1. 选择控件
    • 静态显示 → Label
    • 数据输入 → TextBox、DropDownList
    • 数据展示 → GridView / Repeater / ListView
  2. 布局优化
    • 尽量使用 CSS + Panel/Div 进行布局,减少表格布局。
  3. 数据绑定
    • 推荐使用 DataSource + DataBind(),方便绑定数据库、集合或 XML。
  4. 事件处理
    • OnClickOnSelectedIndexChangedOnRowDataBound 等事件绑定后端 C# 方法。
  5. 验证逻辑
    • 优先使用验证控件,确保前后端双重校验。
  6. 局部刷新
    • 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; }
    }
}

✅ 功能说明

  1. 表单控件示例
    • TextBox、RadioButtonList、CheckBoxList、Button、Label
    • 提交后显示用户输入信息
  2. 验证控件示例
    • RequiredFieldValidator、RegularExpressionValidator、ValidationSummary
    • 验证邮箱是否填写且格式正确
  3. 数据绑定控件示例
    • GridView 显示用户列表,演示绑定 List 数据源
  4. 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; }

✅ 这套模板特点:

  1. 多页面演示:表单、列表、AJAX刷新分开展示
  2. 覆盖常用控件:TextBox、Label、Button、GridView、Repeater、CheckBoxList、RadioButtonList、验证控件、UpdatePanel+Timer
  3. 可直接运行:Visual Studio 新建 Web Forms → 替换文件即可运行
  4. 便于扩展:可增加导航栏、更多表单、分页、搜索等功能