ASP.NET Core 入門教程 二、使用ASP.NET Core MVC框架構建Web應用

1、前言

一、本文主要內容

• 使用dotnet cli建立基於解決方案（sln+csproj）的項目
• 使用Visual Studio Code開發基於解決方案（sln+csproj）的項目
• Visual Studio Code Solution插件（ vscode-solution-explorer）基礎使用介紹
• 基於 .NET Core web項目模板構建 ASP.NET Core MVC Web應用
• ASP.NET Core MVC框架上手

二、本教程環境信息

軟件/環境	說明
操做系統	Windows 10
SDK	2.1.401
ASP.NET Core	2.1.3
IDE	Visual Studio Code 1.27
瀏覽器	Chrome 69

三、前置知識

你可能須要的前置知識

• MVC框架/模式介紹

https://baike.baidu.com/item/mvc

• 控制反轉（IOC）原則與依賴注入（DI）

ASP.NET Core 默認集成了DI。全部官方模塊的引入都要使用DI的方式引入。

https://baike.baidu.com/item/IOC

2、項目準備

一、項目建立

.NET平臺的項目構建有兩個概念：解決方案（Solution）、項目（Project）。
全部的項目開發，不管是Web項目，仍是控制檯應用程序，都必須基於Project來構建。而Solution的做用就是把Project組織起來

若是項目簡單，咱們只須要基於Project來構建項目便可，可是當項目須要分層解耦時，咱們若是在Project建立目錄來隔離並不能起到硬性隔離的做用，畢竟只要在一個Project中就能夠引用。而經過Project來分層就能夠作到硬性隔離的效果。並且基於Project的代碼複用更簡潔合理（編譯產出.dll能夠在其餘項目中引用等）

解決方案（Solution）+ 項目（Project）就至關於用Maven構建的Java項目中，頂層Project和Project的關係。

• 建立項目目錄

#建立項目目錄
mkdir Ken.Tutorial

#進入項目目錄
cd Ken.Tutorial

• 建立解決方案文件

dotnet new sln -n Ken.Tutorial

• 建立Web項目

dotnet new web -n Ken.Tutorial.Web

• 將項目添加到解決方案中

dotnet sln add Ken.Tutorial.Web

二、VS Code 配置

• 安裝基於Solution開發 .NET Core 項目的擴展

擴展名	說明
vscode-solution-explorer	建立、刪除、重命名或移動解決方案、解決方案文件夾和項目。管理項目引用。

VS Code 擴展管理頁直接搜索擴展名安裝便可，本次安裝的版本是:0.2.33

3、VS Code開發基於解決方案的項目說明

一、VS Code項目配置

菜單：文件->打開文件夾，選擇項目目錄打開項目

由於已經安裝了VS Code的C#擴展和Solution擴展，因此也會提示缺失相關配置

C#擴展提示：

Required assets to build and debug are missing from ‘helloweb’. Add them?

這是由於項目缺乏編譯、調試配置，選擇Yes便可

vscode-solution-explorer擴展提示：

Would you like to create the vscode-solution-explorer templates folder?

這是由於vscode-solution-explorer插件須要項目中的解決方案提供相應的模板。

全部插件默認的配置文件，都會放在.vscode文件夾中

資源管理器中除了默認的面板，咱們安裝的Solution插件還會提供友好的Solution Explorer。這個視圖的風格，有VS（Visual Studio）的既視感。
後續項目開發徹底能夠隱藏默認資源管理器，使用Solution Explorer就好。

二、Solution Explorer菜單介紹

• Solution鼠標右鍵菜單介紹

菜單	快捷鍵	說明
Add existing project	/	添加已存在的項目（Project）
Add new project	/	新建項目（Project）
Create folder	Ctrl+Shift+F	建立文件夾
Open File	/	打開解決方案文件(.sln)
Rename	F2	修改解決方案名稱
Build	/	編譯解決方案（Solution）
Clean	/	清理解決方案（Solution）的編譯輸出
Pack	/	解決方案（Solution）打包
Publish	/	發佈解決方案（Solution）
Restore	/	恢復解決方案（Solution）
Test	/	執行解決方案（Solution）中的單元測試

