'ajax'에 해당되는 글 1건

  1. 2009.10.20 ASP.NET MVC 2 에 AJAX 간단히 추가하기
ASP.NET2009.10.20 15:47

MVC 패턴에서 AJAX을 쓰기가 꽤 까다롭습니다.


위 그림과 같이 페이지 요청을 하면 라우팅 테이블(또는 룰)을 거쳐 Controller->Model->View 의 흐름을 거치게 됩니다.

기존 WebForm 에서는 간단히 처리가 되는데, MVC 모델에서는 간단하지가 않죠.

일전에 자바 프로젝트를 하면서 MVC 2 모델에 Spring 위에서 AJAX을 구현해야 하는 경우가 생겼습니다. 이때는 Return Type이 XML 문서로써, AJAX 요청에 대해서 MultiActionController 를 상속받아서 처리한 경우가 있었습니다. 이건 Spring 프레임웍에서 지원하는거라 별 어려움없이 xml 설정과 액션 우회 방식으로 처리 되어 실제 흐름은 위 그림과 비교 해 보면 실존하는 페이지 View 가 없고, Document 객체를 메모리에 Writing 시키는 방식으로 처리 했습니다.

제가 MS 제품을 좋아 하는 이유가 쓰기 편하게 설계가 되어 있다는 점 입니다. 마침 Walkthrough: Adding ASP.NET AJAX Scripting to an MVC Project 문서를 발견하여 간단히 따라 할수 있도록 정리 해 봤습니다.

  • 준비물
    • Microsoft Visual Studio 2008
    • ASP.NET MVC 2 - Download

1. 프로젝트 시작하기


위 두가지가 설치되었으면 Visual Studio 를 실행하고, 그림과 같이 프로젝트 템플릿을 ASP.NET MVC 2 Web Application 을 선택하고, 프로젝트명을 MVCAjaxApplication 이라고 입력한 후 확인을 누릅니다.



2. ASP.NET AJAX 스크립트 라이브러리를 스크립트 참조

솔루션 탐색기에서 /Views/Shared/Site.Master 를 선택하고, 소스보기를 한후 아래 코드를 head 에 추가합니다.



3. HomeController 클래스에 액션 메서드 추가

솔루션 탐색기에서 /Controllers/HomeController.vb 를 선택 하고, 다음과 같이 액션 메서드를 추가 해 줍니다.
    Public Function GetStatus() As String
        Return "Status OK at " + DateTime.Now.ToLongTimeString()
    End Function

    Public Function UpdateForm(ByVal textBox1 As String) As String
        If textBox1 <> "Enter text" Then
            Return "You entered: """ + textBox1.ToString() + """ at " + DateTime.Now.ToLongTimeString()
        End If

        Return [String].Empty
    End Function


4. Index 페이지 재 정의

지금까지 한 작업들을 보여주는 View 페이지(/Views/Home/Index.aspx)에서 <asp:Content> 부분을 다음과 같이 수정합니다.


5. 테스트

지금까지 작업한 내용을 확인하기 위해 "실행" 을 해 봅니다.
그러면 다음과 같이 잘 나옵니다.(혹시 index.aspx 에 포커스를 두고 실행하면 라우팅 오류가 날수 있으므로, 컴파일 후 Default.aspx 페이지에서 실행 하시기 바랍니다.)


이렇게 간단하게 ASP.NET MVC 에서 AJAX을 구현 할수 있습니다.
저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by dotnetpower

티스토리 툴바