ASP.NET Core MVC에서 데이터 불러와서 View에 표시하기

 

SQL Server를 설치하고 SQL server에 DB를 만들고 위와 같은 테이블이 생성이 되어 있다는 가정하에서 ASP.NET Core에서 데이터를 불러와서 View에 표시하는 방법에 대해 설명해 보겠다.

 

using System.ComponentModel.DataAnnotations;

namespace BulkyWeb.Models {
    public class Category {
        [Key]
        public int Id { get; set; } // Primary Key on DB
        [Required]
        public string Name { get; set; } // This field will be set to not null option in SQL
        public int DisplayOrder { get; set; }
    }
}

 

위 코드는 Model 폴더 안에 있는 Category라는 모델의 코드이다. 아래에서 하나식 설명하겠다.

 

[Key] -> 이것은 현재 모델을 구성하고 있는 Property 중에 해당 키워드 바로 밑에 있는 Property가 데이터베이스에서 Key 값으로 할당된다. 키 값이란 Primary Key, Unique 등이 있는데 Primary Key를 주로 Key라고 부른다. Primary Key는 줄여서 PK로 부르고 이는 데이터 모델링 교육을 받으면 알게 되는 내용이다. SQLD 자격증 취득을 위해선 반드시 알고 넘어가야 하니 이후에 작성하는 내용에서 배울 수 있을 것이다.

 

[Required] -> 이 키워드는 개발자라면 JS나 다른 언어에서 많이 보았을 것이다. 반드시 필요로 하기 때문에 쓰는데, 여기서는 약간의 의미가 다르다. 간단하게 말하면 NULL을 허용하지 않는다라고 DB 전달하는 것이다. 즉, Name이라는 속성에 반드시 값이 존재해야 하며 Null은 올 수가 없다. 

 

위 두 가지를 SQL 쿼리로 설명해 보겠다.

Create Table Category (
	ID int NOT NULL Primary Key,
    Name varchar(255) NOT NULL,
    DisplayOrder varchar(255)
);

 

위에 C# 코드를 SQL 쿼리로 변경하게 되면 위와 같다. Id를 Primary Key로 지정하고, Name을 NULL 값을 허용하지 않는다. 위 C#코드와 아래 SQL 코드는 동일하다고 보면 된다.

 

@model List<Category>

<h1>Category List</h1>

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>
                Category Name
            </th>
            <th>
                Display Order
            </th>
        </tr>
    </thead>
    <tbody>
            @foreach(var obj in Model.OrderBy(u=>u.DisplayOrder)) {
                <tr>
                    <td>@obj.Name</td>
                    <td>@obj.DisplayOrder</td>
                </tr>
            }
    </tbody>
</table>

 

위 코드는 Cateogry.cshtml 코드이다. 테이블을 생성하고 테이블에 값을 표시한다. class는 부트스트랩 코드이니 일단 넘어가자

 

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

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

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

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

 

위 코드는 Category.cshtml.cs 파일이다. 이제 여기서 중요한 것은 db 연결을 선언했고, db를 통해서 Categories를 불러와서 List로 출력하라는 명령어를 objCategoryList로 하는 것이다. 이 전에 또 하나가 있는데 아래에서 보겠다.

 

using BulkyWeb.Data;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddDbContext<ApplicationDbContext>(
    options=> options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))
    );

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

 

이것은 program.cs에서 가져온 코드다. Add Service 부분에 우리는 SqlServer와 연결하겠다는 코드를 7, 8번째 줄에서부터 작성했다. 이를 작성한 후에 위에서 실행해야 코드를 읽을 수 있다. 그럼 다시 HTML로 가보자.

 

@model List<Category>

<h1>Category List</h1>

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>
                Category Name
            </th>
            <th>
                Display Order
            </th>
        </tr>
    </thead>
    <tbody>
            @foreach(var obj in Model.OrderBy(u=>u.DisplayOrder)) {
                <tr>
                    <td>@obj.Name</td>
                    <td>@obj.DisplayOrder</td>
                </tr>
            }
    </tbody>
</table>

 

코드 최상단 1번째 줄에서 @model List <Category>를 선언했다. 이 코드가 앞으로 이 view에서 우리는 Category List를 Model 사용하겠다고 선언한 것이다. 자 이제 Tbody 부분을 보면 @사용해서 foreach로 Model에 접근했고, 접근 model에서 데이터를 가져와서 <td> 태그 안에 @obj. Name, 그리고 @obj. DisplayOrder로 불러와서 사용하고 있다.

 

여기서 obj는 foreach안에 조건에 var obj에서 가져온 것이다. 즉 Model로 불러온 데이터를 var obj에 저장한 것이다. var obj는 List형태로 저장되어 있는 것이며, 그 안에 있는 Data를 @obj. 속성명으로 불러와서 HTML 페이지에 데이터를 출력한 것이다.

 

 

위 사진은 최종 출력 내용이다.

 

길지도 않고 짧지도 않지만, 다른 언어와 다르게 매우 짧게 데이터에 접근하고 데이터를 불러올 수 있지 않은가? 바로 이것이 ASP.NET과 C#에 장점이라 본다.