MVC JQuery UI사용하여 Dialog띄우기

새로운 프로젝트에 들어갔다.

디자이너분이 디자인을 예쁘게 했다.

쩝.. 근데 팝업으로 띄우라는 기획서.....

윈도우 팝업으로 띄우는 시대는 한물 갔다.

생각하여 JQuery UI DIalog를 쓰기로 했다.

그럼 MVC 에서 어떻게 사용하면 좋을까? 

기본적으로 DIalog를 띄우기 위해서는 jquery 와 jquery-ui 프레임워크가 필요하다.

어디서 받는지는 모두 알거라 생각한다.

우선 전체적인 소스를 한번 보겠다. 

<script src="@Url.Content("~/Common/js/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Common/css/ui-lightness/jquery-ui-1.8.16.custom.css")" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
    $(".openDialog").live("click", function (e) {
        e.preventDefault();
 
        $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,                        
                    })
                    .load(this.href);
    });
</script>
<h2>@ViewBag.Message</h2>
@Html.ActionLink("Contact Us", "About", "Home", null, new{ @class = "openDialog", data_dialog_id = "about", data_dialog_title = "About"})

위의 스크립트 삽입은  http://jqueryui.com/download 에서 다운로드한 js와 css를 삽입하면 된다.

그다음에 스크립트가 중요한다. class가 openDialog인 엘러먼트에 클릭이벤트를 주고 이트가 발생하는걸 막은 다음 Div태그를 적절한 css와 id를 주어 수정한다. 그런다음 jquery-ui에서 제공하는 dialog함수를 써서 Dialog로 화면을 보여준다. 그럼 실행화면을 보자

 붉은색으로 테두리가 되어있는 Contact Us를 클릭하는 순간 Home컨트롤러에 About 메서드를 실행하는 결과값이 다이얼로그에 나온다. 

Jquery Plugin때문에 작업이 많이 쉬워졌다. 참좋다.ㅋㅋ