ASP.NET Web Forms – HTML 页面

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.aspxGridView + 搜索 + 分页
新增/编辑页UserEdit.aspxDetailsView 或手工表单
首页仪表盘Default.aspx / Index.aspx统计卡片 + 图表
弹出窗口页SelectUser.aspxReturnValue + 父窗体接收
报表页面ReportSales.aspxGridView + 导出 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 完整包”
  • “全部发我”

我立刻发你网盘链接(带使用说明),省你一个月敲页面时间!

要不要?现在说一声就发~

文章已创建 2965

发表回复

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

相关文章

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

返回顶部