[ToDoList 앱 개발] ASP.NET Core MVC - 3편 Form을 제작해보자

오늘도 어제에 이어서 한 번 진행해 보겠다.

 

Solution Explorer -> Controllers 폴더 -> 마우스 우클릭 -> Add -> Controller를 클릭한다.

그럼 아래와 같은 창이 뜬다.

 

여기서 MVC Controller - Empty 를 선택하고 Add를 누른다.

위와 같은 창이 하나 더 나온다.

 

여기서 우리가 알고 가야 할 것이 있다. 이것은 매우 중요하기 때문에 필수적으로 암기해 버리자!

MVC Controller - Empty를 만들 때, Class를 생성할 때 우리는 이름을 입력한다. 일반 Class를 만들 때는 상관없지만 Controller를 생성할 때는 Naming을 하는 방법이 존재한다.

 

현재 창에서는 HomeController1.cs로 나오는데 기존 Controller 폴더를 보면 HomeController가 있다. 보면 무엇이 필수적으로 붙어야 하는지 보이는가?  그렇다 반드시 Controller의 파일 명은 Controller 명 + Controller가 붙여서 만들어야 한다. 예를 들어서 Create라는 Controller를 만든다고 해보자

 

Create + Controller = CreateController.cs가 되어야 한다. 이것은 반드시 외워서 머리에 암기해 두자

 

파일명은 CreateController.cs로 만들자

 

파일을 생성하고 나면 CreateController.cs를 열어서 보면 위와 같이 나올 것이다. 여기서 간단하게 설명하고 넘어가겠다.

 

using -> 우리 사용할 사전 정의된 namespace를 불러오는 기능

 

namespace -> 현재 프로젝트의 네임스페이스

 

public class  CreateController : Controller -> 현재 컨트롤러  뒤 현재 이 클래스가 Controller라는 정의 

 

public IActionResult Index() { return View(); } -> 이는 이 컨트롤러가 소유한 View를 보여주는 역할을 한다. 깊게 들어가는 것은 나중으로 미루고 일단 간단하게 알고 가자

 

P.S: 궁금한 사람들을 위해서 GPT의 설명을 추가하도록 하겠다.

 

자 이제 컨트롤러를 만들었으니 View도 만들어야 하지 않겠나?

 

Solution Explorer -> Views 폴더 -> Create  폴더 생성 -> Index.cshtml로 뷰 생성

 

이제 View를 생성하고 내용을 보자.

 

위 사진과 동일하게 나온다면 여러분은 View까지 완성한 것이다.

 

여기까지 오느라 정말 고생 많았다! 조금만 더 힘내서 가면 고지가 우리 눈앞에 보인다. 새로 만든 View에 모든 내용을 지우자.

 

 

위와 같이 현재 View의 Page 타이틀을 작성해 주고 이제 모델을 추가하자.

@model ToDoList.Models.ToDoItem

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

 

위 코드와 같이 작성해주고 이제 뷰를 만들어 나갈 것이다. 우리가 여기서 만들어야 하는 것은 Todo 아이템에 들어갈 Form을 제작해야 한다. 아래 사항을 고려해서 넘어가자.

 

1. Form 생성

2. Input 필드 생성

3. Submit 버튼 추가

 

여기서 알고 넘어가야 할 것은 이 뷰 내용은 여러분이 원하는 데로 작성해도 된다. 다만, 내 코드에서 확인해야 할 것은 바로 Helper Tags를 사용할 것인데, 이를 본인이 작성한 코드와 비교해서 대입하도록 하자.

 

@model ToDoList.Models.ToDoItem

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

<!-- Form Div-->
<div class="container mt-5">
    <h2 class="text-center mb-4">Create To-Do Item</h2>

    <!--Form Start-->
    <form asp-action="Create" method="post">
        <!-- Task Title -->
        <div class="mb-3">
            <label asp-for="TaksName" class="form-label">Task Name</label>
            <input asp-for="TaksName" class="form-control" placeholder="Enter task name" />
            <span asp-validation-for="TaksName" class="text-danger"></span>
        </div>

        <!--Is Complted-->
        <div class="form-check mb-3">
            <input asp-for="isCompleted" type="checkbox" class="form-check-input" id="isCompletedCheck" />
            <label asp-for="isCompleted" class="form-check-label" for="isCompletedCheck">Is Completed</label>
            <span asp-validation-for="isCompleted" class="text-danger"></span>
        </div>

        <!--Submit Button-->
        <div class="d-flex justify-content-center p-1">
            <button type="submit" class="btn btn-primary w-50">Submit</button>
        </div>
    </form>

    <!-- Cancel -->
    <div class="d-flex justify-content-center p-1">
        <a asp-controller="Home" asp-action="Index" class="btn btn-secondary w-50">Cancel</a>
    </div>
</div>

 

위 코드는 최종 완성된 코드이다.  여기서 여러분이 주의할 것은 asp로 시작하는 것들이 있는데 이를 우리는 Helper Tag라고 부른다.  반드시 helper tag를 잘 확인해서 본인의 코드와 비교해서 대입해 주자!

 

 

위와 같은 뷰가 나와야 하는데 안 나온다?

이는 간단하다. 우리가 아직 Home View에 이 경로로 이동하는 버튼이나 링크를 안 만들어 두었기 때문이다.

그럼 어떻게 해야 하는데?

간단하다. 주소창에 위와 같이 적으면 된다.

Create 우리가 사용하는 Controller의 이름이고, Index는 View의 이름이다.

 

 

일단 우리가 만들어둔 코드를 확인해 보며 넘어가자

 

<form asp-action="Create" method="post">
</form>

 

asp-action="Create"

• 폼의 데이터를 처리할 컨트롤러의 액션 메서드를 지정
• 여기서는 Create 액션 메서드로 데이터를 전송

method="post"

• 폼 데이터를 전송할 HTTP 메서드를 정의
• POST는 데이터를 서버로 전송하며, 일반적으로 데이터 저장, 생성 등의 작업에 사용

이제 또 다음으로 넘어가자

<input asp-for="TaksName" class="form-control" placeholder="Enter task name" />

 

asp-for="TaskName"

• 현재 모델(View에 전달된 모델)의 TaksName 속성과 연결
• 이 속성의 값이 입력 필드에 초기값으로 설정되거나, 폼 제출 후 서버에 전송될 때 매핑

현재 코드에서 가장 중요한 것 두 개를 설명했다. 이점을 알고 넘어가자

 

 

지금이 오후 1시인데 아무래도 점심을 먹어야겠다 ㅋㅋ 모두 점심 먹고 다음에 보도록 하자!