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"會有同樣的顯示結果)