標籤

2018年6月4日 星期一

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:設定輸入規則,可防止輸入空格、數字、特殊符號等)

2018年4月3日 星期二

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"

2018年3月26日 星期一

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>,除了資料庫中的類型外還增加了"全部"的選項,且預設選取"愛情片"。

2018年3月18日 星期日

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,輸出時已被修改。