[ASP.NET CORE/MVC] #7 컨트롤러로 데이터 보내고 받기

[ASP.NET CORE/MVC] #7 컨트롤러로 데이터 보내고 받기

안녕하세요 미나라이입니다.

 

이번에는 ASP.NET CORE MVC Web의 컨트롤러 활용에 대해서 정리하려고 합니다.

컨트롤러의 역할은 뷰 페이지에서 페이지나 데이터의 요청이 있으면 받고 결과를 리턴해주는 역할을 해 줍니다.

 

프로젝트 환경

OS : Windows 10

IDE : Visual Studio Code 1.62.2

.Net SDK : 5.0.403

.Net Runtime : .NetCore.App 5.0.10 / 5.0.12

 

먼저 컨트롤러를 활용하기 위해서는 프로젝트에 기본 설정을 해 주어야 합니다.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
	// 프로젝트 내부에서 컨트롤러와 뷰 페이지를 사용 하겠다고 하는 정의입니다.
	services.AddControllersWithViews();
}

※ MVC프로젝트를 생성 할 때 기본적으로 정의되는 내용이므로 별도로 추가 할 필요는 없습니다.

해당 정의에 대해서 더 자세한 내용은 아래 링크를 참고 해 주세요

AddController vs AddMvc vs AddControllersWithViews vs AddRazorPages

 

컨트롤러로 데이터 보내기

뷰 페이지에서 간단한 폼 데이터를 만들어서 컨트롤러로 전송 해 보겠습니다.

Index.cshtml

<h4>Input Data</h4>
<!-- Home컨트롤러의 Result메소드를 호출하겠다는 정의 -->
<form action="/Home/Result">
    <!-- 컨트롤러에서 파라미터로 데이터를 받기 위해서는 name값을 설정 해 주어야 합니다. 
         name이름 = 컨트롤러 파라미터 변수 이름 -->
    Name : <input type=text name=name /><br />
    Age : <input type=text name=age /><br />
    <input type=submit />
</form>

결과

 

 

컨트롤러에 데이터를 보내봅니다.

컨트롤러에 데이터를 받을 경우에 중요한점은

Form데이터의 name값과 파라미터의  변수명이 일치해야 한다는 점 입니다.

폼 데이터 값

<input type=text name=name />

<input type=text name=age />

컨트롤러 파라미터 값

public IActionResult Result(string name, int age)

 

HomeController.cs

public IActionResult Result(string name, int age)
{
    ViewData["name"] = name;
    ViewData["age"] = age;
    return View();
}

데이터가 들어온 것을 확인 해 봅시다.

좌측 디버깅 데이터에 입력 값이 들어온 것을 확인 할 수 있습니다.

 

받은 데이터를 VIEW페이지로 보내기

출력 결과

Result.cshtml

<h4>Input Result</h4>
<h4>Name : @ViewData["name"]</h4>
<h4>Age : @ViewData["age"]</h4>

 

주의 할 점

age의 타입을 int로 주었는데

입력값을 문자열로 주었을 경우에는 데이터를 제대로 받지 않습니다.

age정보에 값이 안들어간 것을 확인 할 수 있습니다.

 

Model을 이용해서 받기

이번에는 파라미터에 모델을 넣어서 받아 보겠습니다.

모델 객체를 이용하면 반복적으로 사용하는 부분에 대해서 변수를 일일히 여러개 선언 해 줄 필요가 없어지게 됩니다.

 

UserInfo.cs

프로젝트에서 기본적으로 제공되는 Models폴더에 UserInfo.cs를 추가 해 보겠습니다.

Model을 사용 할 때도 마찬가지로 form데이터의 name값과 Model의 변수명과 타입을 일치시켜야 합니다.

namespace TestProject.Models
{
    public class UserInfo
    {
        public string name  {get; set;}	

        public int age {get; set;}
        
    }
}

다시 폼 데이터를 받아보겠습니다.

Index.cshtml

<form action="/Home/Result2">
    Name : <input type=text name=name /><br />
    Age : <input type=text name=age /><br />
    <input type=submit />
</form>

HomeController.cs

모델객체를 리턴하기 위해 View안에 파라미터에 모델을 넣은 모습입니다.

ViewData, ViewBag을 사용해도 되긴 합니다만 cshtml파일에서 값을 호출하는 방식이 다릅니다.

public IActionResult Result2(UserInfo user)
{
	return View(user);
}

UserInfo라는 데이터 안에 값들이 정상적으로 들어 가 있는 것을 확인 할 수 있습니다.

Result2.cshtml

Model을 파라미터로 리턴 했을 경우에는 아래와 같이 사용 해 주어야 합니다.

@{
    ViewData["Title"] = "InputResult2";
}

<h4>Input Result</h4>
<h4>Name : @Model.name</h4>
<h4>Age : @Model.age</h4>

출력 결과

 

 

샘플 프로젝트 파일 첨부합니다.

TestProject_Controller.zip

1.21MB

다음에는 페이지 리턴이 아닌 비동기처리로 데이터를 리턴하는 부분에 대해서 포스팅 해 보려고 합니다.