3. Views 폴더에 DotNetNote 서브 폴더에 Index.cshtml 뷰 페이지를 생성하고 다음과 같이 코드를 작성한다. 다음은 Index.cshtml 뷰 페이지의 전체 코드다. 웹 폼 방식과 마찬가지로 대부분 Dul 클래스 라이브러리로 뽑아내어 UI를 꾸미는 형태로 리스트 페이지의 제목 링크 및 여러 가지 기능을 구현하고 있다. 게시판 리스트의 제목에 대한 링크는 asp-controller, asp-action과 함께 asp-route-id를 사용해서 현재 글의 Id 속성값을 함께 전송한다.

▼  /Views/DotNetNote/Index.cshtml

@using DotNetNote.Dul

@model IEnumerable<Note>

@inject INoteRepository DnnRepo

@{
  ViewData[“Title”] = “게시판 리스트”;
}

<h2 style=“text-align:center;”>게시판</h2>
<span style=“color: #ff0000”>
  글 목록 - ASP.NET Core 1.0 완성형 게시판입니다.
</span>
<hr />

<table style=“width: 760px; margin-left: auto; margin-right: auto;”>
  <tr>
      <td>
          
          <div style=“font-style:italic;text-align:right;font-size:8pt;”>
              Total Record: @ViewBag.TotalRecord
          </div>
          <table class=“table table-bordered table-hover table-condensed
                   table-striped table-responsive”>
              <tr style=“background-color:rgb(222, 222, 222)”>
                  <th style=“width:50px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.Id)
                  </th>
                  <th style=“width:360px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.Title)
                  </th>
                  <th style=“width:50px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.FileName)
                  </th>
                  <th style=“width:70px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.Name)
                  </th>
                  <th style=“width:90px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.PostDate)
                  </th>
                  <th style=“width:60px; text-align:center;”>
                      @Html.DisplayNameFor(model => model.ReadCount)
                  </th>
              </tr>
              
              <cache>
                  @최근 공지 글 2개 출력: 캐싱 적용