前言

昨天完成了報名資料刪除、不在報名時間內無法報名及顯示已報名人數的功能，今天將會使用 Partial View 來顯示 Bootstrap 的 Alert 作為提示訊息的元件。

並且在各頁面、功能上控制好顯示邏輯、權限，例如：活動頁面的編輯、刪除按鈕僅能在登入者為活動舉辦者時，才可顯示。除此之外不顯示。

Controller

EventsController

若要使該活動頁面的編輯/刪除按鈕僅在登入者為該活動舉辦者時才顯示，則最簡單的做法就是在 Controller 判斷該邏輯，並依據 true/false 將值放到 ViewData 供 View 做判斷。

在 Action Details 加入此判斷：

if(userId != @event.CreateUser)
{
    ViewData["ShowEditBtn"] = false;
}
else
{
    ViewData["ShowEditBtn"] = true;
}

View

Detials.cshtml

取代原本 Edit 的 Code：

@{
if ((bool)ViewData["ShowEditBtn"])
    {
        <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a>
    }
} 

Partial View

_MessageNotification

Partial View 我認為就像是給 View 使用的 Function 一樣，用來減少 Code 的重工。當有多個 View 都有相同的元件要使用時，就可以寫成 Partial View 來呼叫。

不過 Partial View 還是跟原先的 View 一樣，不適合做複雜的邏輯。

Partial View 的檔案會放置在 Views/Shared。

接下來我們將 Bootstrap 的 Alert 做成 Partial View，作為報名成功後的訊息顯示：

@if (TempData["Message"] != null)
{
    <div class="alert alert-success" role="alert">
        @TempData["Message"]
    </div>
}

在 Details.cshtml 原本顯示 TempData["Message"] 的部分，換成呼叫 Partial View 來取代：

@await Html.PartialAsync("_MessageNotification", TempData["Message"])

實際成果

變成了 Alert 元件顯示，比原先只用文字顯示的方式好看多了。

本日結語

今天加入了 Partial View 的部分，明天會將活動列表設定為系統起始頁面，並且用 Bootstrap 的 Card 來呈現，使畫面更加好看，且會使用 View Component 的方式來呈現。

其實還有搜尋功能還沒做，希望在最後一天可以完成...

Reference

[鐵人賽Day13] - View(3) / Partial View及View Component