iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
2
Modern Web

ASP.NET Core 入門實戰30天系列 第 1

Day 1 ASP.NET Core 簡介 & Hellow Word 使用Razor Pages

  • 分享至 

  • xImage
  •  

本篇重點

介紹 .NET Core和 .NET Framework 差異
說明 .NET Core 的各種專案方式及差異
千年不變 Hello Word - Razor Pages篇

前言

以前大部分的經驗都還停留在 .NET webform.
如今 .NET Core 也來到了3.1版
這次決定直接上 .NET Core,趁這個機會來點一下技能樹

以下是這30天預計的範圍(會依照撰寫的狀況是情況調整):

  • Day 1 - Day 2: 概略性的介紹 .NET Core,又可分成哪些專案,示範Hello World
  • Day 3 - Day 8: .NET Core 基本的運作整理
  • Day 9 - Day 16: ASP .NET Core MVC
  • Day 17 - Day 21: Entity Framework Core
  • Day 22 - Day 28: 實際做一個小專案 使用 .NET Core
  • Day 29 - Day 30: 示範其他專案類型的CRUD

What is the ASP .NET Core

ASP .NET Core 現行已經來到了3.X版
是微軟設計新一代跨平台的 .NET 平台
使用的語言為C#
以下針對 .NET Core vs .NET Framework 兩大平台去做比較整理:

差異 ASP .NET Core ASP .NET
平台開放 真正支援跨平台(windows/linux/MacOS) 只能運行在windoes
開放原始碼 Open Source 大部分是不開放原始碼的
執行的CLR(註1) 使用CoreCLR CLR
使用時機 更輕量,使用資源較少,較符合Microservice或使用Container 仍以windows 為主要的服務平台
處理回應及要求 提供Middleware Components管理 使用 Handlers and Modules
server IIS, Apache…等 只限IIS
有無Cli 有(dotnet)
Deployment(註2) FDD&SCD FDD
安裝方式 有SDK和Runtime模式(類似Java) 只有一種模式

註1.

  • CLR 是ASP Dot NET用來管理 .NET 程序,處理資源回收編譯的虛擬機器元件,有點類似Java的JVM
  • ASP .NET Core 的CLR 稱為CoreCLR,而 .NET Core Cli 會執行CoreCLR

註2.

  • Framework Dependent Deployment(FDD) 是 .NET部署的一種方式,需要在運行的環境上安裝 .NET Framework runtime 環境
    • 指的是部署好的dll或exe,運行上的server也需要安裝對應的 .NET Core 或 .NET Framework
  • Self-contained Deployment(SCD) 新的部署方式,可以不需要安裝相關的runtime環境就可以針對在不同平台上部署執行

.NET Core 的各種專案方式及差異

 .NET新增加了幾個不同類型的專案開發方式,可以根據不同的需求,來選擇適合開發的工具,這裡列出官網上的分類逐一說明

  • web 開發(本系列重點)
    • 分成下列四種開發專案的方式
    1. Razer page
      類似webvForm的code behind. 保留了webForm直覺的開發方式,但不使用Viestate去儲存狀態,適合較小型且功能較單純需求,可以快速的開發功能單純且較實作簡單的專案,對於WebForm開發人員相對MVC上是比較好上手的
    2. MVC
      .NET Core 裡的MVC,和 .NET MVC 差不了太多,但就目前各專案的範本來說,MVC可以整合套用其他的專案範本,也可以整合前端的框架擔任API的角色,彈性比較高
    3. Blazor server
      屬於MVVM架構,使用component去模組化程式的邏輯,提供了前端及後端的功能的專案範本
    4. Blazor client
      和Blazor server很類似,只差在是純前端的專案,坦白說Blzaor的寫法覺得很接近Vue的概念,只是差在可以用C#去套用類似Vue的component,而且也提供純前端或前後端的選擇
  • web API (本系列重點)
    • Web API 和 .NET webAPI差不了太多,但底層專案運作的方式也是follow .NET Core的運作原理,這部分在後面會再說明
  • SingalR
    • .NET Core 同時也有支援實作WebSocket的方式,此部分在 .NET 4x時就有提供的即時通訊的實作方式
  • gPRC
    • Remote Procedure Call (RPC) framework. 這部分目前比較沒有涉獵,看起來是不同於HTTP的運作方式,這項技術現行已經存在一段一時間了,但微軟在 .NET Core時代加入此專案範本,並且可跨平台,.NET 4.5以上的版本也可以支援,但只有在 .NET Core 才有專案範本的選項

