菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

ASP.NET 教程

ASP.NET Web Forms – Web 服务器控件（asp: 控件）完全指南

likuolei

Web 服务器控件（也叫 ASP.NET 服务器控件）是 Web Forms 最核心、最强大的部分。它们以 <asp:xxx> 的形式出现，自动具备 ViewState、事件模型、主题皮肤、数据绑定等高级功能。

Web 服务器控件 vs HTML 服务器控件 终极对比表

特性Web 服务器控件（）HTML 服务器控件（）
渲染结果自动生成复杂但功能完整的 HTML（常含 span、table）100% 原生 HTML
ViewState自动开启（可关闭）默认关闭
服务器端事件极其丰富（Click、SelectedIndexChanged 等）只有 ServerClick / ServerChange
验证控件支持完美支持（RequiredFieldValidator 等）不直接支持
数据绑定支持 <%= %>、<%# %>、DataSourceID 等不支持
主题 / 皮肤支持 Skin 文件不支持
开发效率极高（拖拽即用）较低
输出 HTML 可控性较差（有时很臃肿）极好
推荐场景企业内部系统、快速开发、需要强大功能前端框架混合、追求极致性能和 SEO

所有常用 Web 服务器控件分类与实战示例

1. 基础输入控件
控件标签主要属性常用事件
TextBox<asp:TextBox>Text、TextMode（Text/Password/MultiLine）TextChanged
CheckBox<asp:CheckBox>Checked、TextCheckedChanged
RadioButton<asp:RadioButton>GroupName、CheckedCheckedChanged
ListBox<asp:ListBox>SelectionMode（Single/Multiple）SelectedIndexChanged
DropDownList<asp:DropDownList>同上SelectedIndexChanged
CheckBoxList<asp:CheckBoxList>RepeatDirection、RepeatLayoutSelectedIndexChanged
RadioButtonList<asp:RadioButtonList>同上SelectedIndexChanged
FileUpload<asp:FileUpload>HasFile、PostedFile无（靠按钮触发）
HiddenField<asp:HiddenField>ValueValueChanged
2. 按钮类控件
控件标签特点
Button<asp:Button>普通按钮
LinkButton<asp:LinkButton>外观像超链接，但会回发
ImageButton<asp:ImageButton>图片按钮，返回点击坐标 X,Y
3. 显示类控件
控件标签主要用途
Label<asp:Label>显示文本（支持 Text 属性）
Literal<asp:Literal>输出原始 HTML，不转义
PlaceHolder<asp:PlaceHolder>占位符，代码中动态添加控件
Panel<asp:Panel>分组容器，可设置滚动、默认按钮
4. 超级明星：数据控件（真正体现 Web Forms 强大之处）
控件常用场景是否需要手动写代码
GridView表格展示、分页、排序、编辑、删除几乎不需要
DetailsView主从详情编辑几乎不需要
FormView完全自定义模板的表单需要写模板
ListView最灵活（类似 MVC 的 View）需要写模板
Repeater最高性能、最轻量、无内置分页全手动
完整实战：一个页面用全常用 Web 服务器控件（注册表单 + 数据展示）

