9. 마지막으로 Views/Data/Index.cshtml 페이지 하단에 다음 코드를 추가 입력해 생성된 ViewComponent를 Index 페이지에 적용할 수 있다. 매개 변수로 "박용준"을 넘겨주어 해당 레코드만 찾아서 출력하는 예제다.

▼  Views/Data/Index.cshtml

@using DotNetNote.Models
@model IEnumerable<Data>
@inject DataFinder Finder

<h2>데이터 리스트</h2>
<h3>전체 데이터 출력</h3>
<ul>
  @foreach (var data in Model)
  {
      <li>@data.Id: @data.Name, @data.Title</li>
  }
</ul>
<hr />

<h3>단일 데이터 출력</h3>
@{
  var first = await Finder.GetDataById(1);
}
<div>
  1번 데이터: @first.Id, @first.Name, @first.Title
</div>
<hr />


<h3>뷰 컴포넌트 호출</h3>
<div>
  @await Component.InvokeAsync("DataList", new { name = "박용준" })
</div>

---

 

이 코드의 Component.InvokeAsync() 메서드는 첫 번째 매개 변수로 DataList 뷰 컴포넌트 이름을 지정하고, 두 번째 매개 변수로 DataList 뷰 컴포넌트에 name 매개 변수로 값을 전달해 현재 위치에 출력하도록 한다.