VB.NET网页开发实例教程，如何快速入门实战？

在 .NET 生态中，开发网页应用（Web Forms）的语言是 Visual Basic.NET (VB.NET)，但开发网页 API（后端服务）的主流语言是 C#。 VB.NET 依然完全支持 Web Forms 开发，并且对于 VB.NET 这是一个非常自然的入门选择。

本教程将带你使用 ASP.NET Web Forms 技术和 VB.NET 语言,从零开始创建一个功能完整的个人博客网站。

第一部分：基础概念与准备工作

什么是 ASP.NET Web Forms？

想象一下盖房子：

• HTML 是房子的砖瓦、钢筋和水泥,构成基本结构。
• CSS 是房子的装修和粉刷,决定外观和风格。
• JavaScript 是房子的水电、智能家居系统,负责交互和动态行为。
• ASP.NET Web Forms 则像是一整套先进的建筑工具和预制件，你可以：
  • 使用 服务器控件（如 Button, TextBox, GridView）像搭积木一样快速构建功能。
  • 使用 事件驱动模型（如 Button_Click），像编写 Windows 窗体应用一样编写网页逻辑,非常直观。
  • 视图状态 自动帮你管理控件的状态，即使页面刷新,用户输入的内容也不会丢失。

开发环境准备

你需要安装以下软件：

1. Visual Studio: 这是微软官方的集成开发环境，我们使用 Visual Studio Community (社区版)，它是免费的。
   • 下载地址: https://visualstudio.microsoft.com/zh-hans/vs/community/
   • 安装时务必勾选: “.NET 桌面开发” 或 “ASP.NET 和 Web 开发” 工作负载，这会自动安装 .NET Framework、IIS Express 等所有必需组件。

第二部分：创建第一个 ASP.NET Web Forms 项目

步骤 1: 新建项目

1. 打开 Visual Studio。

   
   （图片来源网络，侵删）

2. 点击 “创建新项目”。

3. 在模板搜索框中输入 ASP.NET Web Application，选择模板（确保语言是 Visual Basic），然后点击 “下一步”。

4. 为你的项目命名，MyFirstBlog,并选择一个位置。

5. 在下一个窗口中，选择 “Web Forms” 模板，然后点击 “创建”。

   
   （图片来源网络，侵删）

Visual Studio 会为你创建一个包含默认页面的项目结构。

步骤 2: 熟悉项目结构

打开 “解决方案资源管理器”,你会看到以下关键文件和文件夹：

• Default.aspx: 默认的主页，它包含了 HTML 和服务器控件。
• Default.aspx.vb: 这是 Default.aspx 的后台代码文件，所有 VB.NET 逻辑都在这里。
• Web.config: 网站的配置文件，用于存储数据库连接字符串、应用程序设置等。
• Site.Master: 一个母版页，它定义了网站的通用布局（如头部、导航栏、页脚），其他页面可以继承这个布局,避免重复代码。
• App_Data: 用于存放数据库文件（如 .mdf, .sdf）。
• Images, Scripts, Styles: 分别存放图片、JavaScript 文件和 CSS 样式表。

第三部分：实例教程 - 构建一个简单的个人博客

我们将实现以下功能：

1. 显示博客文章列表。
2. 点击文章标题,查看文章详情。
3. 一个简单的后台管理页面,用于添加新文章。

第 1 步：创建数据模型和数据库

1. 添加数据模型类 在 “解决方案资源管理器” 中右键点击项目 -> 添加 -> 新建项。 选择 “类”，命名为 Post.vb。

   ' Post.vb
   Public Class Post
       Public Property Id As Integer
       Public Property Title As String
       Public Property Content As String
       Public Property PublishDate As DateTime
   End Class

