標籤：

手把手教你ASP.NET Core

06-04
手把手教你ASP.NET Core

來自專欄一隻程序汪的自我修養

ASP.NET Core篇

上一篇手把手教你寫dotnet core(入門篇)我們已經簡單在dotnet core裡面跑了個"hello world!"和累加程序.

今天我們的步子邁大一點,直接上 ASP.NET Core了

ASP.NET Core 是一個新的開源和跨平台的框架，用於構建如 Web 應用、物聯網（IoT）應用和移動後端應用等連接到互聯網的基於雲的現代應用程序。ASP.NET Core 應用可運行於 .NET Core 和完整的 .NET Framework 之上。 構建它的目的是為那些部署在雲端或者內部運行（on-premises）的應用提供一個優化的開發框架。它由最小開銷的模塊化的組件構成，因此在構建你的解決方案的同時可以保持靈活性。你可以在 Windows、Mac 和 Linux 上跨平台的開發和運行你的 ASP.NET Core 應用。 ASP.NET Core 開源在 GitHub 上。

創建ASP.NET Core程序

開發環境: dotnet SDK + VS Code

這裡還是直接使用dotnet new命令來創建ASP.NET Core項目, 終端中輸入"dotnet new web -n FirsrMVC".

自動創建FirsrMVC文件夾並生成對應的csproj和CS文件,具體操作和輸出信息如下:

? codelover-blog git:(master) ? dotnet new web -n FirsrMVCThe template "ASP.NET Core Empty" was created successfully.This template contains technologies from parties other than Microsoft, see https://aka.ms/template-3pn for details.Processing post-creation actions...Running dotnet restore on FirsrMVC/FirsrMVC.csproj... Restoring packages for /Users/liguobao/code/codelover-blog/FirsrMVC/FirsrMVC.csproj... Generating MSBuild file /Users/liguobao/code/codelover-blog/FirsrMVC/obj/FirsrMVC.csproj.nuget.g.props. Generating MSBuild file /Users/liguobao/code/codelover-blog/FirsrMVC/obj/FirsrMVC.csproj.nuget.g.targets. Restore completed in 1.97 sec for /Users/liguobao/code/codelover-blog/FirsrMVC/FirsrMVC.csproj.Restore succeeded.? codelover-blog git:(master) ? cd FirsrMVC? FirsrMVC git:(master) ? lsFirsrMVC.csproj Program.cs Startup.cs obj/ wwwroot/

Program.cs

在VS Code中打開FirsrMVC文件夾,簡單看一下文件和Program.cs的代碼

Program.cs依舊是Main主方法,然後調用了一下BuildWebHost方法,BuildWebHost返回一個IWebHost的實例,接著Run.

先不管這裡具體做了什麼事情,我們從語義上理解一下.

  1. BuildWebHost構建一個Web的Host實例,然後把WebHost實例運行起來了
  2. 創建WebHost使用了一個Startup的類
  3. 關於詳細WebHost的詳細解析見:ASP.NET Core 運行原理解剖[1]:Hosting

Startup.cs

先直接上一波代碼

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Http;using Microsoft.Extensions.DependencyInjection;namespace FirsrMVC{ public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } //直接往HTTP Response中寫入"Hello World!",即在頁面直接顯示此字元 app.Run(async (context) => { await context.Response.WriteAsync("Hello World!"); }); } }}

  1. ConfigureServices:運行時被調用,將服務(services)添加到容器(container)中
  2. Configure:運行時被調用, 配置HTTP request 的pipeline

嗯,看不懂?沒關係,待會一個個演示.

我們這裡還是直接先跑一下程序,FirsrMVC文件夾路徑下執行:dotnet run

輸出如下:

? FirsrMVC git:(master) ? dotnet runHosting environment: ProductionContent root path: /Users/liguobao/code/codelover-blog/FirsrMVCNow listening on: http://localhost:5000Application started. Press Ctrl+C to shut down.

然後訪問http://localhost:5000看看.

好了,第一個MVC程序已經跑起來了,本文結束.逃...

這裡應該還有人吧?那我們繼續了.

wwwroot中的靜態文件

  1. 在wwwroot文件夾新增first.html,隨便寫個能看見的HTML標籤(我寫的是p標籤)

  2. 在 Configure 方法中添加一句 app.UseStaticFiles(); 然後再重新運行一下

  3. 訪問localhost:5000/first.ht

本步驟完成.

UseStaticFiles()方法:調用一個讀取wwwroot文件夾下面的靜態文件輸出的中間件註冊到程序中,從而完成靜態文件的輸出.

