[.NET] 컨트롤러와 뷰(View) 구현하기

이전 글에서 ApplicationDbContext 라는 이름으로 DbContext 클래스를 생성 및 program.cs 파일에 해당 DbContext 클래스를 서비스로 등록하고,

Code First / Migration 방식으로 Bulky라는 데이터베이스에 Categories 테이블을 생성했었습니다.

 

이번 글에서는 생성된 DB를 컨트롤하고 직접 볼 수 있는 컨트롤러와 뷰 기능을 구현하려고 합니다.

우선 이전에 생성했던 카테고리를 위한 컨트롤러를 하나 생성해주도록 하겠습니다.

파일명 : CategoryConroller.cs

using Microsoft.AspNetCore.Mvc;

namespace BulkyBookWeb.Controllers
{
    public class CategoryController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

빈 컨트롤러와 인덱스 액션 메서드가 있습니다.

여기서 IActionResult 인터페이스는 - 뷰, JSON, 파일, 리디렉션 등 다양한 형식의 결과를 반환할 수 있도록 해주는 기능을 제공합니다.

현재 Category의 Index 뷰가 없는 상태입니다.

여기서 뷰를 추가하는 방법에서 제가 아는 두 가지가 방법이 있습니다.

1. 첫 번째 방법으로는 CategoryController 이름이라면 Views 폴더 안에 Category라는 이름의 폴더를 추가 하고, 해당 폴더안에 Index.cshtml 을 추가하는 방법이 있습니다.
2. 두 번째 방법은 컨트롤러 안에서 생성하고자 하는 액션 메서드 위에 오른쪽 마우스 키를 눌러서 보이는 옵션에서 Add View를 통해 스캐폴딩 기능으로 View를 생성하는 방법이 있습니다.

여기서 템플릿을 선택할 수 있는데, 저는 빈 템플릿에서 직접 코드를 작성해서 해보도록 하겠습니다.

 

빈 템플릿으로 Category 폴더와 함께 Index.cshtml 파일이 생성되었습니다.

index.cshtml

해당 뷰에 접속하려면 /Category/Index 로 들어가면 됩니다.

다음으로 해당 뷰에서 카테고리 테이블에 들어있는 데이터를 조회할 수 있도록 세팅해 보겠습니다.

우선 현재 카테고리 테이블에 행이 하나도 없으니 임의로 생성해주도록 하겠습니다.

이제 임의로 생성한 이 데이터를 조회하기 위해서는 CategoryController에서 데이터베이스 테이블을 컨트롤하기 위한 세팅이 필요합니다.

이를 위해서는 데이터베이스 컨텍스트 클래스를 컨트롤러에 주입해야 합니다.

다음과 같이 *ApplicationDbContext*를 주입받는 생성자를 추가하고 필요한 액션 메서드에서 _db 필드를 사용하여 데이터베이스 작업을 수행할 수 있습니다.

using BulkyBookWeb.Data;
using BulkyBookWeb.Models;
using Microsoft.AspNetCore.Mvc;

namespace BulkyBookWeb.Controllers
{
    public class CategoryController : Controller
    {
        private readonly ApplicationDbContext _db;

        public CategoryController(ApplicationDbContext db)
        {
            _db = db;
        }

        public IActionResult Index()
        {
            IEnumerable<Category> objCategoryList = _db.Categories.ToList();
            return View(objCategoryList);
        }

        // 다른 액션 메서드들도 _db를 사용하여 데이터베이스 작업을 수행할 수 있음
    }
}

위의 코드에서 ApplicationDbContext 클래스를 생성자로 주입받아 _db 필드에 할당하고, Index() 메서드에서 _db를 사용하여 카테고리 데이터를 가져와 objCategoryList 변수에 할당합니다. 그리고 objCategoryList 모델을 사용하여 뷰를 렌더링하고 반환합니다.

따라서, 이제 *CategoryController*는 데이터베이스 테이블을 컨트롤할 수 있게 됩니다.

 

이제 테이블을 조회하기 위해 카테고리의 Index.cshtml에서 먼저 모델을 선언해주어야 합니다. 해당 모델은 컨트롤러에서 전달된 데이터를 사용하기 위한 모델입니다. 여기서는 Category 모델의 리스트를 전달받아 화면에 출력하기 때문에 아래 코드의 첫 라인처럼 작성해야 합니다.

@model IEnumerable<Category>
@{
    ViewData["Title"] = "Index";
}

<h1>Index Category</h1>

<table class="table table-bordered table-striped" style="width:100%">
    <thead>
        <tr>
            <th>
                Category Name
            </th>
            <th>
                Display Order
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach(var obj in Model)
        {
            <tr>
                <td width="50%">
                    @obj.Name
                </td>
                <td width="50%">
                    @obj.DisplayOrder
                </td>
            </tr>
        }
    </tbody>
</table>

이후, 테이블을 표현하기 위한 HTML 코드를 작성합니다.

여기서 @의 역할은 Razor 구문에서 C# 코드를 작성할 수 있도록 해주는 기호이며,

@foreach문을 사용하여 Category 리스트를 반복하여 테이블의 각 행에 데이터를 출력합니다. 각 열의 값은 모델의 속성으로 접근하여 출력할 수 있습니다.

 

마지막으로 /Category/Index 에 들어가서 확인합니다.

데이터가 잘 조회되는 걸 볼 수 있었습니다!