05. Asp.Net Core 3.x 筆記 ViewComponet

爲什麼使用ViewComponet

• PartView 不能實現業務邏輯
• ChildAction 要使用Controller的整個生命週期，開銷大

如何使用

• 新建ViewComponent類：
  新建文件ViewComponents,在其裏面新建類 CompanySummaryViewComponent

    public class CompanySummaryViewComponent : ViewComponent
    {
        private readonly IDepartmentService departmentService;
        public CompanySummaryViewComponent(IDepartmentService departmentService)
        {
            this.departmentService = departmentService;
        }

        public async Task<IViewComponentResult> InvokeAsync(String title)
        {
            ViewBag.Title = title;
            var summary = await departmentService.GetCompanySummary();
            return View(summary);
        }
    }

• 新建ViewComponent視圖
  在View/Shard文件夾下新建 Components/CompanySummary文件夾，在裏面新建 Default.cshtml

@model Three.Models.CompanySummary
    <div class="small">
        <div class="row h3">
            Company Summary
        </div>
        <div class="row">
            <div class="col-md-8">
                員工人數:
            </div>
            <div class="col-md-4">
                @Model.EmployeeCount
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                部門平均人數:
            </div>
            <div class="col-md-4">
                @Model.AvgDepartmentEmployeeCount
            </div>
        </div>

• 使用ViewComponent
  1.方式（一）

<div class="row">
    <div class="col-md-4">
        @await Component.InvokeAsync("CompanySummary", new { title ="彙總"})
    </div>
</div>

2.方式（二）

在_ViewImports.cshtml中導入本項目的TagHelper

@addTagHelper "*, Three"

CompanySummaryViewComponent對用的TagHelper是 <vc:company-summary>

<div class="row">
    <div class="col-md-4">
        <vc:company-summary title="彙總2"></vc:company-summary>
    </div>
</div>