ASP.NET MVC 5 － Adding a Model

᳓前言
本篇文章將"Adding a Model"、"Creating a Connection String and Working with SQL Server LocalDB"與"Accessing Your Model's Data from a Controller"的前半部分合併整理而成，後半部分有一些其他說明，包含Strongly Typed Models以及在Visual Studio中開啟資料表等，有需要的再麻煩去看原文。

᳓重點整理

• 使用被稱為Entity Framework(簡稱為EF)的.NET Framework資料存取技術，進行Model類別的定義及運作。EF支援Code First的開發模式，能夠經由程式碼建立Model物件。
• 修改Web.config的connection string以連接LocalDB。(不建議產品化的應用程式仍然使用local database，可以輕鬆整合至SQL Server或SQL Azure)
• 新增MoviesController.cs，以Controller取得Model資料並透過View顯示在瀏覽器中，且Controller可透過Model進行資料庫的新增、修改、刪除。

᳓實作1. 新增Models/Movie.cs

1. 右鍵Models資料夾 -> Add -> Class

2. 輸入Movie -> Add

᳓實作2. 修改Movie.cs的內容
新增必要的屬性於物件中，每個屬性可視為table中的column(ID、Title、ReleaseDate、Genre、Price)，此物件的每筆instance可視為table的每筆資料。接著新增MovieDBContext，其衍生自EF所提供的DbContext基礎類別(需using System.Data.Entity)，負責處理取得、儲存及更新Movie的instance於資料庫中。

᳓實作3. 修改Web.config
新增<connectionStrings>。(connection string的name一定要與DbContext的類別名稱相同，而資料庫的名稱可以自由命名為*.mdf)

᳓實作4. 新增Controllers/MoviesController.cs
由於這次選擇的是"MVC 5 Controller with views, using Entity Framework"，因此新增完畢後會自行於MoviesController.cs中新增CRUD (Create, Read, Update, and Delete) Action程式碼，並於自動建立Views/Movies的資料夾時 一併建立其頁面Create.cshtml、Delete.cshtml、Details.cshtml、Edit.cshtml、Index.cshtml。若是新增Controller時遇到錯誤，請先重新建置專案。

1. 右鍵Controller資料夾 -> Add -> Controller -> MVC 5 Controller with views, using Entity Framework -> Add

2. 選擇Model class(Movie ({WebApplication}.Models))、Data context class(MovieDBContext ({WebApplication}.Models))並輸入Controller name(MoviesController) -> Add

᳓實作5. 透過瀏覽器新增一筆Movie資料
本篇文章並沒有建立LocalDB的說明，因為當第一次進行資料庫存取的同時便會自動建立LocalDB。

1. 在網址列輸入"http://{localhost:port}/Movies"，執行Movies的預設動作(Index) -> Create New

2. 輸入欄位資料(日期格式為月/日/年) -> Create

3. 新增完畢會自動跳回Index頁面，可以看到新增了剛剛所輸入的資料，而其他功能也都可以運作

ASP.NET MVC 5 － Adding a View

᳓前言
本篇文章將"Adding a View"整理而成。

᳓重點整理

• 利用"Razor view engine"能夠優雅的產生HTML，可以最少化所需要輸入的字母與擊鍵數。
• Controller接收到參數後，能夠根據參數去修改View的顯示。

᳓實作1. 新增Views/HelloWorld/Index.cshtml
新增HelloWorldController.cs的同時，會在Views的資料夾底下自動加入同名的HelloWorld資料夾，基於讓程式碼容易管理的習慣性原則，將Index.chtml新增至Views/HelloWorld資料夾中。

1. 右鍵Views/HelloWorld資料夾 -> Add -> MVC 5 View Page with Layout (Razor)

2. 輸入Index -> OK

3. OK(Views/Shared/_Layout.cshtml為可共用的檔案，能與其他cshtml在瀏覽器自動組合呈現)

᳓實作2. 修改Views/HelloWorld/Index.cshtml的內容-標題、文字

