[Employee Manager] 데이터를 DB에 저장해보자

일단 시작하기 전에 모든 결과를 보여주는 영상을 첨부했다.

궁금하면 한 번씩 보시길 바란다.

 

 

Index.cshtml

@model Employee.Models.EmployeeViewModel
 
@{
    ViewData["Title"] = "Add Employee";
}
 
<div class="container-fluid mt-5">
    <!-- Tab Header -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fs-5 fw-bold" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">
                직원등록
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link  fs-5 fw-bold" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">
                직원 목록
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link  fs-5 fw-bold" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">
                기타
            </button>
        </li>
    </ul>
 
    <!-- Tab Content -->
    <div class="tab-content mt-2" id="myTabContent">
        <!--Tab 1-->
        <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
            @Html.Partial("_AddEmployee")
        </div>
 
        <!--Tab 2-->
        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
            <h3>Content for Tab 2</h3>
            <p>This is the content for the second tab.</p>
        </div>
 
        <!--Tab 3-->
        <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
            <h3>Content for Tab 3</h3>
            <p>This is the content for the third tab.</p>
        </div>
    </div>
</div>

        

        
      

 

이건 메인 화면 코드이다. 여기서 PartialView를 사용해서 _AddEmployee.cshtml을 불러와서 뷰 화면에 띄운다.

@model Employee.Models.EmployeeViewModel
 
<div class="container-fluid mt-5">
    <form asp-controller="Employee" asp-action="NewEmployee" method="post">
        <p class="fs-3 fw-bold">기본 정보</p>
        <!-- Row 1 -->
        <div class="row">
            <div class="col-2">
                <label asp-for="Employee_Name" class="form-label fw-bold">이름</label>
                <input asp-for="Employee_Name" type="text" class="form-control" />
                <span asp-validation-for="Employee_Name" class="text-danger"></span>
            </div>
 
            <div class="col-2">
                <label asp-for="Employee_BirthDate" class="form-label fw-bold">생년월일</label>
                <input asp-for="Employee_BirthDate" type="date" class="form-control" />
                <span asp-validation-for="Employee_BirthDate" class="text-danger"></span>
            </div>
 
            <div class="col-2">
                <label asp-for="Employee_Phone" class="form-label fw-bold">전화번호</label>
                <input asp-for="Employee_Phone" type="text" class="form-control" />
                <span asp-validation-for="Employee_Phone" class="text-danger"></span>
            </div>
 
            <div class="col-3">
                <label asp-for="Employee_Email" class="form-label fw-bold">이메일</label>
                <input asp-for="Employee_Email" type="email" class="form-control" />
                <span asp-validation-for="Employee_Email" class="text-danger"></span>
            </div>
        </div>
 
        <!-- Address Section -->
        <p class="fs-3 fw-bold mt-4">주소 정보</p>
        <div class="row">
            <div class="col-1">
                <label asp-for="Address_Unit" class="form-label fw-bold">동 / 호수</label>
                <input asp-for="Address_Unit" type="text" class="form-control" />
                <span asp-validation-for="Address_Unit" class="text-danger"></span>
            </div>
 
            <div class="col-3">
                <label asp-for="Address_Street" class="form-label fw-bold">도로명 주소</label>
                <input asp-for="Address_Street" type="text" class="form-control" />
                <span asp-validation-for="Address_Street" class="text-danger"></span>
            </div>
 
            <div class="col-2">
                <label asp-for="Address_City" class="form-label fw-bold">시/군/구</label>
                <input asp-for="Address_City" type="text" class="form-control" />
                <span asp-validation-for="Address_City" class="text-danger"></span>
            </div>
 
            <div class="col-2">
                <label asp-for="Address_Region" class="form-label fw-bold">시/도</label>
                <input asp-for="Address_Region" type="text" class="form-control" />
                <span asp-validation-for="Address_Region" class="text-danger"></span>
            </div>
 
            <div class="col-2">
                <label asp-for="Address_PostalCode" class="form-label fw-bold">우편번호</label>
                <input asp-for="Address_PostalCode" type="text" class="form-control" />
                <span asp-validation-for="Address_PostalCode" class="text-danger"></span>
            </div>
        </div>
 
        <!-- Education Section -->
        <p class="fs-3 fw-bold mt-5">학력</p>
        <div id="education-container">
            <div class="row mt-3">
                <!-- Education Status-->
                <div class="col-2">
                    <label class="form-label fw-bold">상태</label>
                    <select asp-for="Education_Status" class="form-select" aria-label="Default select example">
                        <option selected>졸업여부</option>
                        <option value="1">대학교 졸업</option>
                        <option value="2">대학교 중퇴</option>
                        <option value="3">전문대 졸업</option>
                        <option value="4">전문대 중퇴</option>
                        <option value="5">고등학교 졸업</option>
                        <option value="6">고등학교 중퇴</option>
                        <option value="7">기타</option>
                    </select>
                </div>
 
                <!-- School name -->
                <div class="col-4">
                    <label class="form-label fw-bold">학교명</label>
                    <input asp-for="Education_School" type="text" class="form-control" />
                </div>
 
                <!-- Major -->
                <div class="col-3">
                    <label class="form-label fw-bold">전공</label>
                    <input asp-for="Education_Major" type="text" class="form-control" />
                </div>
            </div>
        </div>
 
        <!-- Experience Section -->
        <p class="fs-3 fw-bold mt-5">경력</p>
        <div id="experience-container">
            <div class="row mt-3">
                <div class="col-1">
                    <label class="form-label fw-bold">시작일</label>
                    <input asp-for="StartDate" type="date" class="form-control" />
                </div>
                <div class="col-1">
                    <label class="form-label fw-bold">종료일</label>
                    <input asp-for="EndDate" type="date" class="form-control" />
                </div>
                <div class="col-3">
                    <label class="form-label fw-bold">회사명</label>
                    <input asp-for="CompanyName" type="text" class="form-control" />
                </div>
                <div class="col-2">
                    <label class="form-label fw-bold">부서</label>
                    <input asp-for="Department" type="text" class="form-control" />
                </div>
                <div class="col-2">
                    <label class="form-label fw-bold">직급</label>
                    <input asp-for="JobTitle" type="text" class="form-control" />
                </div>
            </div>
        </div>
 
        <!-- Submit Section -->
        <div class="text-center mt-5">
            <button type="reset" class="btn btn-danger fs-4 fw-bold mt-3 me-5">등록취소</button>
            <button type="submit" class="btn btn-primary fs-4 fw-bold mt-3">직원등록</button>
        </div>
    </form>
