ASP.NET & Core를 다루는 기술: 38.3.2 따라하기 1: 사용자 모드 작성하기

14. 제이쿼리를 사용해 게시판의 최근 글 리스트를 출력시켜 주는 부분 뷰를 만들어 보자. Views 폴더의 DotNetNote 폴더에 _RecentlyNoteList.cshtml이라는 이름으로 뷰 페이지를 생성하고, 다음과 같이 코드를 작성한다. 제이쿼리 라이브러리는 _Layout.cshtml 파일의 <head> 태그 영역에서 참조하고 있어서 바로 제이쿼리 코드만 작성하면 된다.

▼ /Views/DotNetNote/_RecentlyNoteList.cshtml

<div id=“divRecentlyNoteList”></div>
<script>
  $(function () {
      var API_URL = ”/api/NoteService”;
      $.getJSON(API_URL, function (data) {
          var noteCommentList = ””;
          $.each(data, function (index, entry) {
              noteCommentList += ‘<div class=“post_item”>‘ +
                      ‘<div class=“post_item_text”>‘ +
                          ‘<span class=“post_date”>‘ +
                              moment(entry.postDate).format(‘YYYY-MM-DD’)
                          + ‘</span>‘ +
                          ‘<span class=“post_title”>‘ +
                              ‘<a href=“/DotNetNote/Details/’
                                  + entry.id + ’”>‘ +
                                  entry.title.substring(0, 31)
                              + ‘</a>‘ +
                          ‘</span>‘ +
                      ‘</div>‘ +
                  ‘</div>‘
          });
          noteCommentList += ””;
          
          $(”#divRecentlyNoteList”).html(noteCommentList);
      });
  });
</script>

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.