[Asp.Net Core Mvc] Part.9 利用Code First建立資料庫CRUD資料列表及設定Layout佈局檔

接下來我們會承接上一篇「[Asp.Net Core Mvc] Part.8 使用Model資料模型，透過Scaffolding建立View檢視」來做到更好的效果，例如結合DB進行CRUD，而且會用比較正常的 MVC 該有的開發方式來一次做到位，流程上設定步驟如下：

Model --> Controller --> Scaffolding --> DbContext --> View --> Layout(View)

一、Model：建立Model物件，並使用Data Annotations建立View的顯示方式

public class CarModel
{
[Display(Name = "編號")]
public int Id { get; set; }
[Display(Name = "廠牌")]
public string Label { get; set; }
[Display(Name = "型號")]
public string Type { get; set; }
[Display(Name = "排氣量")]
public double cc { get; set; }
[Display(Name = "顏色")]
public string Color { get; set; }
}

二、Controller：利用Scaffolding建立CRUD的View檢視

三、DbContext：自動建立出資料庫連線物件

appsettings.json設定連線字串

四、同步資料庫的資料表

輸入以下指令：

Add-Migration IdentityDB -Context CarContext
Update-Database -Context CarContext

五、View指定新的Layout

從Views/Shared/_Layout.cshtml複製新的檔案在該資料夾下，並改名為_LayoutCar.cshtml，修改內容如下圖

<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Cars" asp-action="Index">最近新車</a>
</li>

把 Views/Cars/Index.cshtml 新增一行程式如下圖，代表該Cars/Index.cshtml會直接套用到 _LayoutCar.cshtml 新的佈局檔，而不只是局部更新畫面。

Layout = "~/Views/Shared/_LayoutCar.cshtml";

六、在首頁新增選單「汽車清單」

<li class=”nav-item”>
<a class=”nav-link text-dark” asp-area=”” asp-controller=”Cars” asp-action=”Index”>汽車清單</a>
</li>

畫面選單如下：

1、點選「汽車清單」後，畫面轉跳如下：

2、點選「Create New」新增一筆資料

3、顯示新資料畫面

4、資料庫裡資料：

大功告成？？？資料庫有資料，Action/View 也都有動作，哪邊還有問題呢？不覺得怪怪的…回顧一下上面的畫面30秒…

就是第2點【2、點選「Create New」新增一筆資料】裡的選單怎麼是「首頁的選單」，而不是進入「汽車選單」時，新佈局檔( _LayoutCar.cshtml ) 的樣子，這個時候我們需要一個對應初始佈局檔 Views/Cars/_ViewStart.cshtml ，可以直接從Views/_ViewStart.cshtml 直接複製一份檔案到 Views/Cars/ 底下即可，並修改內容Layout如下：

Layout = "~/Views/Shared/_LayoutCar.cshtml";

這樣一來在Cars資料夾下的所有頁面都會自動進行對應至 Views/Cars/_ViewStart.cshtml 的佈局檔，如目前例子資料夾下 Create.cshtml 、 Delete.cshtml、 Details.cshtml 、Edit.cshtml 等這四個頁面就可以不用再做設定，MVC這一點是不是覺得很方便。

結果畫面：(顯示就比較正常)

畫面第2點的頁面問題就解決，已經正確對應到新佈局檔(_LayoutCar.cshtml)，而不是錯誤的「首頁的佈局」(_Layout.cshtml)，會不會覺得有點混淆，這個就是我們談到 MVC 以來，常常要注意的觀念，要能配合MVC它的規範，既然是規矩的話，基本上就不用太多的說明，因為都是MVC的隱含約定，它的設計就是考量到多種情況，而我們就只需要遵守約定即可。

言歸正傳，最後的佈局檔可以花點時間思考，我們後面會再談到深入應用，如何結合PartialView，謝謝。