[ToDoList 앱 개발] ASP.NET Core MVC - 최종 데이터 출력 :: Phantom Programming 팬텀 프로그래밍

[ToDoList 앱 개발] ASP.NET Core MVC - 최종 데이터 출력

2024년 11월 26일 19시 36분 37초에 업로드 된 글입니다.

작성자: Devrun

우리가 이전 글에서 배운 것은 데이터를 입력하는 것을 배웠다. 그럼 이제 Create View를 Home 화면에 출력하고 우리가 만든 데이터를 출력해야 하지 않을까? 그렇다 우리는 이번에 최종적으로 데이터를 출력하고 Create View를 Navbar에 링크할 것이다.

Solution Explorer에서 -> Shared -> _Layout.cshtml을 열자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ToDoList</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ToDoList.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ToDoList</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - ToDoList - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

그러면 위와 같은 코드가 나온다. 여기서 우리가 크게 3가지 파트로 나눠서 볼 수 있다.

Header

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ToDoList</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

이 부분은 우리가 앞으로 모든 페이지에서 사용할 상단의 Navbar라고 보면 된다. 대부분의 사이트에 가면 메뉴라는 것이 있는데, 이 부분이 그 부분을 해당한다. 그리고 로고도 여기에 작성할 수 있다. 더 깊게 들어가면 글이 길어진다. 이 부분은 w3school, Codecademy 등에서 HTML과 CSS 기본을 배우고 넘어오면 좋을 것 같다.

Renderbody

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

이 부분이 매우 중요하다. 이 부분이 없다면 우리가 만든 뷰는 나오지 않는다. RenderBody()라는 Method가 있는데, 이 함수가 우리가 만든 뷰를 불러와서 표시하는 역할을 한다.

Footer

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - ToDoList - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

페이지 최하단 표시될 것을 작성한다. 주로 사업자 등록 표시, 카피라이트 표시 등을 한다.

우리는 여기서 Header를 손 볼 것이다.

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ToDoList</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <!-- 변경 된 부분-->
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Create" asp-action="Index">Create Task</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

위 코드에서  이 작성된 곳 바로 알에 <li> 태그를 가지고 있는 곳에 anchor tag 속성을 수정해줄 것이다.

asp-controller -> 기존 Home으로 설정되어 있는데 이것을 Create로 변경

asp-action -> 기존 Privacy로 되어 있다. 이것을 Index로 변경

태그와 태그 종료 선언 사이에 Create Task

자 이제 사이트를 실행해 보자

Create Task 메뉴가 상단에 만들어져 있고, 그것을 클릭하면 우리가 만든 Form으로 이동된다.

이제 홈 화면을 꾸며 보자

Solution Explorer -> Views -> Home -> Index.cshtml 파일을 실행

그러면 아래와 같은 코드가 작성되어 있을 것이다.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

여기서 <div> 영역을 모두 지워주자.

@{
    ViewData["Title"] = "Home Page";
}

위와 같이 될 것이다.

자 그러면 우리는 여기서 생각해야 한다. 데이터를 불러오려면 어떻게 해야 할까?

간단하다, 데이터를 가지고 있는 Model을 바인딩시키면 된다.

코드 최상단에 위와 같이 우리가 만든 Model ToDoItem을 바인딩시키자.

@model IEnumerable<ToDoList.Models.ToDoItem>

@{
    ViewData["Title"] = "Home Page";
}

그리고 아래와 같이 뷰를 만들어줄 것이다.

@model IEnumerable<ToDoList.Models.ToDoItem>

@{
    ViewData["Title"] = "Home Page";
}

<h1>Task List</h1>

@if(!Model.Any()) {
    <p>No task avaliable</p>
} else {
    <table class="table">
        <thead>
            <tr>
                <th>Task Name</th>
                <th>Status</th>
            </tr>
        </thead>

        <tbody>
            @foreach (var task in Model)
            {
                <tr>
                    <td>@task.TaksName</td>
                    <td>@(task.isCompleted ? "Yes" : "No")</td>
                </tr>
            }
        </tbody>
    </table>
}

위 코드를 간단하게 설명하고 넘어가겠다.

@if (!Model.Any()) -> 데이터가 Empty 상태라면 <p>태그 안에 내용을 보여준다.

@foreach (var task in Model) -> 모델로 불러온 값을 var task에 입력한다.

@task.TaskName -> 불러온 데이터 중 TaskName을 출력한다.

@(task.isCompleted ? "Yes" : "No") -> task가 completed 면 yes를 아니면 no를 출력한다. if statement를 줄여서 표기 한 것이다.

이제 한 단계만 더 하면 완성이다.

Solution Explorer -> Controller -> HomeController.cs

이제 홈 컨트롤러도 우리의 데이터를 받을 준비를 해줘야 한다. 아니면 아래와 같이 에러가 발생한다.

HomeController.cs

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using ToDoList.Data;
using ToDoList.Models;

namespace ToDoList.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private readonly AppDbContext _context; // Add Database Context

        public HomeController(ILogger<HomeController> logger, AppDbContext context)
        {
            _logger = logger;
            _context = context;
        }

        public IActionResult Index()
        {
            var task = _context.ToDoItems.ToList();
            return View(task);
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

위와 같이 여러분의 코드를 수정하자. 아주 간단하게 설명도 하고 넘어가겠다.

readonly 읽기 전용으로 AppDbContext 선언

Index로 View 리턴할 때 우리가 만든 변수 task에 Db의 아이템을 입력

View를 반환할 때 받아온 Db의 아이템을 출력

실행해서 보면 위와 같이 뜰 것이다.

왜냐면 우리는 그 어떤 아이템도 추가하지 않았기 때문에, 아이템이 등록되어 있지 않다고 뜨는 것이다.

아래 동영상에서 코드를 실행하고 보여줄 것이다.

(죄송합니다. 4K라...)

'Tutorial > ToDoList - ASP.NET Core' 카테고리의 다른 글

[ToDoList 앱 개발] ASP.NET Core MVC - 4편 데이터 입력 (0)	2024.11.26
[ToDoList 앱 개발] ASP.NET Core MVC - 3편 Form을 제작해보자 (0)	2024.11.26
[ToDoList 앱 개발] ASP.NET Core MVC - 2편 DB 및 모델 생성 (0)	2024.11.25
[ToDoList 앱 개발] ASP.NET Core MVC - 1편 프로젝트를 생성하자 (0)	2024.11.25

다음글이 없습니다.

이전글이 없습니다.

'Tutorial > ToDoList - ASP.NET Core' 카테고리의 다른 글

티스토리툴바