[MVC] 透過Entity Framework以database first建立簡單CRUD網頁

最近跟轉職中的同學聊到MVC，轉職課程中使用Database first建立網頁。

想到公司還在用紙本記錄user request，靈光一閃，不如用這個方式來時做看看。

(早就想做很久了，但公司其實沒有內網架站的server的需求，遲遲懶得動手...)

怎麼用Entity Framework以Database First建立網頁呢?

如果懶得看英文教學範例(文末的Ref:)，那就~~正戲開始~

Phase I. 先建立一顆DB (此案例用很簡單的一頁表格呈現)

Step. 1 先new一個專案，用來建立一顆DB

Step. 2 取名DB的名稱

Step. 3 加入一個新資料表

Step. 4 並給予名稱SRRecords

Step. 5 設計欄位屬性(可用SQL設計工具；也可以用T_SQL直接設計，端看個人喜好)，完成後點開始，使設計工具幫忙建立表格，完成後會看到『部屬成功』

Step. 6 這邊移動到SQL > (Localdb)\ProjectsV13，就可以看到我們新增的SRData資料庫，以及其所屬的dbo.SRRecords資料表；這個(Localdb)\ProjectsV13位置很重要，待會會用到。

Step. 7 選取檢視資料如下圖

Step. 8 輸入幾筆測試用資料，資料庫與資料表的部分就先到這邊~

Phase II. 建立一個MVC專案(會用到上段已建立的DB)

Step. 1 new一個專案，用來建立MVC網頁

Step. 2 選取Visual C# > Web >ASP.Net Web應用程式

Step. 3 選取MVC範本>無驗證

Step. 4 馬上我們就會用到Entity Framework，這個專案預設是沒安裝，照以下步驟安裝即可。

方案總管內點一下專案名稱 > 工具 > Nuget套件管理員 >管理方案的Nuget套件

搜尋EntityFramework > 勾選專案 >安裝

Step. 5 安裝完後，點選Model > 加入 >新增項目

Step. 6 選擇ADO.NET資料實體模型；

簡單來說我要將剛剛建立好的SRData資料庫，整包玩意兒丟進MVC這個專案使用

Step. 7 直接使用DB EF design

Step. 來源選擇sqlclient

Step. 9 伺服器名稱填入剛剛說很重要的(localdb)\ProjectsV13，此時就會看到剛剛建立的SRData資料庫名稱出現了 (因為專案我重複做了幾次練習，名字重複了，所以我的畫面選擇的是SRData_1才是剛剛建立的範例，命名已詞窮..)

Step. 10 模型新增精靈會自動將連線字串寫入Web.config

Step. 11 選取要使用的資料表

Step. 12 由於資料庫使用的安全性要求，需使用者確認SQL來源，由於都是本機開發，可以將『不要再顯示此訊息』打勾，並按『確定』

Step. 13 噹啷~資料表出現了，這時候SRData經被引用進這個MVC專案內了。

Step. 14 這時得做一個動作 方案總管 > 點選方案名稱> 右鍵點擊『重建方案』

為什麼要這樣做呢? 簡單說，就像是瀏覽器的F5一樣，多數網頁不會時刻更新，若干許久回來看網頁，理應應該更新的內容，還保持在舊的狀態，這時只需要點擊F5，就會刷新內容了。

專案有新增『東西』，就得要重建方案，讓專案知道有東西已經加進來專案內，現在可以使用囉~

應該可以這樣比喻的吧= =

Step. 15 接著 Controllers > 右鍵 加入> 新增 Scaffold 項目 .. 

起初，這個功能不知道啥意思，待會就能體會了

Step. 16 選取有View的(中文叫檢視)，並使用EF的MVC 5 controller

Step. 17 選取要使用的資料表與實體(都自動生成了，直接選就好)

特別要注意的是：在控制器名稱命名是採用 『資料表名稱』+Controller，

這邊採用預設生成的名字就好，不建議改動它

不熟悉的情況下去更名，後續會搞混控制器的關聯

Step. 18 如果Step. 17點擊後出現這個，記得要做Step. 14的『重建方案』呀~

Step. 19 完成後點開SRRecordsController.cs，便會看到這支控制器裏頭，包含了數個方法。

Step. 20 接著移動到Views >Home >打開 Index.cshtml

並在最尾端，加入以下兩行程式碼，加入完成後，點擊 F5以執行專案看結果。

<div>

    @Html.ActionLink("SR底加啦~我呼叫SRRecords", "Index", "SRRecords") <br />

    @Html.ActionLink("SR底加啦~我呼叫SRRecordsController", "Index", "SRRecordsController")

</div>

P.s cshtml跟html不同的地方是，cshtml這個附檔名是包含C#與html程式碼的一種檔案名稱，而html，是純html

Step. 21 仔細看兩行的差異，為什麼兩行執行的解果不同?

ActionLink(HtmlHelper, String, String, String)

先來了解一下微軟隊htmlhelper的定義文件。

ActionLink("顯示名稱", Action Name, Controller)

來~回到剛剛兩行範例。

 @Html.ActionLink("SR底加啦~我呼叫SRRecords", "Index", "SRRecords") ===>可以正確顯示出資料表的內容

    @Html.ActionLink("SR底加啦~我呼叫SRRecordsController", "Index", "SRRecordsController") ===>網頁404，顯示找源不到該資源

可以得知，呼叫controller是用controller名稱SRRecords呼叫，

在方案總管 > Controllers資料夾內的控制器檔名，SRRecordsController.cs僅只是檔名，

控制器並不是以檔名被呼叫。

所以在Step. 17才會先不建議更改Controller的預設名稱，

等熟悉怎麼使用後再來發揮囉~

以上，已經完成簡易的DataBase First with EF的MVC開發範例啦~

bye~ 

Ref:

https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/database-first-development/