7 创建第一个ASP.NET Core应用之创建项目

在上一篇文章中，我们探讨了如何选择合适的IDE，以便为ASP.NET Core开发做好准备。现在我们将开始我们第一个ASP.NET Core应用的旅程，具体来说，我们将学习如何创建一个新的ASP.NET Core项目。

创建ASP.NET Core项目

步骤一：打开IDE

首先，打开您选择的IDE。通常情况下，使用的是Visual Studio、Visual Studio Code或Rider等。以下是如何在不同IDE中创建ASP.NET Core项目的指导。

在Visual Studio中创建项目

1. 启动Visual Studio。
2. 在“开始窗口”中，选择“创建新项目”。
3. 在“创建新项目”窗口中，搜索“ASP.NET Core Web 应用程序”，并选择它。点击“下一步”。
4. 输入项目名称和保存位置，然后点击“创建”。
5. 在下一个窗口中，选择“Web 应用程序（模型-视图-控制器）”模板，确保选择目标框架（例如.NET 6.0或.NET 7.0），然后点击“创建”。

在Visual Studio Code中创建项目

1. 首先确保你已经安装了.NET SDK。

2. 打开终端（Terminal），导航到你希望创建项目的目录。

3. 使用命令创建新项目：

   dotnet new mvc -n MyFirstApp

   这里MyFirstApp是你的项目名称。该命令将创建一个新的MVC项目。

4. 使用以下命令打开项目：

   cd MyFirstApp
   code .

步骤二：项目结构概述

在创建项目后，您会看到一系列的文件和文件夹。了解这些文件和文件夹的作用将帮助您更好地组织和管理您的应用。典型的ASP.NET Core MVC项目将包含以下结构：

MyFirstApp/
├── Controllers/
│   └── HomeController.cs
├── Models/
├── Views/
│   └── Home/
│       └── Index.cshtml
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── lib/
├── appsettings.json
├── Startup.cs
│   └── Program.cs
└── MyFirstApp.csproj

主要文件和文件夹说明

• Controllers/：存放控制器的地方，控制器用来处理用户请求和返回响应。
• Models/：用于存放数据模型的文件夹，通常会定义与数据交互相关的类。
• Views/：存放视图模板的地方，这些模板用于展示数据给用户。
• wwwroot/：该文件夹用于存放静态文件，例如CSS、JavaScript和图片等。
• appsettings.json：用于存放应用的配置信息，例如数据库连接字符串等。
• Startup.cs和Program.cs：应用的启动配置文件，包含中间件和服务的配置。

步骤三：运行应用

创建完项目后，我们可以运行应用以查看默认的欢迎页面。使用以下命令启动应用：

dotnet run

在终端中，您将看到输出，包括一个网址，例如 https://localhost:5001。您可以在浏览器中打开这个地址，看到默认的欢迎界面。

案例：创建一个简单的Welcome页面

让我们在项目中创建一个简单的Welcome页面，以便您更好地理解如何使用控制器和视图。

创建控制器

在Controllers文件夹中，创建一个名为WelcomeController.cs的文件，并添加以下代码：

using Microsoft.AspNetCore.Mvc;

namespace MyFirstApp.Controllers
{
    public class WelcomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

创建视图

在Views文件夹中，创建一个名为Welcome的子文件夹，并在其中创建一个名为Index.cshtml的文件，添加以下内容：

@{
    ViewData["Title"] = "Welcome";
}

<h1>Welcome to ASP.NET Core!</h1>
<p>This is your first ASP.NET Core application.</p>

更新路由

最后，您需要在Startup.cs中配置新的路由，在Configure方法中将默认路由更改为：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Welcome}/{action=Index}/{id?}");
});

步骤四：再次运行应用

完成后，再次运行应用，并访问 https://localhost:5001。您将看到您刚刚创建的Welcome页面。

总结

在本节中，我们学习了如何创建一个新的ASP.NET Core项目，并了解了项目的基本结构以及如何添加控制器和视图。下一篇文章将详细介绍项目的结构和各个组件之间的关系，以便您能更深入地理解ASP.NET Core的运行机制。

期待在下一篇文章中与您继续探索！