요즘은 jQuery와 같은 자바스크립트 기반의 라이브러리로 웹개발이 한결 더 수월해진 거 같습니다.

이러한 라이브러리로 작업할 때 특히 데이터를 끌어와서 뿌려주는 작업들이 많은데요.

이럴때 많이 사용되는 데이터 형식이 JSON 데이터 형식이 아닐까 합니다.

오늘은 이 JSON 데이터 형식을 좀 더 쉽고 빠르게 만들 수 있는 오픈 라이브러리를 소개해드릴까 합니다.

 

1. 관련 파일 다운로드(http://sourceforge.net/projects/csjson/)

2. 프로젝트 하위 bin 폴더에 System.Net.Json.dll 추가

3. 사용하려는 페이지 상단에 @using System.Net.Json; 추가

 

이렇게 하시면 일단 준비는 끝입니다.

 

그럼 다음과 같은 데이터를 출력하도록 해보겠습니다.

<text>
    {
        "page": "@page",
        "total": "@iPageCount",
        "records": "@iRecordCount",
        "rows": [
            {
                "id": "1",
                "cell": [
                    "1",
                    "Carrot Cake",
                    "A scrumptious mini-carrot cake encrusted with sliced almonds",
                    "8.99",

                    "carrot_cake.jpg"
                ]
            }
        ]
    }
</text>

 

내용을 잠시 보자면...

page, total, records, rows의 object들로 구성 되어 있으며 rows는 다시 array([ ]로 묶인 부분)로 구성되어 있습니다.

rows의 array안에는 다시 id, cell의 object들로 구성 되어 있고 cell 안에 또 array가 들어가 있습니다.

 

Razor에서의 소스는 다음과 같습니다.

 

image2.jpg

 

먼저 제일 상위 항목에 해당하는 res를 object들을 위해 JsonObjectCollection으로 생성합니다.

그 후 object들을 하나씩 붙이시면 됩니다.

rows 같은 경우는 하위에 array 형식으로 구성되므로 JsonArrayCollection으로 생성합니다.

rows에 들어가는 object들을 위해 다시 또 JsonObjectCollection로 items를 생성합니다.

items에 들어가는 object들을 추가합니다.

cell의 하위 항목은 array이므로 JsonArrayCollection으로 생성합니다.

cell의 하위 항목들을 추가합니다.

위에서 생성된 cell 항목을 items에 추가합니다.

위에서 생성된 items 항목을 rows에 추가합니다.

위에서 생성된 rows 항목을 제일 상위 항목인 res에 추가합니다.

결과물을 출력합니다. 특히 이 때 주의하실 점은 Html.Raw를 이용하셔야 제대로 된 결과물이 출력된다는 겁니다.

 

출력된 결과물은 다음과 같습니다. (템플릿으로 제공되는 Bakery DB를 이용했습니다.)

 

{ "page": "1", "total": "1", "records": "6", "rows": [ { "id": "1", "cell": [ "1", "Carrot Cake", "A scrumptious mini-carrot cake encrusted with sliced almonds", "8.99", "carrot_cake.jpg" ] }, { "id": "2", "cell": [ "2", "Lemon Tart", "A delicious lemon tart with fresh meringue cooked to perfection", "9.99", "lemon_tart.jpg" ] }, { "id": "3", "cell": [ "3", "Cupcakes", "Delectable vanilla and chocolate cupcakes", "5.99", "cupcakes.jpg" ] }, { "id": "4", "cell": [ "4", "Bread", "Fresh baked French-style bread", "1.49", "bread.jpg" ] }, { "id": "6", "cell": [ "6", "Pear Tart", "A glazed pear tart topped with sliced almonds and a dash of cinnamon", "5.99", "pear_tart.jpg" ] }, { "id": "7", "cell": [ "7", "Chocolate Cake", "Rich chocolate frosting cover this chocolate lover’s dream. ", "8.99", "chocolate_cake.jpg" ] } ] }

 

 

말로 풀어 쓰자니 내용이 좀 복잡한 듯 하지만 직접 한번만 해 보시면 금방 감이 오실껍니다. 

 

No. Subject Author Date Views
Notice [공지] 이렇게 SQLER에서 처음 글쓰기를 시작해 보는건 어떨까요? [1] 코난 2010.08.19 113010
78 VS 2010 SP1(new WebPI instraller) [5] 제라드(하영진) 2011.03.16 10004
77 mvcConf - ASP.NET MVC 온라인 컨퍼런스 코난(김대우) 2011.03.15 11351
» [Tip] Razor에서 JSON for .NET을 이용한 JSON 데이터 형식 쉽게 만들기 [3] 달빛(안흥문) 2011.03.14 16802
75 Visual Studio 2010 서비스팩1 공식발표 [1] 코난(김대우) 2011.03.09 11012
74 Visual Studio로 ASP.NET Web Pages 를 쫌만 더~ 잘 써보자 [2] 코난(김대우) 2011.03.08 16960
73 [Tip] Razor에서 저장 프로시져의 실행 및 반환 값 받기 [5] 달빛(안흥문) 2011.03.07 10364
72 WebMatrix 론칭 세미나 발표 영상 - Session 1: 웹사이트 제작의 새로운 패러다임, WebMatrix - 김대우, 고영수, 김성호 코난(김대우) 2011.02.21 15339
71 [FAQ] ASP.NET Web Pages의 Html 문자열 보안 처리 - Html.Raw와 Request.Unvalidated 처리 코난(김대우) 2011.02.18 13539
70 WebMatrix 정식버전의 새로운 기능과 변경된 부분 소개 - 릴리즈 노트 코난(김대우) 2011.01.25 23358
69 드디어~ WebMatrix 정식버전에 맞게 한글 무료 eBook을 최신 코드로 수정 했습니다. 바로 다운로드 하세요~ [8] 코난(김대우) 2011.01.24 12878
68 [행사종료] WebMatrix 공식 발표 세미나!!! - 코난이도 나옵니다. ^_^ [16] 코난(김대우) 2011.01.17 17375
67 WebMatrix 정식버전이 나왔어요. [4] 대혀니 2011.01.14 9521
66 코드매쉬 행사에서 마이크로소프트가 WebMatrix 이벤트를 전세계에 생중계 합니다. [5] 코난(김대우) 2011.01.06 9945
65 [동영상] jQuery와 Razor 웹 개발 세미나 영상 / 김수영 MVP [2] 코난(김대우) 2010.12.13 16559
64 WebMatrix에서 단축 URL(URL Shortener) Helper 사용 코난(김대우) 2010.12.13 15624
63 WebMatrix의 내장 DB인 SQL Compact 4.0 에서 페이징 구현 코난(김대우) 2010.12.13 13224
62 WebMatrix Beta3의 새로운 기능과 변경된 부분 소개 - 릴리즈 노트 [3] 코난(김대우) 2010.12.08 18527
61 WebMatrix 베타3에 맞게 한글 무료 eBook을 최신 코드로 수정 했습니다. [2] 코난(김대우) 2010.12.08 14574
60 WebMatrix 베타3에 언어 깨짐 현상이 있는 듯 합니다.-해결됨 [2] 코난(김대우) 2010.12.03 11290
59 Razor- Custom Helper와 Function 만들기 [1] 우주인(김재훈) 2010.12.03 12450





XE Login