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

小編:啊南 34閱讀 2020.11.19

一、前言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框架上手
2、本教程環境信息
軟件/環境

說明

操作系統

Windows 10

SDK

2.1.401

ASP.NET Core

2.1.3

IDE

Visual Studio Code 1.27

瀏覽器

Chrome 69

3、前置知識
你可能需要的前置知識

MVC框架/模式介紹
https://baike.baidu.com/item/mvc

控制反轉(IOC)原則與依賴注入(DI)
ASP.NET Core 默認集成了DI。所有官方模塊的引入都要使用DI的方式引入。

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

二、項目準備1、項目創建
.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
2、VS Code 配置
安裝基于Solution開發 .NET Core 項目的擴展
擴展名

說明

vscode-solution-explorer

創建、刪除、重命名或移動解決方案、解決方案文件夾和項目。管理項目引用。

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

三、VS Code開發基于解決方案的項目說明1、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就好。

2、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)中的單元測試

四、ASP.NET Core MVC 輸出HelloWorld1、引入 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" }
            );
        });
    }
}
2、創建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

3、項目啟動與訪問測試
修改協議與端口
修改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顯示訪問

五、ASP.NET Core 視圖基礎使用1、創建返回View的Action
在HomeController添加Action:Time

public IActionResult Time()
{
    //將當前服務器時間放入ViewBag中
    ViewBag.ServerTime = DateTime.Now;
    return View("Time");
}
2、創建視圖文件
在項目中創建文件夾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會被作為字符串渲染

3、啟動項目測試
按下F5啟動項目,項目啟動成功后在瀏覽器中輸入http://localhost:5001/home/time并訪問,將會看到以下輸出:
關聯標簽:
华东15选5彩票奖结果 麻将来了金币交易 北单跟足彩的赔率 可以单机的麻将手游 福建36选7开奖结果今天 北京赛车pk10计划网站 卡五星麻将84张调几档 真人龙虎斗怎么赢钱保盈 彩票中大奖 体彩泳坛夺金开奖结果 1青海11选5 福建22选5开奖查询结果 大赢家比分-足球比分,即时比分 10元可提现的棋牌 皇冠国际线上娱乐平台 千禧3dp3试机号今天 顶呱刮彩票下载