萬年不敗Hello World(Razor Pages篇)

一切都從Hello World開始

這部分針對Razor page,MVC,Blazor server 和Blazor client 去示範各種專案的Hello World. 在系列文章的最後面也會針對這些部分去示範CRUD

此外,接下來的文章都是使用VS2019 for Mac上操作,發現以前網路上的文章大部分都是VS Code開發,因此好奇試試看VS2019 for Mac的開發體驗,最後關於安裝VS2019 for Mac 的部分就不加已說明

筆者已經先行新增一個DoNETCore30的方案檔

Razor Page

開啟VS2019 for Mac(以下簡稱VS2019)
新增專案>選擇web Application>點選下一步

在這裡我們先不用使用Authentication,直接下一步

取名一個叫做RazorApp的專案,在這裡可以看到下面有可以建議git版本控管的選項,在這裡將此打勾

最後可以看到專案的目錄結構大概是這樣
詳細的目錄內容後面會再提到,這裡主要先試著使用預設模板,寫出第一個Hello World

在這裡可以關注一下Razor Pages的專案,在Pages會有對應的頁面,這一層有點類似webForm的aspx/.cs檔,只是單純將頁面的的部分拆成類似code behind的做法,所以同樣的index.cshtml下也會有一支對應的.cs程式

現在在.cs新增兩個變數NowTime以及Message,並再.cshtml呼叫@Model已綁定的這兩個參數,注意Modle要大寫

最後把專案build起來,就可以看到剛剛輸入的訊息了
其他部分則是VS2019提供的模板,目前這個專案還沒有任何Model的資料
萬事起頭HelloWorld結束

補充:
關於VS2019快捷鍵在Mac上的使用方式
在這裡推薦選擇混合(可以同時並存windows上的優點以及Mac上的習慣)
另外建議可以設定一個快捷鍵Clean project
筆者自己在測試時發現,在windows上直接重build專案照理來說就會更新了
但不曉得for Mac的版本,必須要Clean目前的專案在重Build才會更新
索性就直接設定一個快捷鍵給它

快捷鍵設定可以去上設定,這裡將Clean 設定如下
Visual Studio > Preferences > Environment > Key Bindings

另外一點就build,以前在win環境上點Control +F5可以build專案並開啟瀏覽器,關閉瀏覽器就會同時stop run了,根據測試在mac並不會同時,需要在手動Stop,因此也可以記一下快捷鍵比較方便

更正:
後來比對發現,Control + F5 本來就只是start 的功能
上述所說明的功能應該是VS2019內建的IIS Express,但因為在for mac版本來就不會有這項功能
所以才造成操作上不太習慣的錯覺,在這裡更正一下

這邊就是剛剛說的可以根據自己的習慣選擇不同模式,一開始安裝也會問你要不要設定,如果要調整就是在這裡去做更改

最後最後
來釐清一個可能有些人會有的問題

.NET Core == ASP .NET Core ??

先來看一張架構圖

(圖片來源:https://dotnettutorials.net/)

.NET Framework和.NET Core是指runtime的環境,底下還有包含一堆微軟提供了一些libraries以及API, 在ASP.NET Core的平台上包含了全部的 .NET Core 1.x & 2.x 和現在最新的3.x ,以及.NET Framework 4.X版,其中只有 .NET Core 的部分是跨平台的,但根據架構圖, 3.x版之後的和前版本是獨立的, 但這整個部分都是指ASP .NET Core這個平台所提供的服務, 在這系列文章提到的 .NET Core是指

ASP .NET Core 下 .NET Core 3.1的開發版本


礙於篇幅
今天第一天就先寫到這邊
下一篇會繼續示範其他專案的HellWorld
小弟也是從webForm跳入 .NET Core的蔡逼八
雖然以前有學過 .NET MVC但並沒有像這次當個主題來研究
如果有說明錯誤的還請各位大大指正


參考資料:
https://blog.alantsai.net/posts/2017/10/net-framework-see-new-core-04-net-core2-intro

https://www.tpisoftware.com/tpu/articleDetails/1438

https://blog.darkthread.net/blog/hello-razor-pages/

https://dotnettutorials.net/lesson/introduction-to-asp-net-core/


下一篇
Day 2 Hello World 大亂鬥 using Blzaor& MVC
系列文
ASP.NET Core 入門實戰30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言