ASP.NET MVC, 폼 데이타 전송하기

Posted in .NET Framework // Posted at 2010. 8. 6. 16:38
728x90

앞서 ASP.NET MVC 에서 요청 매개변수 넘기기 에서는 URL 질의 방식에 ASP.NET MVC이
어떻게 반응하는지 알아 보았다. URL에 매개변수를 전달하는 방식은 GET 요청에 해당한다

이번에는 ASP.NET MVC이  POST 요청을 어떻게 처리하는지 알아 보도록 하자

POST 요청의 보편적인 모습은, HTML 입력 양식을 이용한 폼 데이타 제출이다
이 글에서는 간단한 회원가입 폼을 POST 로 전송하고 이를 처리하는 방법을 다룬다

ASP.NET MVC 프로젝트를 하나 생성하고 컨트롤러에 엑션 메서드를 하나 추가한다

- HomeController.cs 에 액션 메서드 추가하기
public ActionResult RegisterForm()
{            
    return View();
}

- 회원 가입 페이지 (뷰)  생성하기
그리고 이 액션 메서드에 해당하는 뷰를 생성한다
생성된 RegisterForm.aspx 뷰 페이지는 회원가입 입력 양식을 아래와 같이 정의한다
<body>
    <h1>회원가입</h1>    
    <form action="/Home/RegisterForm" method="post">        
        <p>아이디: <input type="text" name="MemberID" /></p>
        <p>비밀번호: <input type="password" name="Password" /></p>
        <p>닉네임: <input type="text" name="NickName" /></p>
        <p>이메일: <input type="text" name="Email" /></p>
        <input type="submit" value="가입하기" />           
    </form>
</body>

전형적인 폼 양식이다. 이제 프로젝트를 빌드하고 페이지를 호출해 보자
http://localhost:11102/Home/RegisterForm




- 모델 정의 하기
아직 폼 데이터를 처리 할 수 있는 것은 아니다. 회원정보에 해당하는 자료형을 모델로 정의해 보자.
이 모델을 기반으로 폼 데이터가 처리될 것이며 결과 뷰역시 이 모델을 기반으로 작성될 것이다

프로젝트의 Model 폴더에 Member.cs 라는 클래스를 만들고 다음과 같이 작성한다
이때 RegisterForm 뷰에서 정의한 폼 요소들의 Name 속성과 일대일 대응하도록 속성명을 정의하자
public class Member
{
    public string MemberID { get; set; }
    public string Password { get; set; }
    public string NickName { get; set; }
    public string Email { get; set; }

   
public void Submit()
{
        //멤버정보를 DB에 입력하는 등의 실제 작업을 처리한다
    }
}

- 컨트롤러 수정하기
그리고 폼 데이타 수신을 위해 컨트롤러를 다음과 같이 수정한다
AcceptVerbs 어트리뷰트를 통해 GET 과 POST 요청을 직접 명시한다
이렇게 하면 get, post 요청에 적절한 액션메서드가 선택될 것이다
즉 동일한 {controller}/{action} 요청이지만 get, post 요청에 따라 (이름은 같지만) 다른 메서드가
호출되는 것이다

또한 각 액션 메서드의 반환 값을 보면,
get 요청에는 기본 뷰인 RegisterForm.aspx 가 랜더되도록 했으며(return View();),
post 요청에는 명시적으로 이름을 지정하여 RegisterComplete.aspx 뷰가 랜더되도록 하였으며
mebmer 객체를 뷰로 전달하고 있다
(return View("RegisterComplete", member))


그리고 post 요청에 해당하는 액션 메서드의 매개변수를 주의깊게 보자
모델에서 정의한 Member 객체를 post 메서드의 매개변수로 취하고 있다

ASP.NET MVC '모델 바인딩 매커니즘'은 폼 전송으로 전달된 데이터의 키(Key) 정보를 바탕으로
Member 객체의 속성명에 일대일 매칭시켜 값을 자동으로 바인딩 시켜 준다

<input type=text name=MemberID>의 값이 Member.MemberID 로 자동 바인딩이 된다는 말이다

public class HomeController : Controller
{
    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult RegisterForm()
    {            
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult RegisterForm(Member member)
    {
        member.Submit();
        return View("RegisterComplete", member);
    }
}

- 강력한 형식의 뷰 만들기 (회원가입 완료 페이지(뷰) 생성하기)
이제 회원가입 완료 페이지에 해당하는 RegisterComplete 뷰를 생성해 보자
Controller 아무 영역에다 대고 마우스 우클릭 -> Add View 해서 뷰를 생성하는데
아래 그림과 같이 'Create a strongly-typed view' 를 선택해서 모델로 정의했던
Member 클래스를 View data class 로 선택하도록 한다

이렇게 특정 클래스를 기반으로 강력한 형식의 뷰를 만들게 되면
View data class에 정의된 객체를 뷰에 직접 랜더링 할 수 있게 된다


그리고 생성된 RegisterComplete.aspx 는 다음과 같이 작성한다
이 뷰는 강력한 형식으로 생성된 뷰이기 때문에 Model 이라는 키워드를 통해 직접 모델 데이터에
접근할 수 있게 된다
. 아래 코드는 폼 데이터로 전송되어 모델 객체에 바인딩 된 값을 다시 결과 화면에
뿌리고 있는 것이다
<body>    
    <h1>회원가입을 축하드립니다</h1>
    <p>아이디: <%= Model.MemberID %></p>
    <p>닉네임: <%= Model.NickName %></p>
    <p>이메일: <%= Model.Email %></p> 
</body>





'.NET Framework' 카테고리의 다른 글

ASP.NET Razor  (5) 2010.12.13
웹 리소스 요청 막기, HttpNotFoundHandler  (0) 2010.08.09
ASP.NET MVC 에서 요청 매개변수 넘기기  (0) 2010.08.05
ASP.NET MVC, Hello World  (1) 2010.08.04
벌써 ASP.NET MVC 3 ?  (0) 2010.08.03