11. Index.cshtml 뷰 페이지에 전체 할 일 리스트를 출력하는 코드를 작성한다. 이 코드는 @model 키워드로 컨트롤러로부터 List<T> 형태의 데이터를 전송 받아 Model 개체에 담은 후 반복 구문으로 데이터를 반복해서 원하는 UI에 담아 출력하는 방식으로 리스트 페이지를 구현한다.

▼  ~/Views/Task/Index.cshtml

@model List<DevMvcTaskList.Models.TaskModel>
 
@{
  ViewBag.Title = "Index";
}

<h2>할 일 리스트</h2>
 
<table class="table table-bordered table-condensed table-striped table-hover">
  <tr>
      <th>Id</th>
      <th>제목</th>
      <th>생성일</th>
      <th>완료</th>
  </tr>
  @foreach (var task in Model)
  {
      <tr>
          <td>@task.Id</td>
          <td>
              @if (@task.IsCompleted)
              {
                  <s>@task.Title</s>
              }
              else
              {
                  <text>@task.Title</text>
              }
          </td>
          <td>@task.CreationDate.ToShortDateString()</td>
          <td>
              <a href="/Task/Complete/@task.Id.ToString()">
                  @if (task.IsCompleted)
                  {
                      <text>되돌리기</text>
                  }
                  else
                  {
                      @:완료하기
                  }
              </a>
          </td>
      </tr>
  }
</table>


<a href="/Task/Create">등록</a>

---

 

레이저 표현식은 @ 기호를 통해서 뷰 페이지를 구성한다. 레이저 표현식은 <text> 태그 안의 텍스트를 직접 출력할 수 있다. 레이저 표현식의 @: 표현은 <text> 태그와 동일하다. 레이저 표현식에 대한 좀 더 자세한 내용은 ASP.NET Core 1.0을 학습할 때 다시 학습하도록 하자.