RegisterAndList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterAndList.aspx.cs" 
    Inherits="WebFormsDemo.RegisterAndList" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Web 服务器控件大全演示</title>
    <style>
        body { font-family: Arial; margin: 20px; }
        .form { width: 400px; float: left; border: 1px solid #ccc; padding: 20px; }
        .grid { margin-left: 450px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background: #f2f2f2; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="form">
            <h2>用户注册（纯 Web 控件）</h2>

            <asp:Label Text="用户名：" AssociatedControlID="txtUser" runat="server" />
            <asp:TextBox ID="txtUser" runat="server" placeholder="字母数字" />
            <asp:RequiredFieldValidator ErrorMessage="用户名必填" 
                ControlToValidate="txtUser" ForeColor="Red" Display="Dynamic" runat="server" />

            <br /><br />

            <asp:Label Text="密码：" AssociatedControlID="txtPass" runat="server" />
            <asp:TextBox ID="txtPass" TextMode="Password" runat="server" />
            <asp:RequiredFieldValidator ErrorMessage="密码必填" 
                ControlToValidate="txtPass" ForeColor="Red" runat="server" />

            <br /><br />

            <asp:Label Text="性别：" runat="server" />
            <asp:RadioButtonList ID="rblGender" RepeatDirection="Horizontal" runat="server">
                <asp:ListItem Value="1" Selected="True">男</asp:ListItem>
                <asp:ListItem Value="0">女</asp:ListItem>
            </asp:RadioButtonList>

            <br />

            <asp:Label Text="兴趣爱好：" runat="server" />
            <asp:CheckBoxList ID="cblHobby" RepeatColumns="3" runat="server">
                <asp:ListItem>篮球</asp:ListItem>
                <asp:ListItem>足球</asp:ListItem>
                <asp:ListItem>编程</asp:ListItem>
                <asp:ListItem>游戏</asp:ListItem>
            </asp:CheckBoxList>

            <br />

            <asp:Label Text="城市：" AssociatedControlID="ddlCity" runat="server" />
            <asp:DropDownList ID="ddlCity" runat="server">
                <asp:ListItem Value="">--请选择--</asp:ListItem>
                <asp:ListItem>北京</asp:ListItem>
                <asp:ListItem>上海</asp:ListItem>
                <asp:ListItem>广州</asp:ListItem>
                <asp:ListItem>深圳</asp:ListItem>
            </asp:DropDownList>

            <br /><br />

            <asp:Button ID="btnSubmit" Text="立即注册" runat="server" OnClick="btnSubmit_Click" />
            <asp:LinkButton Text="（链接样式按钮）" OnClick="btnSubmit_Click" runat="server" />

            <br /><br />
            <asp:Literal ID="litMsg" runat="server" />
        </div>

        <div class="grid">
            <h2>用户列表（GridView 一行代码实现）</h2>
            <asp:GridView ID="gvUsers" AutoGenerateColumns="false" runat="server"
                AllowPaging="true" PageSize="5" OnPageIndexChanging="gvUsers_PageIndexChanging">
                <Columns>
                    <asp:BoundField DataField="UserName" HeaderText="用户名" />
                    <asp:BoundField DataField="Gender" HeaderText="性别" />
                    <asp:BoundField DataField="City" HeaderText="城市" />
                    <asp:BoundField DataField="Hobby" HeaderText="兴趣爱好" />
                    <asp:BoundField DataField="RegTime" HeaderText="注册时间" DataFormatString="{0:yyyy-MM-dd HH:mm}" />
                </Columns>
                <PagerStyle BackColor="#f2f2f2" HorizontalAlign="Center" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

RegisterAndList.aspx.cs

using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebFormsDemo
{
    public partial class RegisterAndList : Page
    {
        // 用静态 List 模拟数据库
        static List<User> UserList = new List<User>();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGrid();
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (Page.IsValid) // 验证控件自动检查
            {
                var user = new User
                {
                    UserName = txtUser.Text.Trim(),
                    Gender = rblGender.SelectedValue == "1" ? "男" : "女",
                    City = ddlCity.SelectedValue,
                    Hobby = string.Join("、", cblHobby.Items.Cast<ListItem>()
                                    .Where(i => i.Selected).Select(i => i.Text)),
                    RegTime = DateTime.Now
                };

                UserList.Add(user);
                BindGrid();

                litMsg.Text = $"<span style='color:green'>注册成功！欢迎 {user.UserName}</span>";

                // 清空表单
                txtUser.Text = txtPass.Text = "";
                ddlCity.SelectedIndex = 0;
            }
        }

        void BindGrid()
        {
            gvUsers.DataSource = UserList;
            gvUsers.DataBind();
        }

        protected void gvUsers_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gvUsers.PageIndex = e.NewPageIndex;
            BindGrid();
        }
    }

    public class User
    {
        public string UserName { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public string Hobby { get; set; }
        public DateTime RegTime { get; set; }
    }
}

运行效果：一个页面同时演示了几乎所有常用 Web 服务器控件 + GridView 自动分页 + 验证控件，基本 90% 的企业后台系统都可以用这些控件快速搞定！

想要我继续给你：

  • UpdatePanel 实现无刷新
  • MasterPage + SiteMap 母版页导航
  • Skin 主题换肤
  • 自定义控件 + 用户控件

随时说，我继续发完整代码！

网站 http://yingjuxia.com
文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部