Search

'Web Development Helper'에 해당되는 글 1건

  1. 2010.07.14 M, V 그리고 C의 각방생활(9) - jqGrid 사용해보자

M, V 그리고 C의 각방생활(9) - jqGrid 사용해보자

ASP.NET MVC 2010. 7. 14. 09:00 Posted by 네버덜레스
이번 시간은 jQuery 플러그인인 jqGrid를 잠깐(?) 사용해보는 시간을 갖도록 하겠습니다. 

jqGrid 플러그인 다운

먼저, jqGrid 사이트에서 jqGrid 플러그인을 다운받습니다.
다운받은 압축파일을 푸신 후, ASP.NET MVC 프로젝트에 3개의 파일을 추가하겠습니다. jquery.jqGrid.min.js 파일과 jquery-ui-1.7.1.custom.css, ui.jqgrid.css 파일입니다.


자, 이제 시작해볼까요?

jqGrid 맛보기

한꺼번에 다 보여드리기 보다는 조금조금씩~ 맛을 보여드리도록 하겠습니다^^

좀전에 프로젝트에 추가한 파일을 뷰페이지에 쭈~욱 끌어다 놓습니다.

<link href="/Content/jqGrid/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>

그 다음으로, 이 jqGrid 관련 자바스크립트 소스를 추가하겠습니다. 한눈에 봐도 너무 간단한 스크립트 부분이라 jQuery를 모르셔도 딱!! 파악하실수 있을 겁니다.

<script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("GridData", "Home") %>',
                datatype: 'json',
                mtype: 'get',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'DirId', index: 'DirId', width: 40, align: 'center' },
                  { name: 'Name', index: 'Name', width: 100, align: 'left' },
                  { name: 'Phone', index: 'Phone', width: 100, align: 'left' },
                  { name: 'Email', index: 'Email', width: 200, align: 'left' },
                  { name: 'SpeedDial', index: 'SpeedDial', width: 100, align: 'center'}],
                caption: '전화번호부'
            });
        });
    </script> 

위 소스를 잠깐 살펴보면, url은 Home 컨트롤러에서 GridData라는 액션메쏘드를 호출하고 있습니다. 잠시 후에 이를 구현해야겠죠?^^; datatype은 json이네요. 음.. GridData라는 놈이 json객체를 넘겨주겠군?! 하고 생각하시면 되죠. colNames는 리스트를 보여줄때 각각의 컬럼을 구분짓는 이름입니다. colModel을 통해 grid에서 받을 리스트에 width라던지 align을 주고 있는 것을 보실수 있습니다.

그래서 완성된 Index.aspx 뷰페이지를 보게되면,

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    홈 페이지
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <link href="/Content/jqGrid/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
    <link href="/Content/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("GridData", "Home") %>',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'DirId', index: 'DirId', width: 40, align: 'center' },
                  { name: 'Name', index: 'Name', width: 100, align: 'left' },
                  { name: 'Phone', index: 'Phone', width: 100, align: 'left' },
                  { name: 'Email', index: 'Email', width: 200, align: 'left' },
                  { name: 'SpeedDial', index: 'SpeedDial', width: 100, align: 'center'}],
                caption: '전화번호부'
            });
        });
    </script> 
<h2><%: ViewData["Message"] %></h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
</asp:Content>

table에 리스트를 쫙~ 뿌려주도록 하겠습니다.

이제, Home 컨트롤러를 잠깐 손보도록 하겠습니다. jqGrid에서 받을 json객체를 리턴하는 GridData라는 액션메쏘드를 만들도록 하겠습니다. 이번 포스팅은 정말 맛보기이기 때문에 간단하게 바로 객체를 만들어서 리턴하겠습니다.


와우~ 정말 간단하게 모든 구현이 완료되었습니다! 이제 실행을 해볼까요?


엥? 이건 또 뭔가요? 역시 한번에 되는 것은 없나봐요;;
내용을 보니 GET 요청이 차단되었고, JsonRequestBehavior를 AllowGet으로 설정하라고?! 호출 스택을 보니 JsonResult를 실행하다가 에러가 발생하였네요. 음.. JsonResult 부분이 잘못되었군. 한번 수정해보죠^^;

return Json(dirs, JsonRequestBehavior.AllowGet);

수정후 실행해보면~


네. 멋지게 성공하였습니다.

ASP.NET MVC 2 에서는 기본적으로 이러한 GET방식의 호출을 보안상의 문제로 막아놨습니다. 그래서 JSON 객체를 리턴할때는 JsonRequestBehavior.AllowGet을 추가하여 클라이언트의 GET요청을 허용하도록 한 것이죠.

하지만, 막아놓은 것을 굳이 풀 필요는 없겠죠?^^; POST 방식으로 호출하는 것이 좀더 좋을 듯 합니다.
이 부분은 따로 설명드릴 필요없겠죠? 약간(^^;;) 설명드리면~
일단 GridData액션 메쏘드 위에 GET으로 요청한 놈은 접급하지마! 라는 표지판([HttpPost])을 세워두는거죠. 실행시켜보면 역시 에러가 발생할겁니다. 리소스를 찾을수 없다는... 그래서! 뷰페이지 스크립트 부분의 mtype을 POST로 수정하는거죠^^ 실행해보세요~ 잘되시나요?

이거슨 번외요~

웹 개발자를 위한 Web Development Helper 유틸이 있습니다. 익스플로러에 확장할 수 있죠. 저같은 경우는 Fiddler를 많이(?) 사용하는데요. Web Development Helper는 특히 Ajax와 ASP.NET 개발자를 위한 것이라고 하네요. 사이트에서 다운 받고 인스톨하시고, 익스플로러의 도구 메뉴의 탐색창->Web Development Helper를 클릭하시면 됩니다.
이번 jqGrid 맛보기에서의 request&response정보도 확인할 수 있네요.


마무리요

이번시간은 정말 jqGrid 플러그인의 맛보기였고요, 다음 포스팅에서 뵙도록 하겠습니다. (다음 포스팅도 맛보기처럼 보이면 어떡하죠?^^;;)

참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.net/
http://projects.nikhilk.net/WebDevHelper/
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

'ASP.NET MVC' 카테고리의 다른 글

ASP.NET MVC 3 Preview 1 이 릴리즈 되었습니다.  (1) 2010.07.28
M, V 그리고 C의 각방생활(10) - jqGrid를 이용한 paging과 sorting  (2) 2010.07.15
M, V 그리고 C의 각방생활(8) - jQuery와 탭메뉴 그리고 파샬뷰  (0) 2010.07.01
M, V 그리고 C의 각방생활(7) - 함께 즐겨요~ jQuery  (4) 2010.06.30
M, V 그리고 C의 각방생활(6) - 유효성 검사(2)  (5) 2010.06.27
 

티스토리툴바