2. 创建数据访问逻辑 为了简单起见，我们使用一个静态类来模拟数据库操作，在实际项目中，你会使用 Entity Framework 或 ADO.NET 连接真实的数据库。

   在项目中添加一个新类，命名为 PostService.vb。

   ' PostService.vb
   Public Class PostService
       ' 使用一个静态列表来模拟数据库
       Private Shared _posts As New List(Of Post)
       ' 构造函数，初始化一些示例数据
       Shared Sub New()
           _posts.Add(New Post With {
               .Id = 1,
               .Title = "欢迎来到我的博客！",
               .Content = "这是我的第一篇博客文章，感谢你访问我的网站，希望我们能在这里分享很多有趣的内容。",
               .PublishDate = DateTime.Now.AddDays(-5)
           })
           _posts.Add(New Post With {
               .Id = 2,
               .Title = "学习 VB.NET 网页开发",
               .Content = "ASP.NET Web Forms 是一个强大的框架，它让 VB.NET 开发者能够快速构建功能强大的网站，事件驱动模型是其最大的特点。",
               .PublishDate = DateTime.Now.AddDays(-2)
           })
           _posts.Add(New Post With {
               .Id = 3,
               .Title = ".NET 的新特性",
               .Content = ".NET 5/6/7/8 是一个跨平台的框架，虽然 Web Forms 不是其核心，但 VB.NET 生态依然活跃。",
               .PublishDate = DateTime.Now.AddDays(-1)
           })
       End Sub
       ' 获取所有文章
       Public Shared Function GetAllPosts() As List(Of Post)
           Return _posts.OrderByDescending(Function(p) p.PublishDate).ToList()
       End Function
       ' 根据ID获取文章
       Public Shared Function GetPostById(id As Integer) As Post
           Return _posts.FirstOrDefault(Function(p) p.Id = id)
       End Function
       ' 添加新文章
       Public Shared Sub AddPost(post As Post)
           ' 在实际应用中，这里会有更复杂的逻辑，比如生成新ID
           post.Id = _posts.Count + 1
           post.PublishDate = DateTime.Now
           _posts.Add(post)
       End Sub
   End Class

第 2 步：在主页显示文章列表

1. 打开 Default.aspx，切换到 “源” 视图。

2. 删除默认的 <asp:Content>

3. 在 <asp:Content> 标签内，添加一个 asp:Repeater 控件，Repeater 是一个非常灵活的模板控件,可以让我们自定义列表的显示方式。

   <%@ Page Title="首页" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
   <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
       <h1>我的博客文章</h1>
       <hr />
       <asp:Repeater ID="PostsRepeater" runat="server">
           <ItemTemplate>
               <div class="post-item">
                   <h2>
                       <!-- 使用 HyperLink 控件创建链接 -->
                       <asp:HyperLink ID="TitleLink" runat="server" 
                                      NavigateUrl='<%# "PostDetails.aspx?Id=" & Eval("Id") %>' 
                                      Text='<%# Eval("Title") %>' />
                   </h2>
                   <p class="post-date">
                       发布于: <%# Eval("PublishDate", "{0:yyyy-MM-dd}") %>
                   </p>
                   <p>
                       <!-- 只显示文章摘要 -->
                       <%# Eval("Content") %>
                   </p>
               </div>
           </ItemTemplate>
       </asp:Repeater>
   </asp:Content>

4. 编写后台代码 Default.aspx.vb，将数据绑定到 Repeater 控件。

   ' Default.aspx.vb
   Partial Class _Default
       Inherits System.Web.UI.Page
       ' 页面加载时执行
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
           ' 如果是第一次加载页面
           If Not IsPostBack Then
               ' 获取所有文章
               Dim allPosts As List(Of Post) = PostService.GetAllPosts()
               ' 将数据源绑定到 Repeater 控件
               PostsRepeater.DataSource = allPosts
               PostsRepeater.DataBind()
           End If
       End Sub
   End Class

5. 添加一些样式 打开 Site.css 文件（在 Styles 文件夹中），添加一些简单的 CSS 来美化列表。

   /* Site.css */
   .post-item {
       border: 1px solid #ddd;
       padding: 15px;
       margin-bottom: 20px;
       border-radius: 5px;
   }
   .post-item h2 {
       margin-top: 0;
   }
   .post-date {
       color: #888;
       font-size: 0.9em;
       font-style: italic;
   }
   .post-item a {
       color: #0056b3;
       text-decoration: none;
   }
   .post-item a:hover {
       text-decoration: underline;
   }