這裡也告訴我們,ASP.NET Core的靜態文件(JS+CSS+圖片...)之類的都可以放這邊來.

甚至於如果簡單做前後端分離的話,前端的vue/react項目都可以扔這裡去.

重頭戲MVC

終於要講到MVC了.

MVC模式最早由Trygve Reenskaug在1978年提出[1]，是施樂帕羅奧多研究中心（Xerox PARC）在20世紀80年代為程序語言Smalltalk發明的一種軟體架構。MVC模式的目的是實現一種動態的程式設計，使後續對程序的修改和擴展簡化，並且使程序某一部分的重複利用成為可能。除此之外，此模式通過對複雜度的簡化，使程序結構更加直觀。軟體系統通過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。

  1. 控制器（Controller）- 負責轉發請求，對請求進行處理。
  2. 視圖（View） - 界面設計人員進行圖形界面設計。
  3. 模型（Model） - 程序員編寫程序應有的功能（實現演算法等等）、資料庫專家進行數據管理和資料庫設計(可以實現具體的功能)。

以上概念來自維基百科:MVC

在ASP.NET Core,MVC模型一般就對應著三個文件夾,Models/Views/Controllers.

  1. Models:存放一些業務實體類,如Student,Course等,表現上就是C#的.cs文件
  2. Views:存放CSHTML文件,ASP.NET Core的模板文件,類HTML,也可以寫C#代碼
  3. Controllers: cs文件,繼承Controller類的XXXController,實現業務邏輯代碼

下面一起來寫一個簡單的MVC玩玩.

Startup

修改 Startup.cs的代碼,新增MVC中間件的引用,操作如下:

  1. Startup.cs中的ConfigureServices方法下新增:services.AddMvc();
  2. Configure方法下去掉之前的UseMvc,改成

app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); });

全部代碼如下:

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.Extensions.Configuration;using Microsoft.Extensions.DependencyInjection;namespace FirsrMVC{ public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } }}

Controllers

新增Controllers文件夾,在此文件下新建HomeController.cs文件,然後填入一下代碼:

using System;using System.Collections.Generic;using System.Diagnostics;using System.Linq;using System.Threading.Tasks;using Microsoft.AspNetCore.Mvc;namespace FirsrMVC.Controllers{ public class HomeController : Controller { public IActionResult Index() { return View(); } public IActionResult About() { return Json(new { name = "我的名字", success = true }); } }}

到這裡,我們先運行一下代碼.

如無意外的話,

訪問localhost:5000/ 空白一片,

訪問localhost:5000/Home/Abo 會輸出

{ "name": "我的名字", "success": true}

localhost:5000/

其實這裡訪問的是localhost:5000/Home/Ind,對應方法是HomeController/Index

我們看一下Log輸出會發現這樣的一句錯誤"fail: The view Index was not found. Searched locations: /Views/Home/Index.cshtml, /Views/Shared/Index.cshtml"

原因是HomeController中的Index返回的是View,

程序默認就會去/Views/目錄下尋找/Home/Index.cshtml文件來渲染然後返回給瀏覽器,但是這裡我們並沒有這個文件,所以直接GG.

localhost:5000/Home/Abo

對應方法是HomeController/About,返回為Json數據,不需要View.

所以直接就往瀏覽器輸出了{ name = "我的名字", success = true }的Json格式數據

Views

上一步我們的的Controller已經建好了,但是缺View文件,我們這裡來創建一下View文件

新建Views/Home文件夾,然後再在此文件夾下新增Index.cshtml文件

然後在Index.cshtml中輸入:

<p>First View Page</p>>

刷新一下localhost:5000/頁面.

View文件也建立好了.

Models

最後簡單講一下Model.

同理,新建Models文件夾,在此文件夾下新增Student.cs文件.

namespace FirsrMVC{ public class Student { public string Name { get; set; } public int Age { get; set; } }}

我們想做的要做的是把Student信息通過Controller返回給View,然後用View渲染出來.

修改一下HomeController/Index方法:

public IActionResult Index() { Models.Student student = new Models.Student() { Name = "小明", Age = 16 }; return View(student); }

修改一下Views/Home/Index.cshtml

@model FirsrMVC.Models.Student@if(Model !=null){ <p>@Model.Name<span>今年</span>@Model.Age<span>歲</span></p>}else{ <p>這裡什麼都沒有.</p>}

重新運行一下程序,訪問localhost:5000/

MVC結束.

本文完.

預告:下一節配置文件+DI依賴注入.


推薦閱讀：

TAG:dotnetcore | MVC |