</div>

        

        
      

 

이게 Partial View에서 보이는 내용이다.

기존에 경력 추가, 학력 추가 버튼을 제거했다. 왜냐면 자꾸 에러가 발생하는데, 이를 해결하기 위해선 며칠 더 고생해야 할 것 같다. 그렇기 때문에 일단 제외시켰다. 이전 코드와 크게 달라진 점은 없고 ASP.NET Core에서 쓰는 ASP-For를 사용해서 데이터를 전달한다.

 

        [HttpPost]
        public IActionResult newEmployee(EmployeeViewModel model)
        {
            if (ModelState.IsValid)
            {
                // Employee 객체를 먼저 데이터베이스에 추가
                var emp = new EmployeeModel
                {
                    Employee_Name = model.Employee_Name,
                    Employee_BirthDate = model.Employee_BirthDate,
                    Employee_Phone = model.Employee_Phone,
                    Employee_Email = model.Employee_Email,
                };
 
                _context.Add(emp);
                _context.SaveChanges(); // SaveChanges 호출로 Employee_ID가 생성됨
 
                // 생성된 Employee_ID를 사용하여 Address, Education, Career 데이터를 추가
                var addr = new EmployeeAddressModel
                {
                    Address_Unit = model.Address_Unit,
                    Address_Street = model.Address_Street,
                    Address_City = model.Address_City,
                    Address_Region = model.Address_Region,
                    Address_PostalCode = model.Address_PostalCode,
                    Employee_ID = emp.Employee_ID, // 데이터베이스에서 받은 Employee_ID
                };
 
                var edu = new EmployeeEducationModel
                {
                    Education_Status = model.Education_Status,
                    Education_School = model.Education_School,
                    Education_Major = model.Education_Major,
                    Employee_ID = emp.Employee_ID, // 데이터베이스에서 받은 Employee_ID
                };
 
                var career = new EmployeeCareerModel
                {
                    StartDate = model.StartDate,
                    EndDate = model.EndDate,
                    CompanyName = model.CompanyName,
                    Department = model.Department,
                    JobTitle = model.JobTitle,
                    Employee_ID = emp.Employee_ID, // 데이터베이스에서 받은 Employee_ID
                };
 
                // Address, Education, Career 데이터를 추가
                _context.Add(addr);
                _context.Add(edu);
                _context.Add(career);
 
                _context.SaveChanges(); // 모든 변경사항을 데이터베이스에 저장
 
                return RedirectToAction("Index", "Employee"); // "Index"로 리다이렉트
            }
 
            return View("Index", "Employee");
        }

        

        
      

 

EmployeeController에서는 각 모델에 ViewModel로 받아온 데이터를 전달해준다. 그러나 여기서 주의할 것이 RDB를 사용하고 있기 때문에, 관계형을 선언하기 위해서는 Employee_ID가 필수적이다. 그렇다면 Employee 테이블을 제외한 각 테이블에 Employee_ID를 FK로 선언해 주었다. 이를 대입하기 위해서는 Employee를 먼저 생성하고 나머지 모델들의 데이터를 DB로 전송해야 에러가 생기지 않는다. 

 

사실... 이 부분을 알고는 있었지만... 에러가 생겨서 2시간 가량을 고생했다... 프로그래밍은... 인간 친화적이지 않다...

 

최종적으로 모든 데이터는 DB로 전송되고, 저장된다. 맨위에서 두 번째 영상을 보면 데이터가 저장된 것을 확인할 수 있다.

다음 글에서는 데이터를 출력할 것이다.