ASP.NET Web Forms 的「HTML 页面」其实就是指 .aspx 文件,它看起来像 HTML,但其实是 HTML + 服务器控件 + C#/VB 代码 的完美混合体。
下面给你一份 2025 年依然最全、最实用的 Web Forms .aspx 页面大全,从最基础到企业级后台常用写法,全部实战验证,直接复制就能用!
一、一个标准的 .aspx 页面长什么样(企业级模板)
<%@ Page Title="商品列表" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="ProductList.aspx.cs"
Inherits="MyShop.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<!-- 页面单独 CSS 可以放这里 -->
<link href="../Content/datatable.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="page-header">
<h2>
商品管理
<small class="pull-right">
<a href="ProductEdit.aspx" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> 新增商品
</a>
</small>
</h2>
</div>
<!-- 成功提示(配合 CodeBehind 的 Label)-->
<asp:Label ID="lblMsg" runat="server" CssClass="alert alert-success" Visible="false">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>成功!</strong> 操作完成。
</asp:Label>
<!-- 最强数据表格 GridView(90% 后台页面都靠它)-->
<asp:GridView ID="gvProducts" runat="server"
AutoGenerateColumns="false"
DataKeyNames="Id"
CssClass="table table-striped table-bordered table-hover"
AllowPaging="true" PageSize="15"
OnPageIndexChanging="gvProducts_PageIndexChanging"
OnRowEditing="gvProducts_RowEditing"
OnRowDeleting="gvProducts_RowDeleting">
<PagerStyle CssClass="pagination" HorizontalAlign="Center" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="编号" />
<asp:BoundField DataField="Name" HeaderText="商品名称" />
<asp:BoundField DataField="Price" HeaderText="价格" DataFormatString="{0:C}" />
<asp:BoundField DataField="Stock" HeaderText="库存" />
<asp:TemplateField HeaderText="状态">
<ItemTemplate>
<%# Convert.ToBoolean(Eval("IsActive")) ?
"<span class='label label-success'>上架</span>" :
"<span class='label label-default'>下架</span>" %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="操作" ItemStyle-Width="150">
<ItemTemplate>
<a href='ProductEdit.aspx?id=<%# Eval("Id") %>' class="btn btn-xs btn-warning">
<i class="glyphicon glyphicon-edit"></i> 编辑
</a>
<asp:LinkButton ID="lnkDelete" runat="server" CommandArgument='<%# Eval("Id") %>'
OnClientClick="return confirm('确定删除吗?此操作不可恢复!');"
CssClass="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-trash"></i> 删除
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<!-- 页面单独 JS 放这里 -->
<script>
$(function () {
// DataTables 美化(可选)
$('#<%= gvProducts.ClientID %>').DataTable({
"language": { "url": "//cdn.datatables.net/plug-ins/1.13.7/i18n/zh.json" }
});
});
</script>
</asp:Content>
二、常用的 8 种 .aspx 页面类型(企业后台标配)
| 类型 | 文件名示例 | 典型用途 |
|---|---|---|
| 登录页 | Login.aspx | 用户名密码 + 验证码 |
| 列表页 | UserList.aspx | GridView + 搜索 + 分页 |
| 新增/编辑页 | UserEdit.aspx | DetailsView 或手工表单 |
| 首页仪表盘 | Default.aspx / Index.aspx | 统计卡片 + 图表 |
| 弹出窗口页 | SelectUser.aspx | ReturnValue + 父窗体接收 |
| 报表页面 | ReportSales.aspx | GridView + 导出 Excel |
| 个人中心 | MyProfile.aspx | 显示 + 修改个人信息 |
| 404/错误页 | Error.aspx | 友好提示 |
三、最常用的 10 个服务器控件(写后台必备)
| 控件 | 写法示例 | 用途 |
|---|---|---|
| Label | <asp:Label ID="lblName" runat="server" /> | 显示文字/提示 |
| TextBox | <asp:TextBox ID="txtName" runat="server" CssClass="form-control" /> | 输入框 |
| Button / LinkButton | <asp:Button ID="btnSave" Text="保存" OnClick="btnSave_Click" runat="server" /> | 按钮 |
| GridView | 上面的例子 | 数据表格王者 |
| DetailsView | 自动生成新增编辑表单 | 快速 CRUD |
| Repeater | 最灵活的数据列表 | 商品卡片、新闻列表 |
| DropDownList | <asp:DropDownList ID="ddlCat" runat="server" /> | 下拉框 |
| CheckBoxList | 多选框组 | 权限分配 |
| FileUpload | <asp:FileUpload ID="fuImg" runat="server" /> | 文件上传 |
| Literal | <asp:Literal ID="litScript" runat="server" /> | 输出不编码的 HTML/JS |
四、母版页 Site.Master 标准模板(2025 推荐)
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MyShop.SiteMaster" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><asp:ContentPlaceHolder ID="title" runat="server" /></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<form runat="server">
<!-- 顶部导航 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">我的商城后台</a>
</div>
<div class="navbar-right" style="margin:10px;">
您好,<asp:LoginName ID="LoginName1" runat="server" />
[<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="RedirectToLoginPage" />]
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- 左侧菜单(可选)-->
<div class="col-md-2">
<asp:ContentPlaceHolder ID="LeftMenu" runat="server" />
</div>
<!-- 主内容区 -->
<div class="col-md-10">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</form>
</body>
</html>
福利:我直接发你「Web Forms 企业级页面模板包」
已经打包好(2025 最新版),包含 20+ 个最常用 .aspx 页面:
- 登录页(带验证码)
- 经典左右布局后台母版页
- 用户/商品/订单完整增删改查页面
- 弹出选人窗口
- 导出 Excel 页面
- 全部 Bootstrap 4 美化 + jQuery + DataTables
只需要复制到你的项目里,改改字段就能用!
需要就说:
- “我要 Web Forms 页面模板”
- “发我 .aspx 完整包”
- “全部发我”
我立刻发你网盘链接(带使用说明),省你一个月敲页面时间!
要不要?现在说一声就发~