MVC4 - Single Page Application (SPA)

Single Page Application(SPA)는 MVC4 beta 버전부터 새롭게 추가된 기능으로 중요한 몇가지 특징을 가진다.

 

1) 로컬 인터렉션에 캐쉬된 데이터를 이용하는 자바스크립트 라이브러리 세트

2) Web API를 사용한 단위 작업과 DAL 지원

3) 빠르게 시작할 수 있는 MVC 프로젝트 템플릿

 

참조 페이지 :

Introduction

http://www.asp.net/single-page-application

 

참조 내용 :

2012년 4월 14일 송파 KOSTA 이복영 강사님 주말반 수업 내용

 

SPA를 시작하기 위해서는 VS2010에서는 ASP.NET MVC 4 버전을 설치하면 되고, VS11에서는 기본으로 지원을 한다. SPA를 이용해서 페이지를 만들어보면, 정말 이렇게 쉽게 database를 사용하는 페이지를 만들 수 있을까 할 정도로 놀라운 경험을 할 수 있게 될 것이다.

이 포스트에서는 VS11를 이용해서 만들어 보도록 하겠다.

 

1. MVC4 프로젝트 생성

File -> New -> Project -> ASP.NET MVC 4 Web Application 선택

Name : SPASample -> OK

 

Single Page Application 선택 -> OK

 

추가된 템플릿을 F5키를 눌러서 실행 해본다.

 

 

2. Web.config에 컨테이너 정보 추가

 

connectionStrings가 있는 곳에 아래 내용을 추가해 주면 된다. 이 내용은 SQL CE 4.0을 사용하는 로컬 데이터 베이스의 컨테이너 경로를 지정하는 것이다.

 

<add name="personContainer" connectionString="data source=|DataDirectory|person.sdf" providerName="System.Data.SqlServerCe.4.0" />

 

3. Models 폴더에 Person.cs 추가

 

* SPASample 프로젝트에서는 SamplePortableClassLibrary프로젝트에서 사용하던 Person.cs 파일을 Link로 추가해 놓았다.(그냥 Person.cs 파일을 만들어서 사용해도 된다.)

* SamplePortableClassLibrary 관련 포스트 링크

http://kaki104.tistory.com/entry/Using-MVVM-Pattern-in-Portable-Library

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

namespace SamplePortableClassLibrary.Models
{
    public class Person : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private int id;

        public int Id
        {
            get { return id; }
            set
            {
                id = value;
                RaisePropertyChanged("Id");
            }
        }

        private int age;

        public int Age
        {
            get { return age; }
            set
            {
                age = value;
                RaisePropertyChanged("Age");
            }
        }

        private string name;

        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                RaisePropertyChanged("Name");
            }
        }

        private bool sex;

        public bool Sex
        {
            get { return sex; }
            set
            {
                sex = value;
                RaisePropertyChanged("Sex");
            }
        }
    }
}

F6키를 눌러서 빌드를 해준다.

 

4. Controller 추가

 

Controllers 폴더에서 마우스 오른쪽 버튼을 클릭 ->  Add -> Controller ->

Controller name : PersonController

Template : Single Page Application with read/write actions and views, using Entity Framework

Model class : Person (SamplePortableClassLibrary.Models)

Data context class : SPASample.Models.personContainer

* Web.config에 추가한 내용의 이름과 동일한 이름을 사용

Add 클릭해서 완료

템플릿들이 추가가 되면 F5키를 눌러서 실행해 본다.

 

5. Person 페이지로 이동

실행 후 http://localhost:61466/Person 이 주소를 직업 입력해 보자.

 

이 페이지가 바로 Person 모델을 기본으로 생성된 CRUD가 가능한 페이지이다. 페이지에 상단에 이름도 Person이 아니라 People로 자동으로 변경된다는..

Create Person 버튼을 클릭해 보자

Age, Name, Sex에 내용을 입력하고  Save 버튼을 클릭한다.

 레코드가 추가 되었다.

우린 눈깜짝 할 사이에 database를 사용하는 웹 페이지를 만들었다.

 

6. Database는 어디에?

아까 Web.config에 추가한 connectionString 다시 생각해 보면, 우리가 사용한 db는 SQL CE 4.0이고 code-first방식으로 런타임에 생성되어진 database파일이 프로젝트의 App_Data 폴더에 생성이 되어 있을 것이다. 이 것을 프로젝트에 추가해 보자

 

빨간색 동그라미가 있는 곳을 눌러서 모든 파일이 보이도록 만든 후 person.sdf 파일을 오른쪽 마우스 버튼 클릭해서 Include in Project를 선택한다.

-> 프로젝트에 추가된 후 더블 클릭하면 Data Connections에 person.sdf 파일이 연결된 것을 볼 수 있다.

-> 확장한 후 -> People을 선택하고 -> Show Table Data를 선택 한다.

 

방금 추가한 레코드 한개가 보인다.

 

7. 웹 클라이언트에서 어떻게 CRUD를 할 수 있었을까?

 

Controllers 폴더를 보면 personContainerController.cs, personContainerController.Person.cs 두개의 클래스가 추가 되어 있는 것을 볼 수 있다.

personContainerController.cs는 컨텍스트를 Web에서 접근해서 사용할 수 있도록 매핑을 해주는 역할을 하고, personContainerController.Person.cs는 컨텍스트에서 CRUD를 할 수 있는 기능을 지원하는데, 거의 WCF RIA Service 느낌의 서비스를 제공해 주고 있다.

 

http://localhost:61466/api/personContainer 라고 주소창에 입력 하면 다운로드를 받을 수 있다는 표시가 생긴다. Open을 선택하고 Notepad를 선택하면

[{"Age":11,"Id":2,"Name":"kaki104","Sex":true}]

라는 json 코드가 바로 전송되는 것을 알 수 있다.

 

http://localhost:61466/api/personContainer?$filter=Id+eq+2 라고 입력하면, Id가 2번인 레코드 한개만 반환된다.

?뒤의 문법은 OData를 사용한다.(sort,filter)

 

OData

http://www.odata.org/media/30002/OData.html

 

 

8. 다음에는

이 서비스를 Metro style app에서 이용해서 CRUD를 하는 것을 다루도록 하겠다.

 

SPASample.zip