[jQuery] ASP.NET MVC & JSON 웹 응용프로그램 만들기

2012.08.31 10:51 개발언어/ASP.NET
[jQuery] ASP.NET MVC & JSON 웹 응용프로그램 만들기


머리말 

JSON(Javascript Object Notation) 은 이름 그대로 자바스크립트에서 객체를 표현하는 방법 입니다.

ASP.NET MVC 는 마이크로소프트에서 만든 서버 개발 프레임워크 입니다. MVC(Model-View-Controller) 패턴을 따릅니다. MVC 패턴을 이루는 요소는 모델, 뷰, 컨트롤러 입니다.



시작하기 




ASP.NET MVC3 의 응용프로그램을 생성한다. HomeController.cs 파일에서 마우스 우측을 하여 뷰를 추가한다. 



생성을 하면 /View/Home/Index.cshtml 의 파일이 생성돼 있습니다. 이것은 HomeController 클래스의 Index() 메서드 위치와 일치합니다.




        public ActionResult MyFirstStringAction()

        {

            return Content("<h1>Hello ASP.NET MVC</h1>");

        }


http://localhost:4474/home/MyFirstStringAction 로 접속하면 수행결과를 확인 할 수 있습니다.

간단한 html 태그를 제공하는 웹 서비스를 만들어 보았습니다. 액션  MyFirstStringAction 을 만들고 문자열을 Content() 매서드에 매개 변수로 넣어 리턴합니다.



JSON 웹서비스만들기 

 

        public ActionResult MyFirstJsonAction()

        {

            var willReturn = new { name = "제시카", gender = "여자", part = "보컬" };

            return Json(willReturn, JsonRequestBehavior.AllowGet);

        }


객체를 만들고 Json() 메서드를 사용하여 리턴합니다. 

리턴결과
http://localhost:4474/home/ MyFirstJsonAction  로 접속하면 수행결과를 확인 할 수 있습니다. 
{"name":"제시카","gender":"여자","part":"보컬"}



XML 웹서비스 만들기



        public ActionResult MyFirstXMLAction()

        {

            var willReturn = "";

            willReturn += "<people>";

            willReturn += "     <person>";

            willReturn += "         <name>제시카</name>";

            willReturn += "         <gender>여자</gender>";

            willReturn += "         <part>보컬</part>";

            willReturn += "     </person>";

            willReturn += "     <person>";

            willReturn += "         <name>이하니</name>";

            willReturn += "         <gender>여자</gender>";

            willReturn += "         <part>미스코리아</part>";

            willReturn += "     </person>";

            willReturn += "     <person>";

            willReturn += "         <name>강호동</name>";

            willReturn += "         <gender>남자</gender>";

            willReturn += "         <part>MC</part>";

            willReturn += "     </person>";

            willReturn += "</people>";

            return Content(willReturn, "text/xml");

        }


JSON 만들때 보다 어렵거나 복잡하지 않다.



요청 매개변수 처리 



        public ActionResult ActionWithData()

        {

            var name = Request["name"];

            var age = Request["age"];

            return Content("<h1>" + name + ":" + age + "</h1>");

        }


프로젝트 실행시 : http://localhost:4474/home/ActionWithData?name=parkkwangho&age=31

name과 age의 값을 전송하여 주어야 합니다.



실제로 호출하여 사용하기 



Index.cshtml 소스코드

@{ Layout = null; }

<!DOCTYPE html>

<html>

<head>

    <title>Index</title>

    <script>

        var request = new XMLHttpRequest();

        request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', false);


        //Ajax 를 수행

        request.send();


        //출력

        alert(request.responseText);

    </script>

</head>

<body>

    

</body>

</html>


실행결과는 전송한 name, age 에 따라서 리턴된 값을 확인할 수 있다. 


모든 브라우저에서 동작하는 Ajax 요청 만들기


    <script>

        // XMLHttpRequest 객체를 생성하는 함수

        // 현존하는 모든 브라우저에서 동작합니다.

        function createRequest() {

            var request;

            try {

                request = new XMLHttpRequest();

            } catch (exception) {

                try {

                    request = new ActiveXObject('Msxml2.XMLHTTP');

                } catch (innerException) {

                    request = new ActiveXObject('Microsoft.XMLHTTP');

                }

            }

            return request;

        }


        // 페이지 로드시 수행

        window.onload = function () {

            // 객체를 생성

            var request = new createRequest();

            request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', false);


            //Ajax 를 수행

            request.send();


            //출력

            alert(request.responseText);

        }

    </script>




마무리


다음에는 동기방식과 비동기 방식으로 구현하는 것을 해보자!~

2012/09/03 - [개발언어/ASP.NET] - jQuery 비동기 처리

신고
  1. Favicon of http://www.keydali.com BlogIcon 키큰난쟁이비밀방문자
    2012.09.03 10:49 신고 edit/del reply

    웹페이지 만들 때 사용하는 건가봐요~~ㅎ
    공부좀 해야되는데~~전혀 몰라서 큰일이네요~~
    능력자 엔돌슨님입니다~ㅎㅎ

    • Favicon of http://ndolson.com BlogIcon 엔돌슨비밀방문자
      2012.09.03 11:34 신고 edit/del

      네 맞아요 ㅋㅋ 전에 프로젝트 투입될때 jQuery 하고 Ajax 를 사용하여 만들었는 데 공부할겸 책 보면서 정리하였습니다^^ㅋㅋ
      능력자 까지는 아니에요~ 노력하고 공부하는 개발자입니다 ㅋㅋ

  2. 비밀방문자
    2012.09.14 14:18 신고 edit/del reply

    이거 제가 보고있는 책이랑 거의 똑같은데 혹시 저자신가요 ㅎㅎ?