asp.net网站制作教程，从零开始怎么学？-建站教程-锦华智联科技

ASP.NET 网站制作全攻略

ASP.NET 是一个由微软开发的，用于构建现代化、高性能、安全且可扩展的 Web 应用程序的强大框架，主流的版本是 ASP.NET Core，它跨平台（支持 Windows, macOS, Linux）、开源、性能卓越,是所有新项目的首选。

（图片来源网络，侵删）

本教程将围绕 ASP.NET Core MVC 模式展开,这是构建网站最经典和推荐的方式。

第一部分：准备工作

在开始编码之前,你需要准备好开发环境。

安装必备软件

.NET SDK (Software Development Kit):
- 这是开发 ASP.NET Core 应用程序的核心，它包含了编译器、运行时和必要的工具。
- 下载地址: https://dotnet.microsoft.com/download
- 如何选择: 下载最新的 LTS (长期支持) 版本，.NET 8.0 或 .NET 6.0，对于初学者,最新版本通常是最好的。
- 安装: 运行安装程序，按照向导完成即可，安装后，打开命令行工具（如 PowerShell 或 CMD），输入 dotnet --version，如果显示版本号,则说明安装成功。
代码编辑器:
（图片来源网络，侵删）
- 你需要一个能编写和编辑代码的工具。
- 强烈推荐: Visual Studio Code (VS Code): 免费、轻量级、跨平台,拥有强大的插件生态。
- 专业选择: Visual Studio (VS): 功能最强大的 IDE (集成开发环境)，社区版免费，对于大型企业级项目，Visual Studio 是不二之选。
- 本教程将以 VS Code 为例进行讲解，但大部分步骤在 Visual Studio 中同样适用。
(可选) 数据库:
- 如果你的网站需要存储数据（如用户信息、文章等）,你需要一个数据库。
- 入门推荐: SQLite: 一个轻量级的、基于文件的数据库，无需安装服务器,非常适合初学者。
- 进阶推荐: SQL Server Express: 免费的 SQL Server 版本,功能强大。
- 跨平台推荐: PostgreSQL / MySQL: 开源且性能优秀的数据库。

第二部分：创建你的第一个 ASP.NET Core MVC 项目

我们来动手创建一个项目。

使用命令行创建项目

打开你的终端（Windows 上是 PowerShell 或 CMD，macOS/Linux 上是 Terminal）。
创建一个文件夹来存放你的项目,并进入该文件夹：
（图片来源网络，侵删）
```
mkdir MyFirstWebApp
cd MyFirstWebApp
```
运行以下命令来创建一个新的 ASP.NET Core MVC 项目：
```
dotnet new mvc -o MyFirstWebApp
```
- dotnet new mvc: 告诉 .NET CLI 创建一个 MVC 模板项目。
- -o MyFirstWebApp: 指定输出目录（可选，如果不在当前目录下创建）。
进入项目目录并运行它：
```
cd MyFirstWebApp
dotnet run
```

终端会显示类似以下信息,并告诉你一个本地地址：

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7123
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5123

打开你的浏览器，访问 https://localhost:7123 (或 http://localhost:5123)，你应该能看到一个经典的 ASP.NET Core 欢迎页面！

第三部分：理解 ASP.NET Core MVC 架构

在修改代码之前，我们必须理解 MVC 是什么，它是一种将应用程序分为三个核心部分的设计模式，让代码更有条理、更易于维护。

M - Model (模型):
- 职责: 负责数据和业务逻辑，它代表你的应用程序的数据结构（User, Product, Article 类），以及处理这些数据的逻辑（比如验证用户、计算价格等）。
- 简单理解: 数据库表的结构和相关的操作。
V - View (视图):
- 职责: 负责显示用户界面，它是 HTML 页面，通常混合了 C# 代码（称为 Razor 语法），用来展示从 Model 获取的数据。
- 简单理解: 用户在浏览器里看到的所有页面。
C - Controller (控制器):
- 职责: 负责处理用户的请求，并协调 Model 和 View，它接收来自浏览器的输入（比如点击链接、提交表单），调用 Model 来处理数据，然后选择一个 View 来返回给用户。
- 简单理解: 大脑，接收指令 -> 处理逻辑 -> 返回结果。

