안녕하세요. 김대우 입니다.

 

코난이와 함께하는 Razor & WebMatrix 시리즈 강좌리스트

(1) WebMatrix와 Razor! 이제 시작합니다.

(2) WebMatrix 설치부터 Hello World까지

(3) Razor 강좌 - 기본 구문 및 주석 처리

(4) Razor 강좌 - 코드 블록과 POST 처리(지금 보고 계신 강좌)

(5) Razor 강좌 - 재사용 가능한 코드 생성

(6) Razor 강좌 - 레이아웃 페이지 구조 처리

(7) Razor 강좌 - 파일처리

(8) Razor 강좌 - 데이터베이스 처리

(9) Razor 강좌 - Helper 소개(이미지, 비디오)

(10) Razor 강좌 - 디버깅

(11) Razor 강좌 - 캐시 처리

 

지난 시간에는 “(3) Razor 강좌 - 기본 구문 및 주석 처리” 강좌를 진행 했습니다.

 

이번 시간에는 바로 이어서 네번째 강좌, “(4) Razor 강좌 - 코드 블록과 POST 처리” 강좌를 진행 하도록 하겠습니다.

 

코드블록 정리

지난 시간에 간단히, 코드블록에 대해서 설명해 드렸습니다. 넵, 간단히 Razor 구문을 사용해 프로그램 로직을 만드는 영역 정도로 봐 주시면 될 것 같아요. 혹시 웹 프로그래밍을 개발하신 경험이 있으시다면, 다시 한번 코드 블록을 봐 보주세요. 기존의 웹 개발 언어, ASP.NET이나 PHP와는 조금 다르지 않으신지요? 예를들어, Razor 구문 코드 블록 안에 자유롭게 HTML을 끼워 넣을 수 있는 부분이에요.

 

<h2>HTML 조합 반복문</h2>
@{
    <ul>
    @foreach (string item in Request.ServerVariables)
    {
        <li>@item</li>   
    }
    </ul>
}

 

두 번째 줄의 <ul> HTML 태그 앞이나 뒤에 Razor 구문 끝과 시작을 알리는 식별문자(@)가 포함되지 않고도, 코드 블록으로 처리 됩니다. ASP나 PHP 개발자라면, 이런 인라인 코딩 방식이 조금은 “땡큐하게” 다가 오실지 모르겠습니다. ^_^

Razor는 웹 개발자의 요구로 개발된 가장 최신의 웹 개발 구문입니다. 작고 심플한 웹 개발을 그 목표로 개발 되었다고 하네요(안그런게 녀석이 있겠습니까마는... ^_^;;;)

Razor는 웹 개발을 단순하고 빠르게 수행하기 위한 수 많은 개발자들의 요구를 수렴해 개발 되어서 이런 부분도 신경쓴게 조금 보이는거 같아요. 아직 감이 잘 안 잡히신다고요? 조금 있으면 Razor로 데이터베이스를 처리하는 챕터가 진행되는데요. ASP나 PHP 개발을 해오신 분이라면, 눈물나게 땡큐한(?) Razor의 이 심플 코드블록을 느끼실 수 있을 겁니다. 그 복잡한 데이터베이스 결과를 디자이너가 건네 준 퍼즐같은 복잡한 UI에 맞춰서 HTML 사이사이에 곡예 하듯 끼워 맞추던(그냥 들어내고 그리드 컨트롤 박아 넣었던... -_-;;; ) 그 복잡함을 많이 덜어 버리실 수 있을 거에요.  

현재 Razor beta 버전인데요. Razor의 강력한 기능을 살린 다양한 중고급 개발자를 위한 고급 개발 패턴도 함께 준비되고 있는 것 같아요. 또한, 마이크로소프트의 클라우드 컴퓨팅 기술인 Azure에 Razor로 개발한 웹 어플리케이션이 올라가면 어떻게 될까요? 더 빠르고 쉽게 웹 애플리케이션 개발이 가능해 질겁니다.

넵~ 기회 있을 때마다 이런 소식들도 모아모아서~ 강좌 게시판을 통해 소개해 드리도록 하겠습니다. 그럼 바로 이어서, POST 처리-HTML Form 값 처리에 대한 내용을 진행해 보도록 하겠습니다.

 

POST 처리 - HTML Form 처리

먼저 간단한 값을 텍스트박스로 입력 받아 값을 더하는 HTML 페이지 예제를 생각해 보도록 하시지요.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
    <head>        
        <title>Razor로 HTML Form 값을 처리</title>        
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
        <style type="text/css">            
            body {
                background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
            }            
            form {
                padding: 10px; border-style: solid; width: 250px;
            }        
        </style>        
    </head>    
    <body>        
        <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
        <p></p>         
        <form action="" method="post">        
            <p>
            <label for="text1">숫자(1):</label>            
            <input type="text" name="text1" />            
            </p>            
            <p>
            <label for="text2">숫자(2):</label>            
            <input type="text" name="text2" />            
            </p>            
            <p>
            <input type="submit" value="더하기" />
            </p>                 
        </form>
        <h2>두 숫자의 합은: 입니다.</h2>     
    </body>
</html>

 