• Project鼠標右鍵菜單介紹

菜單	快捷鍵	說明
Add package	/	添加package
Add reference	/	引用解決方案中的其餘項目
Create file	Ctrl+Shift+A	建立文件
Create folder	Ctrl+Shift+F	建立文件夾
Move	/	移動項目（Project）
Remove project from solution	Del	從解決方案中移除項目（Project）
Paste	Ctrl+V	粘貼
Open File	/	打開項目文件(.csproj)
Rename	F2	修改解決方案名稱
Build	/	編譯項目（Project）
Clean	/	清理項目（Project）的編譯輸出
Pack	/	項目（Project）打包
Publish	/	發佈項目（Project）
Restore	/	恢復項目（Project）
Test	/	執行項目（Project）中的單元測試

4、ASP.NET Core MVC 輸出HelloWorld

一、引入 ASP.NET Core MVC

修改應用啓動類(Startup.cs)，引入MVC模塊並配置默認路由

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        //引入MVC模塊
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseMvc(routes =>
        {
            //配置默認路由
            routes.MapRoute(
                name: "Default",
                template: "{controller}/{action}",
                defaults: new { controller = "Home", action = "Index" }
            );
        });
    }
}

二、建立Controller與Action

• 建立HomeController

在Ken.Tutorial.Web項目中添加文件夾：Controllers，並在文件夾中建立類HomeController類型選擇爲:class

using System;

namespace Ken.Tutorial.Web.Controllers
{
    public class HomeController
    {
    }
}

• 引用MVC命名空間，並繼承與Controller

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class HomeController : Controller
    {
    }
}

ControllerName=Home

• 定義Action：Index

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return Content("Hello World！");
        }
    }
}

ActionName=Index

三、項目啓動與訪問測試

• 修改協議與端口

修改Ken.Tutorial.Web項目Properties文件夾中launchSettings.json文件，使用HTTP協議並監聽端口5001

"Ken.Tutorial.Web": {
  "commandName": "Project",
  "launchBrowser": true,
  "applicationUrl": "http://localhost:5001",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }

• 啓動項目

按下F5啓動項目，項目啓動成功後，VS Code會幫咱們打開默認瀏覽器並訪問：http://localhost:5001

之因此顯示HomeController中Index(Action)的返回內容，是由於咱們前面定義了默認路由能夠從{controller}/{action}訪問路徑對應Action，而咱們又定義了默認值：
controller = "Home", action = "Index"

routes.MapRoute(
    name: "Default",
    template: "{controller}/{action}",
    defaults: new { controller = "Home", action = "Index" }
);

咱們也能夠經過http://localhost:5001/home/index顯示訪問

5、ASP.NET Core 視圖基礎使用

一、建立返回View的Action

在HomeController添加Action：Time

public IActionResult Time()
{
    //將當前服務器時間放入ViewBag中
    ViewBag.ServerTime = DateTime.Now;
    return View("Time");
}

二、建立視圖文件

在項目中建立文件夾 Views,並建立對應的HomeController視圖子文件夾：Home。
之因此這樣建立文件夾，是由於當咱們返回視圖時，只指定ViewName，而不指定完整的路徑。ASP.NET Core MVC框架會默認在如下項目目錄中依次讀取視圖文件：

• /Views/{ControllerName}
• /Views/Shared
• /Pages/Shared

若是找到視圖文件便會渲染視圖，若是沒找到便會拋出異常。

建立視圖文件 /Views/Home/Time.cshtml

@ViewBag.ServerTime  -ken.io

視圖渲染時@ViewBag.ServerTime會輸出Action中賦值的內容，
-ken.io會被做爲字符串渲染

三、啓動項目測試

按下F5啓動項目，項目啓動成功後在瀏覽器中輸入http://localhost:5001/home/time並訪問，將會看到如下輸出：

6、備註

一、附錄

• 本文代碼示例

https://github.com/ken-io/asp...

---

本文首發於個人獨立博客：https://ken.io/note/asp.net-c...