[Asp.Net Core Mvc] Part.11 實作可重複使用的 Partial View 部份檢視

接著上篇【[Asp.Net Core Mvc] Part.10 使用 Code First 運用 Migration 進行 DB 資料表更新】，這次我打算在「汽車選單」的首頁裡，把汽車的清單，增加卡片的效果，而這卡片的效果就是使用Partial View來實踐。

什麼是Partial View呢！？有玩過前端設計的開發人員對於切版後的局部頁面開發就會特別有感（或是接近於ASP.NET的Master-Page），而 MVC 也承襲這種開發方式，甚至可以做到多層的巢狀效果，但這次我只談一層就好，多層的做法就是如法炮製，接下來就是這次文章所要實作的 Partial View 。

一、在 View/Shared 新增一個 Partial View 如下：

Partial View的命名規則通常為前面「_」+名稱+「Partial」，如「_CarCardPartial」。

@model IEnumerable<CarModel>
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4 col-xl-3 col-lg-4 col-md-6 col-sm-12">
<div class="card">
<div class="headshot">
<img class="card-img-top" src="~/images/@item.ImgName"
alt="@item.ImgName" />
</div>
<div class="card-body">
<h5 class="card-title">@item.Label</h5>
<p class="card-text">@item.Type</p>
<p class="card-text">@item.Color</p>
<a href="@item.Url"
class="btn btn-primary" target="_blank">奇摩介紹</a>
</div>
</div>
</div>
}
</div>

二、從「汽車選單」的首頁(Views/Cars/index.cshtml)後面嵌入 Partial View (_CarCardPartial) ，也把Model 資料集合帶入，一併傳送到 _CarCardPartial.cshtml 使用

@await Html.PartialAsync("_CarCardPartial", Model)

最後結果畫面：

看到以上卡片效果的 Partial View ，雖然只有四筆資料，但也只需要編輯一次局部檔就可以做到重複使用，這個應用會很常用到，理解上也不會太難，但是在於整個網站佈局時需要特別注意，不要 Partial View 和 View 混淆了，謝謝。