右鍵Index.cshtml -> View in Browser或View in Inspector即可檢視頁面
(若按下F5執行則輸入http://{localhost:port}/HelloWorld)

᳓實作3. 修改Views/Shared/_Layout.cshtml的內容
若是在頁面中有部分區域是不變的，例如頁面最上方的header及最下方的footer，藉由共用Shared資料夾中的.cshtml以節省修改的成本。@RenderBody()便是其他cshtml所插入並顯示的區域。

修改視窗的標題、頁面左上角的標題

᳓實作4. 修改Controllers/HellowWorldController.cs的內容、新增Views/HelloWorld/Welcome.cshtml並修改內容
HelloWorldController.cs修改Welcome Action的程式碼，傳遞query strings作為Welcome Action的參數，並將其值以ViewBag代入至View的Message、NumTimes參數，而Welcome.chtml則撰寫根據該參數運行迴圈的程式碼。

網址列輸入"http://{localhost:port}/HelloWorld/Welcome?name=Scott&numTimes=4"。

ASP.NET MVC 5 － Adding a Controller

᳓前言
本篇文章將"Getting Started"，與"Adding a Controller"合併整理而成。

᳓重點整理
MVC為Model-View-Controller的縮寫，是一種開發應用程式的架構，具有可測試、容易維護等優點。

• Model負責處理資料
• View負責產生HTML的介面
• Controller負責進行資料交換、控制程式運作流程

使用者透過瀏覽器向伺服器送出request後，經由View將request傳送給Controller，Controller會跟Model取得所需的資料並傳送給View，經由View回傳response至瀏覽器並呈現。

᳓實作1. Create a project

1. File -> New -> Project

2. C# -> Web -> ASP.NET Web Application -> OK

3. MVC -> 取消勾選"Host in the cloud" -> OK

᳓實作2. 新增Controllers/HelloWorldController.cs

1. 右鍵Controller folder -> Add -> Controller

2. MVC 5 Controller - Empty -> Add

3. 輸入HelloWorld -> Add

᳓實作3. 修改Controllers/HelloWorldController.cs
在App_Start/RouteConfig.cs中預設的routing格式為/[Controller]/[ActionName]/[Parameters]

1. 按下"F5"或"Ctrl+F5"執行即會自動開啟預設瀏覽器，並開啟初始頁面

2. 在網址列輸入"http://{localhost:port}/HelloWorld"，大小寫不拘，執行HellowWorld的預設action(Index)。

3. 在網址列輸入"http://{localhost:port}/HelloWorld/Welcome"，大小寫不拘，執行HellowWorld的Welcome action。(之所以要使用HtmlEncode()是為了防止惡意的輸入)

᳓實作4. 修改Controllers/HelloWorldController.cs的內容-query string
修改Welcome action，它將可傳遞兩個query strings作為Welcome action參數。

網址列輸入"http://{localhost:port}/HelloWorld/Welcome?name=Scott&numTimes=4"。(name、numTimes大小寫不拘；若numTimes不輸入已預設為1)

᳓實作5. 修改Controllers/HelloWorldController.cs的內容-parameter
修改numTimes為ID，則會去比對RoutConfig.cs中的設定，根據RegisterRoutes方法中的url:"{controller/{action}/{id}}"便能夠判斷ID為傳遞的參數。

網址列輸入"http://{localhost:port}/HelloWorld/Welcome/3?name=Rick"，傳遞parameter及query string作為Welcome action的參數。(由於parameter設為int，若輸入字母則會無法辨識)

᳓實作6. 修改App_Start/RoutConfig.cs的內容-parameters
新增一個name:"Hello"的route，便可新增一個新的url判斷，兩者可同時並存。

網址列輸入"http://{localhost:port}/HelloWorld/Welcome/Scott/3"，傳遞parameters作為Welcome的參數。(若輸入"http://{localhost:port}/HelloWorld/Welcome/3?name=Scott"會有同樣的顯示結果)

Node.js-Module(導論)

᳓重點整理

• 什麼是module？在此引用Node.js v7.7.3 Documentation的部分內文"In Node.js, files and modules are in one-to-one correspondence (each file is treated as a separate module)."。簡而言之，匯入一個檔案就可以說是匯入一個module。
• Module可分為兩類：
  Core module，已被編譯為二進位格式，屬於Node.js資源(source)的一部分，通常會比file module優先載入。在此引用Node.js v7.7.3 Documentation的部分內文"Node.js has several modules compiled into the binary. These modules are described in greater detail elsewhere in this documentation. The core modules are defined within Node.js's source and are located in the lib/ folder. Core modules are always preferentially loaded if their identifier is passed to require(). For instance, require('http') will always return the built in HTTP module, even if there is a file by that name."
  File module，自行撰寫或由他人撰寫的.js、.json或.node檔案。
• require()可匯入core module及file module，但是file module必須明確指定檔案路徑，可以是絕對路徑"/path/.../circle.js"，或是相對路徑"./circle.js"，當沒有註明路徑類型時會假設其為core module或是位於node_modules資料夾中。在此引用Node.js v7.7.3 Documentation的部分內文"A required module prefixed with '/' is an absolute path to the file. For example, require('/home/marco/foo.js') will load the file at /home/marco/foo.js. A required module prefixed with './' is relative to the file calling require(). That is, circle.js must be in the same directory as foo.js for require('./circle') to find it. Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder."。
• 當匯入模組成功後會傳回一個物件，包含該module的所有屬性及方法。但module中大部分的程式邏輯都視為private而無法直接被使用，除了exports及module.exports物件(object)。

᳓實作
Core module的寫法：

執行結果

File module的寫法：

執行結果

᳓其他參考文章
佳魁資訊所出版"為什麼全世界都在學Node.js"

Node.js-Synchronous和Asynchronous(導論)

᳓前言

非同步(Asynchronous)作為Node.js的一大特點，很難經由一篇文章便完全說明其精髓，預計整理出一系列文章並陸續發佈。

᳓重點整理

• 同步(Synchronous)：在程式碼執行過程中，必須依照編寫的順序執行，當一行程式碼執行完畢並傳回其結果之後，才會執行下一行程式碼。
• 非同步(Asynchronous)：與同步相反，當一行非同步的程式碼開始執行後，可以馬上接著執行下一行程式碼，不會耽誤後續程式碼的執行。而當該非同步的程式碼執行完畢後，可透過callback function傳回其結果，接著執行後續對應的程式碼。
• 在Node.js中，並不是全部的function都能夠以非同步的方式執行。

᳓實作
Synchronous的寫法：

執行結果

Asynchronous的寫法：

執行結果

᳓其他參考文章
佳魁資訊所出版"為什麼全世界都在學Node.js"

Node.js-Callback function(進階用法)

᳓相關文章

• Node.js-Callback function(導論)
• Node.js-Callback function(優點)

᳓重點整理

• 利用typeof可以檢查傳入的參數是否為function。
• Callback function可以針對特定function的執行方式進行客製化，以sort()進行簡單的舉例，日後再詳細介紹各種可客製化的function及規則。
• Callback function可以回傳非同步呼叫(Asynchronous function)的執行結果，以setTimeout()進行簡單的舉例，日後再詳細介紹非同步呼叫與同步呼叫。
• 這篇文章開始換了一個新的工具：Visual Studio Code。能夠安裝JavaScript Standard Style的擴充功能，幫助維持程式碼格式一致，且不需要另外開啟小黑窗執行程式。細節及其他內容請參考陳鍾誠的文章"用JavaScript實踐⟪軟體工程⟫的那些事兒"。

᳓實作
typeof的寫法：

執行結果

客製化的寫法(sort())：

執行結果

回傳非同步呼叫執行結果的寫法(setTimeout())：

執行結果

᳓其他參考文章
Techsith的Youtube影片"javascript callback functions tutorial"
W3Schools的文章"JavaScript Array sort() Method"
W3Schools的文章"Window setTimeout() Method"

Node.js-Callback function(優點)

᳓相關文章

• Node.js-Callback function(導論)

᳓重點整理

• Callback function能夠將原本塞在同一個function中的程式碼再度細分成獨立的function。在下面的例子中，使用Callback function的寫法不需要在function calc中寫許多的if也能夠達到相同的執行結果。
• 若Callback function在程式中只使用一次，可以不為function命名，因此被稱為Anonymous function。

᳓實作
一般function的寫法：
Callback function的寫法：

(若是忘了該怎麼執行請參考"Node.js-建立一個最簡單的Server")

執行結果

Anonymous function的寫法：

執行結果

᳓參考文章
Techsith的Youtube影片"javascript callback functions tutorial"

Node.js-Callback function(導論)

᳓前言

Callback function是撰寫JavaScript程式所必須熟練的基礎之一，為了之後能夠順利撰寫Node.js的程式，必須先做點功課。

᳓重點整理
Callback function能夠將function x作為另外一個function y的參數(callback)，且可以在function y中的任何地方、不限次數的執行。

᳓實作
撰寫
執行
(若是忘了該怎麼執行請參考"為什麼全世界都在學Node.js-建立一個最簡單的Server")

執行結果

᳓參考文章
Techsith的Youtube影片"javascript callback functions tutorial"

Node.js-建立一個最簡單的Server

᳓前言

為什麼全世界都在學Node.js，這是我第一本購入、有關Node.js的工具書，先前我完全沒有接觸過Node.js，連JavaScript都所知甚少，因此打算將一些心得記錄起來，希望對自己的理解及記憶能有所幫助，內容會參雜其他從網路上蒐羅的文章。

᳓重點整理

Node.js能夠做到：

• Node.js為一個JavaScript執行環境，可獨自建立一個伺服器。
• 該伺服器不會為每個HTTP連接產生一個新的OS處理程序，而是建立一個處理程序中可執行的事件，意指Node.js的執行方式雖為單一執行緒(Single threaded)，但其底層仍是多執行緒，請參考Daniel Khan的文章"How to track down CPU issues in Node.js"。在此引用其部分內文"The famous statement ‘Node.js runs in a single thread’ is only partly true. Actually only your ‘userland’ code runs in one thread. Starting a simple node application and looking at the processes reveals that Node.js in fact spins up a number of threads.This is because Node.js maintains a thread pool to delegate synchronous tasks to, while Google V8 creates its own threads for tasks like garbage collection."。
• Node.js屬於事件驅動，相比其他語言可以更節省伺服器的記憶體資源。在此引用Node.js官網的部分內文"In other systems there is always a blocking call to start the event-loop. Typically behavior is defined through callbacks at the beginning of a script and at the end starts a server through a block call like EventMachine::run(). In Node there is no such start-the-event-loop call. Node simply enters the event loop after executing the input script. Node exits the event loop when there are no more callbacks to perform. This behavior is like browser JavaScript -- the event loop is hidden from the user."。

結論：

• Node.js可以解決大量請求、長時間連接所導致的成本問題(如：即時線上聊天室等需要進行多Client端即時回饋的應用)。

᳓安裝步驟

• 進入Node.js官網，下載與作業系統相符的*.msi檔案，有LTS與Current兩種，個人覺得LTS雖然版本較舊但應該會較為穩定所以選擇LTS。

圖片來源：Node.js官網

• 依照精靈指示進行安裝即可(註：該書撰寫時仍需要手動加入環境變數，而我下載並安裝時發現已經不需要了)。

᳓實作
撰寫

• 開啟Notepad++，於新的空白文件輸入程式碼
• 輸入完畢，儲存成app_1.js檔

執行

• 開啟Node.js command prompt (安裝Node.js時會一併安裝)
• 輸入指令，將所在位置移動到app_1.js的檔案位置 ("cd.."可回到上一層資料夾、於C:\輸入"D:"可切換至D槽、"cd 資料夾名稱"可進入該資料夾)
• 輸入Node.js的執行指令：node app_1.js
• 開啟瀏覽器，於網址列輸入並搜尋伺服器IP及Port：127.0.0.1:3000
• 回到Node.js command prompt，按下Ctrl+C，可停止執行，此時再回到瀏覽器並重新整理，會發現已經無法連線至伺服器

執行結果

᳓參考文章
佳魁資訊所出版"為什麼全世界都在學Node.js"
Simen的文章"非同步程式碼之霧：Node.js的事件迴圈與EventEmitter"
Daniel Khan的文章"How to track down CPU issues in Node.js"