工作流程:

用户在浏览器中访问一个 URL (/Home/Index)。
请求被发送到对应的 Controller (HomeController 的 Index 方法)。
Controller 可能会与 Model 交互,获取或保存数据。
Controller 选择一个 View (Index.cshtml) 来渲染结果。
View 将数据以 HTML 的形式返回给用户的浏览器。

第四部分：实战演练 - 修改你的网站

让我们通过修改默认的网站，来亲身体验 MVC 的工作流程。

步骤 1: 修改主页标题

在你的项目文件夹中，找到 Views -> Home -> Index.cshtml 文件,这就是主页的视图。
用 VS Code 打开它，你会看到一些 HTML 和 C# 代码。
找到 <h1> 标签，将其内容修改为你想要的标题：
```
<h1>欢迎来到我的第一个 ASP.NET 网站！</h1>
```
保存文件，回到浏览器，刷新页面，你会发现标题已经改变了！这就是 View 的作用。

步骤 2: 从控制器传递数据到视图

我们让控制器来告诉视图该显示什么标题。

找到 Controllers 文件夹，打开 HomeController.cs 文件,这是主页的控制器。

找到 Index 方法（一个 C# 函数）：

public IActionResult Index()
{
    return View();
}

修改 Index 方法，向 View 传递一个数据项：
```
public IActionResult Index()
{
    ViewBag.Title = "这是由控制器设置的标题！";
    return View();
}
```
- ViewBag 是一个动态对象，可以用来在 Controller 和 View 之间传递临时的数据。
回到 Views/Home/Index.cshtml 文件，修改 <h1> 标签，使用 ViewBag.Title：
```
<h1>@ViewBag.Title</h1>
```
符号是 Razor 语法的开始，它告诉引擎这里要执行 C# 代码。
保存所有文件，刷新浏览器,标题现在变成了控制器传递过来的内容！

步骤 3: 创建一个新页面 (新控制器和新视图)

让我们创建一个关于我们（About）页面。

创建控制器: 在 Controllers 文件夹中，右键 -> 新建文件 -> 输入 AboutController.cs。

在 AboutController.cs 中,写入以下代码：

using Microsoft.AspNetCore.Mvc;
namespace MyFirstWebApp.Controllers
{
    public class AboutController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

这个控制器很简单，只有一个 Index 方法，它会返回一个名为 Index 的视图。

创建视图: 在 Views 文件夹中，新建一个名为 About 的文件夹，在 About 文件夹中，新建一个文件，命名为 Index.cshtml。
在 Views/About/Index.cshtml 中，写入一些 HTML：
```
@{
    ViewData["Title"] = "关于我们";
}
<h1>@ViewData["Title"]</h1>
<p>这是一个关于我们页面的示例。</p>
```
- ViewData 是另一种在 Controller 和 View 之间传递数据的方式，比 ViewBag 类型更安全。
访问新页面: 在浏览器地址栏中访问 https://localhost:7123/About/Index 或者 https://localhost:7123/About,你应该能看到你新创建的关于我们页面了！

第五部分：连接数据库 (使用 Entity Framework Core)

网站的核心往往是数据，我们将使用 Entity Framework Core (EF Core)，这是微软官方的 ORM（对象关系映射）工具，它让我们可以用 C# 对象来操作数据库，而不用写复杂的 SQL 语句。

安装 EF Core

在终端中，进入你的项目目录，运行以下命令来安装 SQLite 和 EF Core 的相关包：

dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.Tools

创建 Model

在项目根目录下，创建一个名为 Models 的文件夹。

在 Models 文件夹中，创建一个 BlogPost.cs 文件，代表一篇博客文章：

namespace MyFirstWebApp.Models
{
    public class BlogPost
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Content { get; set; }
        public DateTime CreatedDate { get; set; }
    }
}

创建数据库上下文