이런 HTML 페이지를 생각해 보시면 될 것 같습니다. – WebMatrix에서 Razor를 실행하기 위해 CSHTML 파일을 하나 생성하고, 위의 HTML코드를 마찬가지로 붙여 넣으신 후 실행해 보세요.

 

clip_image001

대충~ 이런 화면이 나오실 겁니다. 여기 Form의 입력 값을 Post로 받아 처리한다는거 감이 오시죠? 그럼 실제로 코드를 입혀 보도록 하지요.

 

@{    
var total = 0;    

//HTML의 Form에서 POST될 경우에만 실행
if(IsPost) {        
    // 사용자의 입력값을 받아서 저장    
    var num1 = Request["text1"];        
    var num2 = Request["text2"];        
    // 넘겨받은 값을 Integer 형으로 변환 후 더하기 수행
    total = num1.AsInt() + num2.AsInt();         
    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
    <head>        
        <title>Razor로 HTML Form 값을 처리</title>        
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
        <style type="text/css">            
            body {
                background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
            }            
            form {
                padding: 10px; border-style: solid; width: 250px;
            }        
        </style>        
    </head>    
    <body>        
        <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
        <p></p>         
        <form action="" method="post">        
            <p>
            <label for="text1">숫자(1):</label>            
            <input type="text" name="text1" />            
            </p>            
            <p>
            <label for="text2">숫자(2):</label>            
            <input type="text" name="text2" />            
            </p>            
            <p>
            <input type="submit" value="더하기" />
            </p>                 
        </form>
        @// 더한 값이 아래 표시 됩니다. 
        <h2>두 숫자의 합은: @total 입니다.</h2>     
    </body>
</html>

 

먼저, HTML 구문을 보시면, Input 값을 Form에서 Post 메서드로 처리하게 됩니다. Action은 비어있으니, 이 페이지로 Post 되겠지요.

코드블록을 보시면 사용자의 입력 값을 Request로 받은 후에 값을 더하는 처리가 이루어지고, 아래의 @total에서 값을 처리하게 되는 구조 입니다. 이렇게 HTML의 Form으로 넘어온 POST된 값을 Request 처리를 이용해 받아 처리할 수 있습니다. 아울러, 넘어온 값을 숫자형으로 변환하는 처리도 봐 두시면 좋을 듯 하네요.

 

Form으로 넘어온 Post값도 처리가 가능하며, URL에 붙어 넘어오는 쿼리 스트링(URL query-string)을 받아 처리 역시 가능합니다. 이때도 마찬가지로, Request로 값을 받아 처리 가능합니다.

예를 들어, 요청한 URL이 이런 형식이라면

http://localhost:8080/post.cshtml?param=hello (테스트 URL 예제로 클릭해도 동작 안합니다)

var RequestQueryString = Request["param"];

그리고, 아래에서 넘겨 받은 값을 받아 처리 가능합니다.

<h2>Request로 넘어온 문자열은 : @RequestQueryString 입니다.</h2>

이렇게 되겠네요.

 

@{    
var total = 0;    
var RequestQueryString = Request["param"];

//HTML의 Form에서 POST될 경우에만 실행
if(IsPost) {        
    // 사용자의 입력값을 받아서 저장    
    var num1 = Request["text1"];        
    var num2 = Request["text2"];        
    // 넘겨받은 값을 Integer 형으로 변환 후 더하기 수행
    total = num1.AsInt() + num2.AsInt();         
    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
    <head>        
        <title>Razor로 HTML Form 값을 처리</title>        
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        
        <style type="text/css">            
            body {
                background-color: beige; font-family: Verdana, Ariel; margin: 50px;                 
            }            
            form {
                padding: 10px; border-style: solid; width: 250px;
            }        
        </style>        
    </head>    
    <body>        
        <p>두개의 숫자를 넣고 "더하기" 버튼을 클릭하세요~</p>        
        <p></p>         
        <form action="" method="post">        
            <p>
            <label for="text1">숫자(1):</label>            
            <input type="text" name="text1" />            
            </p>            
            <p>
            <label for="text2">숫자(2):</label>            
            <input type="text" name="text2" />            
            </p>            
            <p>
            <input type="submit" value="더하기" />
            </p>                 
        </form>
        @// 더한 값이 아래 표시 됩니다. 
        <h2>두 숫자의 합은: @total 입니다.</h2>     
        <h2>Request로 넘어온 문자열은 : @RequestQueryString 입니다.</h2>     
    </body>
</html>

 

이렇게 간략히 Razor가 제공하는 코드블록에 대한 정리와 함께 HTML페이지의 Form에서 넘어온 Post 값과 URL 쿼리 문자열로 넘어온 값을 처리하는 예제에 대해서 살펴 보았습니다. 어떠세요? Form값에 대한 처리 쉽지요?

그럼, 다음 강좌에서는 "(5) Razor 강좌 - 재사용 가능한 코드 생성" 내용을 진행하도록 하겠습니다.

 

감사합니다.

 

참고자료 :

(1) WebMatrix와 Razor! 이제 시작합니다.

(2) WebMatrix 설치부터 Hello World까지

(3) Razor 강좌 - 기본 구문 및 주석 처리
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

[동영상 강좌] (2) WebMatrix 5분 리뷰~

[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

WebMatrix Tutorial : 4 - Working with Forms