요즘은 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" ] } ] }

 

 

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

 





profile

도움받고~ 도움주고~ 살기좋은 세상을 만들어 보아요~!