ASP.NET Web Forms – 实例

下面给你一个完整的 ASP.NET Web Forms 从零开始的简单实例,包含所有必要文件,帮助你快速跑通一个项目。

1. 创建项目(Visual Studio 2022/2019)

  1. 打开 Visual Studio
  2. 文件 → 新建 → 项目
  3. 选择 “ASP.NET Web 应用程序 (.NET Framework)”
  4. 项目名称随便取,例如:WebFormsDemo
  5. 框架选择 .NET Framework 4.8(或最新的 4.x)
  6. 模板选择 “Web Forms” → 创建

Visual Studio 会自动生成一个完整可运行的项目。

2. 最经典的“计数器”实例(带 ViewState)

Default.aspx(前端页面)

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET Web Forms 计数器示例</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="font-family: Arial; padding: 50px;">
            <h2>欢迎使用 ASP.NET Web Forms</h2>

            <p>你已经点击按钮 <asp:Label ID="lblCount" runat="server" Font-Bold="true" ForeColor="Red">0</asp:Label> 次</p>

            <asp:Button ID="btnClick" runat="server" Text="点击我 +1" 
                        OnClick="btnClick_Click" CssClass="btn" />

            <br /><br />

            当前时间(服务器时间): 
            <asp:Label ID="lblTime" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

Default.aspx.cs(代码隐藏文件)

using System;

namespace WebFormsDemo
{
    public partial class Default : System.Web.UI.Page
    {
        // ViewState 会自动保持这个值在多次回发之间
        protected int ClickCount
        {
            get { return (int)(ViewState["ClickCount"] ?? 0); }
            set { ViewState["ClickCount"] = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // 第一次加载页面时执行
                lblTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
                lblCount.Text = "0";
            }
            else
            {
                // 每次回发都更新时间,展示是服务器端渲染
                lblTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
            }
        }

        protected void btnClick_Click(object sender, EventArgs e)
        {
            ClickCount++;
            lblCount.Text = ClickCount.ToString();
        }
    }
}

3. 另一个常见实例:登录表单 + 验证

Login.aspx

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>用户登录</title>
    <style>
        .box { width: 300px; margin: 100px auto; font-family: Arial; }
        .txt { width: 100%; padding: 8px; margin: 5px 0; }
        .btn { padding: 10px 20px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="box">
            <h2>登录系统</h2>

            <asp:Label ID="Label1" runat="server" Text="用户名:" AssociatedControlID="txtUser"></asp:Label>
            <asp:TextBox ID="txtUser" runat="server" CssClass="txt"></asp:TextBox>

            <asp:Label ID="Label2" runat="server" Text="密码:" AssociatedControlID="txtPass"></asp:Label>
            <asp:TextBox ID="txtPass" runat="server" TextMode="Password" CssClass="txt"></asp:TextBox>

            <br /><br />
            <asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" CssClass="btn" />

            <br /><br />
            <asp:Label ID="lblMessage" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
        </div>
    </form>
</body>
</html>

Login.aspx.cs

using System;
using System.Web.UI;

namespace WebFormsDemo
{
    public partial class Login : Page
    {
        protected void btnLogin_Click(object sender, EventArgs e)
        {
            string user = txtUser.Text.Trim();
            string pass = txtPass.Text;

            if (user == "admin" && pass == "123456")
            {
                lblMessage.ForeColor = System.Drawing.Color.Green;
                lblMessage.Text = "登录成功!欢迎 " + user;
                // 可以在这里做 Session 或 FormsAuthentication
                Session["User"] = user;
                Response.Redirect("~/Default.aspx");
            }
            else
            {
                lblMessage.ForeColor = System.Drawing.Color.Red;
                lblMessage.Text = "用户名或密码错误!";
            }
        }
    }
}

4. 运行项目

按 F5 直接运行,默认会打开 Default.aspx,点击按钮可以看到计数器一直递增(即使刷新页面也不会丢失,因为用了 ViewState)。

5. Web Forms 核心概念快速回顾(对应上面代码)

概念代码体现说明
.aspx 文件前端标记 + 服务器控件包含 runat=”server” 的控件
CodeBehindDefault.aspx.cs页面逻辑代码(C#)
Page_Load页面每次请求(包括回发)都会执行!IsPostBack 判断是否首次加载
ViewStateViewState[“ClickCount”]自动在回发之间保持状态
事件驱动btnClick_Click按钮点击后触发服务器端事件
PostBack表单提交到同一页面Web Forms 的核心机制
SessionSession[“User”] = user;服务端会话状态

这个例子已经包含了 Web Forms 最核心的生命周期、状态管理、事件模型,可以直接拷贝到 Visual Studio 里运行学习。

如果你想要更高级的例子(GridView 分页编辑、MasterPage 母版页、UserControl 用户控件、异步回发 UpdatePanel 等),随时告诉我,我继续给你写!

文章已创建 2965

发表回复

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

相关文章

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

返回顶部