数据库上下文是 EF Core 的核心，它负责连接数据库并协调 Model 的操作。

在 Models 文件夹中，创建一个 ApplicationDbContext.cs 文件：

using Microsoft.EntityFrameworkCore;
namespace MyFirstWebApp.Models
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }
        public DbSet<BlogPost> BlogPosts { get; set; }
    }
}

注册数据库服务

为了让我们的应用程序知道 ApplicationDbContext 的存在，我们需要在 Program.cs 文件中注册它。

打开 Program.cs,修改它：

using MyFirstWebApp.Models; // 确保引入了 Models 命名空间
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
// --- 新增的代码 ---
// 1. 获取数据库连接字符串
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
// 2. 注册 ApplicationDbContext 服务
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlite(connectionString));
// --- 新增代码结束 ---
var app = builder.Build();
// ... (后续代码保持不变)

builder.Configuration.GetConnectionString("DefaultConnection") 会从 appsettings.json 文件中读取连接字符串。

打开 appsettings.json 文件,添加连接字符串：

{
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=blog.db"
  },
  "Logging": { ... },
  "AllowedHosts": "*"
}

这会告诉 EF Core 将数据库保存在一个名为 blog.db 的文件中。

创建并应用数据库迁移

“迁移”是 EF Core 用来将 Model 的变化同步到数据库的机制。

在终端中运行以下命令：

# 创建一个迁移，名为 "InitialCreate"
dotnet ef migrations add InitialCreate
# 应用迁移，创建数据库表
dotnet ef database update

执行成功后，你会发现项目根目录下多了一个 Migrations 文件夹，并且多了一个 blog.db 文件,这就是你的数据库！

在 Controller 中使用数据

现在我们可以在 HomeController 中显示博客列表了。

修改 Controllers/HomeController.cs：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore; // 引入 EF Core
using MyFirstWebApp.Models; // 引入 Models 命名空间
namespace MyFirstWebApp.Controllers
{
    public class HomeController : Controller
    {
        private readonly ApplicationDbContext _context; // 注入数据库上下文
        public HomeController(ApplicationDbContext context)
        {
            _context = context;
        }
        public async Task<IActionResult> Index()
        {
            // 从数据库中获取所有博客文章
            var blogPosts = await _context.BlogPosts.ToListAsync();
            // 将数据传递给视图
            return View(blogPosts);
        }
        // ... 其他方法保持不变
    }
}

我们使用了 依赖注入 模式，将 ApplicationDbContext 的实例“注入”到 HomeController 中，这是 ASP.NET Core 的核心特性之一。

在 View 中显示数据

修改 Views/Home/Index.cshtml,让它能够显示博客列表：

@model IEnumerable<MyFirstWebApp.Models.BlogPost> // 告诉视图这个模型是什么类型
@{
    ViewData["Title"] = "博客列表";
}
<h1>@ViewData["Title"]</h1>
<ul>
    @foreach (var post in Model)
    {
        <li>
            <h3>@post.Title</h3>
            <p>@post.Content.Substring(0, Math.Min(post.Content.Length, 100))...</p>
            <small>@post.CreatedDate.ToString("yyyy-MM-dd")</small>
        </li>
    }
</ul>

@model ... 这行代码非常重要,它定义了该视图接收的数据类型。
我们使用 foreach 循环来遍历 Model（即从 Controller 传来的博客列表）并显示它们。

刷新你的主页，你应该能看到一个空的博客列表（因为我们还没有数据）。

第六部分：下一步与资源

恭喜！你已经掌握了 ASP.NET Core 网站制作的核心知识,你可以探索更多高级主题：

创建、编辑、删除: 学习如何创建表单,实现数据的增删改查。
用户认证: 使用 ASP.NET Core Identity 轻松实现用户注册、登录、角色管理。
API 开发: 学习创建 Web API，为你的移动应用或前端框架（如 Vue, React）提供后端服务。
部署: 将你的网站部署到云服务器上，如 Azure, AWS 或 Heroku,让全世界都能访问。

asp.net网站制作教程，从零开始怎么学？