ASP.NET MVC 5 － Adding Validation

᳓前言

本篇文章將"Adding Validation"整理而成。

᳓重點整理

• 在Model類別中加入驗證邏輯，如此一來，在這個應用程式中對於該Model的所有新增、修改都會依照該邏輯進行驗證。
• ASP.NET MVC的其中一個核心設計概念為DRY(Don't Repeat Yourself)，意思是只需要指定功能或行為一次之後，在應用程式中有使用到的各部分就能夠體現出來。好處是能夠減少需要撰寫的程式碼，而且可以有效降低錯誤發生並方便維護。

᳓實作1. 修改Models/Movie.cs
首先要確認目前資料表的欄位，之後才能做比較。

開啟伺服器管理員->展開資料連接->展開Movies.mdf->右鍵dbo.Movies->選擇開啟資料表定義

尚未修改的dbo.Movies

修改Movie.cs，為各個欄位新增驗證邏輯。
在套件管理器主控台輸入Add-Midgration AddDataAnnotations，便會自動產生以下程式碼。
在套件管理器主控台輸入Update-database，執行完畢後再次查看資料表定義會發現已經變更完成。如此一來，當應用程式在變更資料表資料(呼叫SaveChanges方法)時，會優先判斷資料是否符合驗證邏輯，若是不符(比如必填欄位沒有資料)，便會拋出DbEntityValidationException的例外狀況，防止資料庫被存入不好的資料，增加應用程式的強健性。

修改後的dbo.Movies(StringLength：設定字串長度、Display：設定欄位顯示名稱、DataType：設定提示View如何顯示特定的資料、DisplayFormat：指定資料顯示的格式、Required：設定是否為必填項目、Range：設定值域、RegularExpression：設定輸入規則，可防止輸入空格、數字、特殊符號等)

ASP.NET MVC 5 － Adding a New Field

᳓前言

本篇文章將"Adding a New Field"整理而成。

᳓重點整理

• 在完全沒有資料庫檔案的狀況下，透過Code First建立資料庫及資料表。
• 在已經透過Code First建立的資料庫中，進行資料表的修改。

᳓實作1. 開啟Tools->NuGet Package Manager->Package Manager Console
記得先刪除在之前的練習中自動建立的App_Data/*.mdf檔案後再進行下列的練習。

᳓實作2. 啟用Migrations-在Package Manager Console輸入指令

1. 輸入"Enable-Migrations -ContextTypeName {WebApplication1}.Models.MovieDBContext"->Enter

2. 指令執行完畢後，會在專案中自動建立Migrations資料夾，且在該資料夾中新增Configuration.cs檔案

᳓實作3. 新增Migration-修改Migrations/Configuration.cs、在Package Manager Console輸入指令
修改完Congiguration.cs之後，一定要先重建專案，否則指令會執行失敗。當"add-migration Initial"指令執行完畢後，會自動產生所變更內容的{201804021004386}_Initial.cs檔案。需要注意的是，每次進行Code First Migrations (也就是輸入下一步的update-database指令)都會執行Seed()方法中的程式碼。

1. 輸入"add-migration Initial"->Enter

᳓實作4. 進行Code First Migrations-在Package Manager Console輸入指令
當"update-database"指令執行完畢，便已完成資料庫、資料表的建立，可開啟瀏覽器查看。

1. 輸入"update-database"->Enter

2. 網址列輸入"http://{localhost:port}/Movies/Index"

᳓實作5. 新增Rating新欄位-修改Models/Movie.cs、Controllers/MoviesController.cs、Views/Movies/Index.cshtml、Views/Movies/Create.cshtml、

接著要在Movie.cs新增一個Rating欄位，因此MoviesController.cs的Create Action需要增加Bind的欄位、Index.cshtml及Create.cshtml需要增加輸入欄位，而其他頁面，像是Edit.cshtml、Details.cshtml、Delete.cshtml也需要修改，但在這裡省略說明。值得注意的是，修改完畢後可以成功重建專案，但在瀏覽器瀏覽時會出現下圖的錯誤訊息，那是因為Model已經修改，但資料表還沒有更新，所以會以錯誤訊息提示必須更新資料表。

1. 網址列輸入"http://{localhost:port}/Movies/Index"

᳓實作6. 進行Code First Migrations-修改Migrations/Configuration.cs、在Package Manager Console輸入指令 為了使Model與資料表的內容一致，需要再次進行Code First Migrations，而每次進行Code First Migrations時都會重新執行一次Configuration.cs的Seed()，所以若是修改Configuration.cs便能將Rating欄位預設值輸入資料表中。值得注意的是，若之後只是修改預設值，並沒有更改欄位的話，可以直接執行"update-database"指令進行預設值的更新，不需要執行"add-migration"指令。

1. 輸入"add-migration Rating"->Enter

2. 輸入"update-database"->Enter

3. 網址列輸入"http://{localhost:port}/Movies/Index"可以看到Rating欄位已經輸入預設值"PG"

ASP.NET MVC 5 － Adding a Search

᳓前言

本篇文章將"Adding a Search Method and Search View"整理而成。

᳓重點整理

• 可直接在URL輸入參數便可作為字串進行標題的搜尋。
• 在View加入TextBox，可輸入文字並進行標題的搜尋。
• 在View加入DropDownList，可選擇類型並進行類型的搜尋。

᳓實作1. 修改Controllers/MoviesController.cs 
在Index Action新增searchString參數(當然也可以修改為直接利用URL Route的方式搜尋，請參考"ASP.NET MVC 5 － Adding a Controller")，並加入LINQ query程式碼。值得注意的是，LINQ query在初被定義時還沒執行，要等到Index Action回傳結果至View時才會執行。

1. 在網址列輸入"http://{localhost:port}/Movies/Index?searchString={searchString}"，按下Enter重新載入頁面即會顯示影片標題內含所搜尋字串的影片。

᳓實作2. 修改Views/Movies/Index.cshtml
然而經由修改URL的方式搜尋太不直覺，因此要在Index.cshtml頁面直接加入UI，提供輸入欄位以及控制按鈕，方便使用。

1. 一進入頁面就可以看到"BeginForm()"被編譯成<form>，其下含"TextBox()"被編譯成<input type="text">，以及<input type="submit">。(此時可直接利用UI進行搜尋，不需要添加與修改URL中的參數，Controller在執行時會自動取用對應id的元件值，若是將@Html.TextBox("searchString")改為@Html.TextBox("searchStrings")便會無法進行搜尋)

᳓實作3. 修改Views/Movies/Index.cshtml
光只是加入UI仍然沒有提供好的使用體驗，因為當使用者想要將搜尋結果分享給其他人的時候卻發現複製到的URL中並沒有附帶參數，不能夠直接顯示出搜尋的結果，所以要再進行一點修正，使用BeginForm("{Action Name}", "{Controller Name}", FormMethod.Get)。

1. 按下搜尋按鈕後，URL會自動添加"?searchString={searchString}"，因此該網址可直接複製至新頁面使用。

᳓實作4. 修改Controllers/MoviesController.cs、Views/Movies/Index.cshtml
接著練習加入下拉式選單至頁面中。利用LINQ query搜尋資料表中所有的類型，接著以Distinct()將重複的選項剔除後加入至List，最後將List的資料用ViewBag.SelectList({Collection.IEnumerable items}, "{Selected Value}")代入至View並顯示。

1. 一進入頁面就可以看到"DropDownList()"被編譯成<select>，除了資料庫中的類型外還增加了"全部"的選項，且預設選取"愛情片"。

C# － Function傳值和傳址的小測試

᳓重點整理
這是function透過傳值和傳址兩種方式傳入參數的小測試。傳值是只將function的參數值，設定成與輸入變數的值相同；而傳址則是直接將輸入變數作為function的參數使用，因此會造就以下幾點不同：

• 以傳值方式傳入的參數，在function中修改參數值也不會影響到輸入變數。
• 以傳址方式傳入的參數，在function中修改參數值會影響到輸入變數。
• 傳值跟傳址的function即使同名也視為不同的function，可正確執行。

᳓實作1. 建立專案
建立一個Windows Forms Application專案，並在Form拉入兩個Label、兩個Button。

᳓實作2. 修改FunctionRefTest.cs
加入兩個Button_Click事件、兩個function，並輸入以下程式碼，測試重點為在function中會修改參數值，並於function執行完畢後輸出變數值。

傳值測試：輸入變數值為4，輸出時不變。

傳址測試：輸入變數值為4，輸出時已被修改。

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