Visual Studio 2010 공식 팀 블로그 @vsts2010

Posted by 박세식(쎄스)
정말이지, 테스팅 그거 아무나 하는거 아니죠. 특히 저처럼 게으른 놈은 발을 들여놓기가 무서울때도 있습니다.
고객분들은 빠른 결과물을 얻길 원하시고, 그 고객이 여럿이면 모두가 자기의 일이 우선이니 빨리 좀 해달라고 아우성 거릴때가 많습니다. 가뜩이나 개발로도 벅찬 시간인데, 테스트라뇨.. 에잇!
하지만, 그렇게 작업을 한 후 스테이징(Staging Server - 라이브 서버에 반영하기 전 배포하여 테스트하는 서버입니다^^) 에 적용해놓으면 테스트팀에서는 온갖 방법으로(정말 어처구니 없는 입력값으로 마구 공격(?)해 들어오시죠) 테스트를 한 후 결과물들을 전달해주시죠. 그것 예외처리하는 것으로 인해 또한번의 시간이 소비되고 다시 테스트하고 다시 결과물 받고, 계속 반복되는거죠. 그렇게되면, 처음에 빨리 개발했던 시간이 무용지물이 되어버리는 것이죠.

신입시절에(지금도 신입 짬밥이죠;;) 과장님 한 분이, '야, 어떻게 너는 일을 주면 생각없이 컴퓨터로 바로 달려들어 개발하냐?' 라고 한 말씀 해주셨습니다. 먼저 그림을 그려보라고, 이면지 많잖아. 없어? 내가 줄까? 그러시며,  흐름을 생각하며, 어떤식으로 해야할지 먼저 그림을 그리라고요.
테스팅하는 것도 먼저 그림을 그려보는 작업 같습니다. 이렇게 개발을 하면 원하는 결과값이 나오겠지하며, 테스트와 병행하며 원하는 결과값이 맞게 나오는지 확인해가며 개발을 해나가는 거죠.



단위 테스트 프레임워크를 사용해보자


닷넷 프레임워크를 위한 테스트 프레임워크가 많습니다. 다들 아시는 NUnit, xUnit, MbUnit 등이 있죠. 하지만, 저 게으른 것 다들 아실겁니다. 그래서! 비주얼 스튜디오 단위 테스트를 이용하겠습니다. 위 단위 테스트 사이트들 들어가서 다운받고 설치하고, 에휴~^^;

ASP.NET MVC 프로젝트를 생성하게 되면 아래의 화면과 같이 단위 테스트를 할지 여부를 묻는 대화상자가 나옵니다. 예(Yes)를 선택하면, 프로젝트가 생성될때 테스트 프로젝트도 같이 생성하게 됩니다.


테스트 프로젝트에는 Controllers라는 폴더가 있고, 그 안에는 샘플프로젝트의 Home컨트롤러와 Account컨트롤러를 테스트하기 위한 HomeControllerTest.cs와 AccountControllerTest.cs 가 있습니다. HomeControllerTest를 열어보면 다음과 같습니다.


Microsoft.VisualStudio.TestTools.UnitTesting 네임스페이스가 임포트 되어 있는 것이 보이고, [TestClass], [TestMethod] 가 눈에 띄네요. 주석을 보니,

TestClass : 테스트 메서드가 포함된 클래스를 식별하는데 사용됩니다.
TestMethod : 테스트 메서드를 식별하는데 사용됩니다.

이렇다네요.^^



테스트와 함께 하시겠습니까?


다음은 TelDirController 소스입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace UsingTest.Controllers
{
    public class TelDirController : Controller
    {
        //
        // GET: /TelDir/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /TelDir/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }       
    }
}

아무것도 처리하지 않은 깨끗한(?) 소스입니다. Index(), Details() 라는 두 액션메쏘드가 있고, 두 메쏘드 모두 View를 리턴하고 있습니다.

그럼, TelDirController를 위한 테스트를 생성해보겠습니다.



테스트 만들기


테스트 프로젝트의 Controllers를 오른쪽 버튼으로 클릭한 후 추가 -> 새 테스트를 선택합니다.


테스트하려는 컨트롤러 이름 뒤에 Test 만 붙여서 이름을 만들겠습니다. TelDirControllerTest 처럼요.^^;


확인 버튼을 클릭하면 다음의 소스가 보이실겁니다^^


지금으로선 불필요한 것들을 모두 닫아놓긴 했는데요, 물론 삭제하셔도 됩니다. 이런 것도 싫다 하시면, Controllers 폴더에서 클래스를 생성한 후 TestClass와 TestMethod 속성, 그리고 UnitTesting 네임스페이스를 임포트시키시면 됩니다.



맛보기 테스트


정말 맛만 보여드리겠습니다.^^;

TelDirController.Details 메쏘드가 정말 "Details" 뷰를 리턴하는지 테스트 해보도록 하겠습니다.
먼저 테스트 메쏘드를 만들어보겠습니다.

[TestMethod]
public void DetailsTest()
{
    var controller = new TelDirController();
    var result = controller.Details(1) as ViewResult;
    Assert.AreEqual("Details", result.ViewName);
}

Assert.AreEqual 은 비교대상의 두 값이 같은지 여부를 나타냅니다. 같으면 성공, 다르면 실패.
ViewResult.ViewName은 컨트롤러에서 리턴받은 뷰명을 나타냅니다.
자~ 테스트를 진행해볼까요?


'솔루션의 모든 테스트 실행' 버튼을 클릭합니다. 단축키는 Ctrl+R,A 라고 친절히 알려주네요^^ 물론 지금은 테스트 케이스가 하나라 이렇게 하지만 모든 테스트 실행 좌측에 있는 버튼인 '현재 컨텍스트의 테스트 실행'은 현재 선택받은 곳, 즉 커서가 위치한 곳의 테스트를 진행합니다.


엥?! 실패하였습니다. 예상 값이 Details 인데 실제값은.. 실제값은.. 없네요;;

TelDirController의 Details 메쏘드를 살펴보죠.

public ActionResult Details(int id)
{
    return View();
}

이렇게 되어 있네요. 잘못된 것은 없어보이는데요. 

Details 뷰를 리턴하려면 두 가지 방법이 있습니다. 위처럼 Details 액션 메쏘드에서 return View() 를 하는 방법(이것은 액션 메쏘드의 이름에서 유추가 됩니다), 다른 하나는 명시적으로 return View("Details") 와 같은 방법입니다.

그럼, 또다른 방법을 택해서 테스트를 돌려보죠.

public ActionResult Details(int id)
{
    return View("Details");
}

결과는


통과~.
이래서, 아~ 테스트시에는 뭐든지 확실하게 명시적으로 표현해줘야하는구나~ 라는 것을 알 수 있습니다.^^



마무리요



이번 포스팅은 간단하게 테스트하는 방법에 대해서 알아봤는데요, 다음은 이 테스팅에 대해서 좀더 자세하게 알아보는 시간을 가져보겠습니다.

맛이 어떠셨나요? 다음에는 더 화끈한 맛을 보여드리도록 하겠습니다^^



참고자료 : http://www.asp.net/mvc/tutorials/creating-unit-tests-for-asp-net-mvc-applications-cs
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 이면지 많잖아. 없어? 내가 줄까? ㅋㅋㅋ
    저도 무작정 코딩부터 하던 때가 생각나네요
    VS2010 트레이닝킷에도 TDD 랩이 딱 하나 있긴 하던데 영 손에 익질 않네요

  2. 실질적으로, 기사는이 칭찬할만한 주제에 정말 최고입니다. 당신의 결론에 동의하고 열심히 미래의 업데이 트를 기대합니다. 그냥 당신이 그냥 서면으로 멋진 명석을 위해 충분하지 않습니다 감사합니다라고. 나는 즉시 만족 일과 비즈니스 노력에 많은 성공을 것입니다.

Posted by 박세식(쎄스)
잊고 계셨을지도 모를 jqGrid 마지막편입니다.
이번 시간은 jqGrid를 이용하여 데이터를 추가, 편집, 삭제해보는 시간을 가져보도록 하겠습니다.


뷰페이지부터 보죠


지난 포스팅에 이어나갑니다. 먼저 가장 중요한 스크립트 부분을 보시면,

var updateDialog = {
                url: '<%= Url.Action("Update", "Home") %>'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};
                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    rowData = list.getRowData(selectedRow);
                    ajaxData = { dirId: rowData.dirId };
                    return ajaxData;
                }
                , width: "400"
            };
            $.jgrid.nav.addtext = "추가";
            $.jgrid.nav.edittext = "편집";
            $.jgrid.nav.deltext = "삭제";
            $.jgrid.edit.addCaption = "전화번호부 추가";
            $.jgrid.edit.editCaption = "전화번호부 편집";
            $.jgrid.del.caption = "전화번호부 삭제";
            $.jgrid.del.msg = "정말 삭제하실거에요?";
            $("#list").jqGrid({
                url: '<%= Url.Action("EntityGridData", "Home") %>',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'dirId', index: 'dirId', width: 40, align: 'center', editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                  { name: 'name', index: 'name', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'phone', index: 'phone', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'email', index: 'email', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'speedDial', index: 'speedDial', width: 200, align: 'center', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'}}],
                pager: $('#pager'), 
                emptyrecords: "Nothing to display",             
                rowNum: 3,
                rowList: [3, 10, 20, 50],
                sortname: 'dirId',
                sortorder: "desc",
                viewrecords: true,
                caption: '전화번호부',
                ondblClickRow: function (rowid, iRow, iCol, e) {
                    $("#list").editGridRow(rowid, updateDialog);
                }
            }).navGrid('#pager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true
                },
                updateDialog,
                updateDialog,
                updateDialog

            );

너무 많이 바뀌었나요? 그래도 알아보시죠? :) 굵은거~굵은거~

먼저 보이는것은 updateDialog가 보이네요. url도 보이고 submit 하고 ajax도 보이고.
데이터의 추가,편집,삭제시에 뜨는 팝업창에서 할일들이죠. Home 컨트롤러의 Update라는 액션메쏘드를 호출할거고요.
추가, 편집 후에는 창을 닫을 것이고(closeAfterAdd: true, closeAfterEdit: true), 모달창이고(modal: true), submit시 ajax를 사용하는 것 같아보이네요^^

다음으로 보이는게 $.jgrid.nav... 입니다. 이것은 지난 시간에도 말씀드렸던  grid.locale-en.js 을 수정하는 부분입니다. 이런 언어파일에는 디폴트값이 들어가 있다고 말씀드렸었죠? 기억하시죠? ;;

$.jgrid.edit = {
    addCaption: "Add Record",
    editCaption: "Edit Record",
    bSubmit: "Submit",
    bCancel: "Cancel",
    bClose: "Close",
    processData: "Processing...",
    msg: {
        required:"Field is required",
        number:"Please, enter valid number",
        minValue:"value must be greater than or equal to ",
        maxValue:"value must be less than or equal to",
        email: "is not a valid e-mail",
        integer: "Please, enter valid integer value",
        date: "Please, enter valid date value"
    }
};
$.jgrid.del = {
    caption: "Delete",
    msg: "Delete selected record(s)?",
    bSubmit: "Delete",
    bCancel: "Cancel",
    processData: "Processing..."
};
$.jgrid.nav = {
    edittext: " ",
    edittitle: "Edit selected row",
    addtext:" ",
    addtitle: "Add new row",
    deltext: " ",
    deltitle: "Delete selected row",
    searchtext: " ",
    searchtitle: "Find records",
    refreshtext: "",
    refreshtitle: "Reload Grid",
    alertcap: "Warning",
    alerttext: "Please, select row"
};

뷰페이지에서 수정한 부분은 두껍게 표시하였습니다.

$.jgrid.edit 의 msg중 required:"Field is required", email: "is not a valid e-mail" 이 부분이 뷰페이지의 colModel의 editrules: { required: true, email: true } 값과 매치가 되는 거죠.
또, grid의 네비게이션바에서 추가, 편집, 삭제 표시가 이미지로만 되어있었던 것을( $.jgrid.nav 의 add,edit,del 텍스트값이 빈값으로 되어있죠?) 뷰페이지에서 타이틀을 달아본겁니다.

나머지 부분도 재미있게 수정해서 테스트해보세요^^ 버튼 이름 변경, 필수값 에러 메시지, 경고메시지 등이 수정가능하네요. 



데이터를 처리하자


컨트롤러의 액션메쏘드가 추가되었겠죠? 다음은 HomeController의 추가된 Update 액션메쏘드입니다.

public ActionResult Update(TelDir telInfo, FormCollection formCollection)
{
    var operation = formCollection["oper"];
    if (operation.Equals("add"))
    {
       TelDir telData = new TelDir();
       telData.name = telInfo.name;
       telData.phone = telInfo.phone;
       telData.speedDial = telInfo.speedDial;
       telData.email = telInfo.email;
       _db.AddToTelDirSet(telData);
       _db.SaveChanges();
    }
    else if (operation.Equals("edit"))
    {
       var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
       telData.name = telInfo.name;
       telData.phone = telInfo.phone;
       telData.speedDial = telInfo.speedDial;
       telData.email = telInfo.email;
       _db.SaveChanges();
    }
    else if (operation.Equals("del"))
    {
       var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
       _db.DeleteObject(telData);
       _db.SaveChanges();
    }
    return Content("ok");
}

각 요청(add,edit,del) 대로 분기하여 처리하도록 하였습니다.



이제야 보는구나


실행을 해서 결과화면을 보면


멋드러지게 지난시간과는 다른 모습의 grid 가 있는 것을 확인할 수 있습니다. 추가,편집,삭제 버튼이 들어가 있고 옆에 리프레쉬 버튼도 있네요.

추가 버튼을 누르면


깔끔한 박스가 뜨네요. 전 슈퍼맨을 등록해보도록 하겠습니다. 값을 입력하지 않고 그냥 Submit 버튼을 살짝 눌러보시면 이름 입력하라고, 전화번호 입력하라고 아우성일겁니다. editrules: { required: true } 이것때문이죠. 매치된 메시지는 언어 스크립트에 있는 required:"Field is required" 이고요. 값을 정상적으로 입력후에 Submit을 하면...
바로바로 처리가 가능하네요^^ 모달창이 닫히는 부분은 위에서 설명드렸던 closeAfterAdd: true 때문인거죠. 편집하는 부분도 해볼까요? closeAfterEdit: truefalse로 하여 테스트해보세요. 모달창이 닫히지 않고 수정한 값들이 화면의 울렁거림 없이 처리가 되는 것을 확인하실 수 있습니다.

편집하는 부분을 테스트 하시려면 먼저 수정하려는 해당 로우(row)를 선택하신 후 편집 버튼을 클릭하시거나, 해당 로우를 더블클릭하시면 됩니다. 해보시죠?^^;


마지막으로 정말 삭제하실거에요? 를 본후 노는 시간을 마치도록 하겠습니다.




마무리요


정말 jquery 관련 플러그인들은 참 편리하네요. 이렇게 손쉽게 처리가 가능하니 말이죠.
암튼, 이번시간으로 jqGrid는 마치겠습니다. 뭐 한것도 없이 마친다고 하니 웃기네~ 라고 말씀을 해주셔도 마칠겁니다.^^;

아직은 무덥고, 다양한 날씨속에서 지내는 지금, 건강 꼭 챙기세요. 감사합니다^^

참고자료 : http://elijahmanor.com/webdevdotnet/post/jQuery-jqGrid-Plugin-Add-Edit-Delete-with-ASPNET-MVC.aspx
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 아름다운 기사

  2. 안녕하세요. 유용한 강의 감사합니다. ^^
    그런데 제가 똑같이 따라했는데,.
    삽입과 수정은 잘되는데
    자꾸 삭제할때마다 에러가 나네요. ㅠㅠ
    도무지 어떤게 문제인지 모르겠습니다.
    혹시 봐주실수 있나요?
    소스는 아래에 있습니다.
    http://himmel.ivyro.net/PRO1015JGRID.zip

    • 소스를 확인해보니 선택된 로우(row)의 아이디값을 불러오는 부분(rowData.dirId)과 colModel의 name값(DirId)이 다르네요. rowData.DirId로 수정을 하거나 name값을 dirId로 하시면 될듯합니다. 확인부탁드립니다^^

  3. 아름다운 기사

  4. didtjdgus 2010/11/01 11:49

    감사해요

  5. 이것은 훌륭한 기사입니다. 공유를 주셔서 감사합니다.

  6. 이 위대한 사이트 및 훌륭한 기사에 감사드립니다.

  7. 이건 아주 공유 해 주셔서 감사합니다 유익한했다.

  8. 공유를 주셔서 감사합니다.

  9. 나는 절대적으로 귀하의 사이트 디자인을 사랑 해요.

  10. 이건 아주 공유 해 주셔서 감사합니다 유익한했다

  11. 의견을 변경하고 당신은 세계를 변경합니다.

  12. # 2 연필과 꿈이 어디서든 걸릴 수 있습니다.

  13. 소스를 확인해보니 선택된 로우(row)의 아이디값을 불러오는 부분(rowData.dirId)과 colModel의 name값(DirId)이 다르네요. rowData.DirId로 수정을 하거나 name값을 dirId로 하시면 될듯합니다. 확인부탁드립니다^^

  14. 나는 매우 당신과 당신의 사이트가 효과적으로 메시지가 매우 유익한하는 방법 감동라고합니다. 이것을 공유 주셔서 감사합니다

  15. 바로이 정보를 공유 주셔서 감사합니다, 그는 말했다.

  16. 이 가장 좋은 기능은, 그 지역이 정말 수정이 어떤 면에선 좋은.그것의 되었습니다.

  17. 이 가장 좋은 기능은, 그 지역이 정말 수정이 어떤 면에선 좋은.그것의 되었습니다.

  18. 이 가장 좋은 기능은, 그 지역이 정말 수정이 어떤 면에선 좋은.그것의 되었습니다.

  19. 나는 매우 당신과 당신의 사이트가 효과적으로 메시지가 매우 유익한하는 방법 감동라고합니다.

  20. 이 가장 좋은 기능은, 그 지역이 정말 수정이 어떤 면에선 좋은.그것의 되었습니다.

  21. Thanks so much for the screenshots, they really help.

  22. I need to read more on this topic...I admiring time and effort you put in your blog, because it is obviously one great place where I can find lot of useful info.

  23. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.


  24. Hey man I've really loved reading up your blog I've found them awesome

  25. 비밀댓글입니다

  26. I really enjoy reading the articles on this blog. I'll bookmark this so I can read more later.

  27. 난 그냥 당신이 우리 독자들에게 공유되었다는 정보에 대해 감사하다는 말을하고 싶습니다. 테마 이런 종류의 게시 주셔서 감사합니다.

  28. So good to see out anyone with some original ideas on this subject. really thank you for beginning this up. this web site is something that’s needed on the web, someone with a little originality. useful job for bringing one thing new to the web.

  29. 난 진짜로 당신의 잘 쓰여진 기사를 읽고 즐기는입니다. 귀하의 블로그에 노력과 많은 시간을 보내는 것 같습니다. 내가 즐겨찾기가 있고 난 새로운 기사를 읽고 기대입니다.좋은 일을 계속!

  30. 我们住在充满美丽,魅力和冒险的一个精采的世界。没有终止到冒险那我们可能有但愿我们以我们的眼力寻求他们打开。

  31. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

  32. 많은 시간을 보내는 것 같습니다. 내가 즐겨찾기가 있고 난 새로운 기사를 읽고 기대입니다

  33. Everybody have its own perception but according to me, we should keep in mind that we should do this one according to our own approach.
    <a href="http://straightupfitness.com/whittier-fitness-trainer/">Whittier Fitness Trainer</a>

  34. Excellent site, keep up the good work Logoflag my colleagues would love this.I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks

  35. Good article, thanks for pointing out this topic.
    Fortunately it´s also presented in your blog, assuring a good coverage.Good article, thanks for pointing out this topic.
    Fortunately it´s also presented in your blog, assuring a good coverage.

  36. 내 아이폰에서이 정보를 보는 힘든 시간을 보내고 있습니다. 아마 당신은이 사이트를 업그레이 드하고 내 휴대 전화에서 더 액세스할 수 있도록 수 있습니다. Thatd 멋진 진짜!

  37. 내가? 그는 웹 사이트에 배포 꽤 제안을 발견으로 친구에게서 전화를 얻는 특권을 해요. 블로그 게시 주변 서핑하는 것은 일반적으로 정품 멋진 만남이다. 자신에 비해 어떤 측면에서 고객을 고려하고 많은 덕분에, 난 당신에게 전문 영역 것으로 승리와 관련된 최선을 열망.


  38. 다음으로 보이는게 $.jgrid.nav... 입니다. 이것은 지난 시간에도 말씀드렸던 grid.locale-en.js 을 수정하는 부분입니다. 이런 언어파일에는 디폴트값이 들어가 있다고 말씀드렸었죠? 기억하시죠? ;;


  39. 정말 jquery 관련 플러그인들은 참 편리하네요. 이렇게 손쉽게 처리가 가능하니 말이죠.
    암튼, 이번시간으로 jqGrid는 마치겠습니다. 뭐 한것도 없이 마친다고 하니 웃기네~ 라고 말씀을 해주셔도 마칠겁니다.^^;

  40. 깔끔한 박스가 뜨네요. 전 슈퍼맨을 등록해보도록 하겠습니다. 값을 입력하지 않고 그냥 Submit 버튼을 살짝 눌러보시면 이름 입력하라고, 전화번호 입력하라고 아우성일겁니다. editrules: { required: true } 이것때문이죠. 매치된 메시지는 언어 스크립트에 있는 required:"Field is required" 이고요. 값을 정상적으로 입력후에 Submit을 하면...

  41. 나머지 부분도 재미있게 수정해서 테스트해보세요^^ 버튼 이름 변경, 필수값 에러 메시지, 경고메시지 등이 수정가능하네요.

  42. 편집하는 부분을 테스트 하시려면 먼저 수정하려는 해당 로우(row)를 선택하신 후 편집 버튼을 클릭하시거나, 해당 로우를 더블클릭하시면 됩니다. 해보시죠?^^;

  43. 이 가장 좋은 기능은, 그 지역이 정말 수정이 어떤 면에선 좋은.그것의 되었습니다.

  44. 고객이 지금 당신의 제품이나 서비스에 관심을 가질만한 친구나 동료의 이름을 줄 수 있도록 시스템을 만듭니다. 이것은 귀하의 비즈니스를 향상하는 데 도움이됩니다.

  45. 이제 경쟁은 도로를 따라 상점 사이지만, 전세계뿐만 아니라 열립니다. ajuga 귀하의 사이트를 홍보하기 위해 미디어를 많이 사용할 수로와 인터넷 경쟁을 두려워하지 마십시오.

  46. 이 사업은 아주 잘 사전에 준비되고 당신은 집을 지을 때처럼, 전에 실제 건설 프로젝트 컨셉 종이와 계산으로 입고되었습니다 시작할 것이 여야합니다.

  47. 잊고 계셨을지도 모를 jqGrid 마지막편입니다.이번 시간은 jqGrid를 이용하여 데이터를 추가, 편집, 삭제해보는 시간을 가져보도록 하겠습니다.

Posted by 박세식(쎄스)
안녕하세요. 지난 시간에는 jqGrid를 이용해서 리스트를 구현해봤습니다. 정말 맛보기였죠? :)
이번 시간은 실제 데이터베이스에서 데이터 조회, 페이징과 정렬부분을 다루도록 하겠습니다.

먼저 데이터베이스 생성

테이블 구조는 다음과 같습니다.

 컬럼명  데이터 타입
 dirId  int
 name  nvarchar(50)
 phone  nvarchar(50)
 email  nvarchar(50)
 speedDial  decimal(2,0)

그냥 기본세팅이죠^^;

엔터티 모델 클래스를 생성할 건데요, 자세히(?)를 원하신다면 이전 포스팅을 참고해주세요^^;
완료가 되면,


여기까지 잘 오셨죠? 저는 Entity Set Name을 TelDir에서 TelDirSet으로 변경하였습니다. 헷갈려서요^^;;

자. 이제는 본격적(?)으로 살펴볼까요? (어째.. 오늘도 맛보기일것 같은 분위기가 물~씬 풍기시죠? ㅡ,.ㅡ;)

페이징 기능을 달자

지난 뷰페이지에 pager란 id로 div 태그를 추가하겠습니다.

<div id="pager" class="scroll" style="text-align:center;"></div>

테이블 뒤에 추가하시면 됩니다.
그리고, 스크립트 부분도 수정해야겠죠?

    <script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("EntityGridData", "Home") %>',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'dirId', index: 'dirId', width: 40, align: 'center' },
                  { name: 'name', index: 'name', width: 100, align: 'left' },
                  { name: 'phone', index: 'phone', width: 150, align: 'left' },
                  { name: 'email', index: 'email', width: 250, align: 'left' },
                  { name: 'speedDial', index: 'speedDial', width: 100, align: 'center'}],
                    pager: $('#pager'),
                emptyrecords: "Nothing to display",            
                rowNum: 3,
                rowList: [3, 10, 20, 50],
                sortname: 'dirId',
                sortorder: "desc",
                viewrecords: true,

                caption: '전화번호부'
            });
        });
    </script>

추가된 부분은 굵은글씨로 표시하였습니다. 일단, grid.locale-en.js를 추가해야되더라고요^^; 디폴트로 그냥 jqGrid 스크립트를 넣을때 추가하라고 하였는데, 제가 지난 포스팅때는 빠뜨렸죠.
이런 언어 스크립트 파일에는 페이징 관련한 디폴트 값들이 들어가 있습니다.

defaults:{
   recordtext:"View {0} - {1} of {2}",
   emptyrecords:"No records to view",
   loadtext:"Loading...",
   pgtext:"Page {0} of {1}"
  }


나머지 프로퍼티에 대한 설명을 드리자면,
pager는 위 이미지 보이시죠? ^^; 저렇게 레코드들을 이동할수 있게 해주는 페이징 바를 정의합니다.
저같은 경우는 $('#pager')로 jQuery 표현을 썼는데요, jqGrid의 wiki를 보니 '#pager', 'pager', jQuery('#pager') 세가지 경우가 모두 가능한데요. 앞에 두가지 방법을 추천한다네요. 흠. jQuery 변수가 내보내기, 가져오기 모듈을 이용할때 문제를 발생시킬수 있다고 합니다. 이 부분은 차츰(?) 찾아보도록 하죠;;

The definition of the pager in the grid can be done this way:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules.

emptyrecords는 말 그대로 데이터가 없을 때 표현할 문구를 나타내고요,
rowNum은 페이지에서 보여줄 레코드 갯수,
rowList는 페이지 갯수를 선택할 수 있도록 하는 셀렉트박스의 옵션들,
sortname, sortorder는 각각 정렬할 컬럼과 정렬방식(오름차순, 내림차순),
viewrecords는 토탈 레코드의 수(위 이미지에서 View 1 -3 of 5)를 표현하는 것을 허용할 것인지 여부를 나타냅니다.

이제 뷰페이지는 완성이 되었고요, 컨트롤러 손봐야겠죠?
EntityGridData() 라는 이름의 액션메쏘드를 추가하겠습니다.

[HttpPost]
        public ActionResult EntityGridData(string sidx, string sord, int page, int rows)
        {
            // 데이터베이스 연결
            MvcDbEntities _db = new MvcDbEntities();

            // 페이징 변수 세팅
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;    // 3
            int totalRecords = _db.TelDirSet.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

            // 데이터 조회(페이징&정렬)
            // sidx : dirId
            // sord : desc
            var dirs = _db.TelDirSet
                .OrderBy("it." + sidx + " " + sord)
                .Skip(pageIndex * pageSize)
                .Take(pageSize)
                .ToList();

            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = (
                  from dir in dirs
                  select new
                  {
                      i = dir.dirId,
                      cell = new string[] {
                          dir.dirId.ToString(), dir.name.ToString(), dir.phone.ToString(), dir.email.ToString(), dir.speedDial.ToString()                         
                      }
                  }).ToArray()
            };
            return Json(jsonData);
        }

궁금해 보이는 것이 없죠? ㅎㅎ
jqGrid가 EntityGridData를 호출할때 파라미터(sidx : dirId, sord : desc, page : 1, rows : 3)를 날립니다~~~
실행을 해보면,


너무 간단하게 페이징 기능이 완성되었습니다^^
네이게이션 기능 되고요~ 셀렉트박스로 로우 갯수 선택 기능 되고요~ No탭 클릭하시면 정렬 기능 됩니다요~

마무리요

실행화면 출력하고 보니 아직도 맛!보!기! 인것을 보면 아직 한참 멀은 듯 합니다.
더 알찬 정보로 준비하도록 하겠습니다^^
감사합니다. 


참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager&s[]=paging&s[]=properties
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 강보람(워너비) 2010/07/15 11:36

    이걸 보니, 갑자기 날 미치게 만들었던 ExtJS가 생각나네-_-;;;

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
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

Posted by 박세식(쎄스)
안녕하세요. 늦바람이 무섭다고 하는데요. jQuery를 향한 늦바람이 불어주길 바라는 1인입니다. ㅎㅎ

이렇게 간단해도 되는겨?

이번 포스팅을 준비하면서 정말 jQuery의 놀라운 힘에 다시 한번 놀랐습니다. 이렇게 간단히 탭메뉴를 넣는게 가능했던건가요?

준비물 준비

먼저, jQueryUI 사이트에서  jquery-ui-1.8.2.custom.zip 파일을 다운받습니다. 압축을 푸시면 jquery-ui-1.8.2.custom.min.js 와 jquery-ui-1.8.2.custom.css 파일이 있습니다.(각각 js폴더와 css폴더에 있습니다.) 이 두 파일을 프로젝트의 Content와 Scripts 폴더에 추가시킵니다. 이제 준비는 됐고요.

준비끝! 예제로!

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">
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
    <div>
        <div id="tabs">
        <ul>
            <li><%: Html.ActionLink("홈", "Index", "Product")%></li>
            <li><%: Html.ActionLink("제품", "List", "Product")%></li>
            <li><%: Html.ActionLink("연락", "Contact", "Product")%></li>
        </ul>
        </div>
    </div>
</asp:Content>

$("#tabs").tabs() 이게 바로 그 놀라운 능력을 가진 탭메뉴를 가능케하는 힘입니다. (자세한 것은 다음으로 미루고~ 언제가 될지는 몰라요. 그냥 잘 쓰면 되는거죠^^;;)
아. 추가시켰던 두 파일은 마스터페이지에 끌어다놨습니다.


이제 Html.ActionLink() 에 걸린 액션들만 만들어 주면 됩니다.


요청 컨트롤러입니다. 첫 Index() 액션 메쏘드를 보시면 dynamic 이라는 타입이 보이는데요. 처음에는 Contact()와 마찬가지로 PartialView()만 리턴을 하였는데, 파샬뷰를 생성해 놓고 보니.


저렇게 dynamic 이 눈에 딱 띄는바람에 어쩔수(?) 없이 dynamic데이터를 전달하게 되었습니다. 간단히 설명드리면 dynamic은 대인배의 마음 씀씀이를 갖고 있어서 어떤 타입이던지 모두 수용합니다.(컴파일타임에는 터치를 안합니다. 귀찮아서 런타임한테 넘기는거죠;;) dynamic으로 선언된 변수에 멤버, 메쏘드, string, int 가리지 말고 막 넣어주세요. 다 받아줍니다. 하.. 저도 대인배로 살아가야 할텐데 참.. 아쉽습니다 :)
다음 기회에 dynamic에 대해 좀더 자세히 알아보면 좋겠네요.

다시 본론으로 넘어와서, /Product/Index.ascx 를 보시면

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<h3><%: Model.Message %></h3>
<p>
    ASP.NET MVC에 대한 자세한 내용을 보려면 <a href="http://asp.net/mvc" title="ASP.NET MVC 웹 사이트">http://asp.net/mvc</a>를 방문하십시오.
</p>

Model객체의 Message의 접근하면(Model.Message) Index 메쏘드에서 넘겨준 다이나믹한 메시지를 받을 수 있습니다.

두번째, /Product/List.ascx는

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcWithjQuery.Models.Product>>" %>
<table width="400px">
<tr>
    <th>제품명</th>
    <th>가격</th>
</tr>
<% foreach (var product in Model) { %>
<tr>
    <td><%: product.Name %></td>
    <td><%: product.Price %></td>         
</tr>
<% } %>
</table>

너무 간단해서 할말을 잃게 만들죠. foreach문을 통해 루프를 돌면서 데이터를 출력합니다.
나머지 Contact.ascx는 안보셔도 됩니다.^^;

자, 완료가 되었으니 확인을 해보죠.


페이지 로드 없이 깔끔하게 탭기능이 완성되었습니다.

마무리요

일반적인 페이지(aspx)도 탭메뉴로 가능합니다. 파샬뷰를 사용한 것은 한 페이지 전체보다 불필요한 부분을 제거한(head, html, body가 보시다시피 파샬뷰에는 존재하지 않습니다.) 간결함때문이랄까요? ㅎㅎ
다음은 더 재미있는 것으로 찾아뵙겠습니다. (지금은 재밌다는겨? 뭐여? ㅡ.ㅡ 이렇게 생각하시는 분은 제발 없으시길 바래요^^)

참고자료 :  http://www.kevgriffin.com/blog/index.php/2010/02/23/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 아주 좋은 기사. 그냥 구글 번역기를 통해 읽어보세요.

  2. # 2 연필과 꿈이 어디서든 걸릴 수 있습니다.

  3. 당신은 수 있다고 생각하고 거의 다 있어요

  4. 너무 멋져요을 개봉된! 나는 필자 전에 이런 걸 배우는 가정 없다. 그래서이 주제에 대한 몇 가지 참신한 아이디어가있는 모든 사람을 찾을 수 좋네요. 정말이 일을 시작 주셔서 감사합니다. 이 웹 사이트는 약간 독창성과 웹, 누군가에 원한의 한 가지입니다. 웹에 새로운 것을 가져다 유용 직업!

Posted by 박세식(쎄스)
지금 잠을 자면 꿈을 꿀 수 있지만, 잠을 자지 않으면 꿈을 이룰 수 있다고 하죠. 그래서 이렇게 눈꺼풀이 내려오는데도 버티고 있는가 봅니다^^; 이 글을 읽고 있는 분들도 꿈을 위해 노력하고 계신거겠죠?

귀 따갑다 jQuery

고마해라~ 마이 들었다 아이가~. 너무 들어서 지겨울 만큼의 jQuery. 이제 시작합니다. 이렇게 늦게 jQuery를 들쳐보는 저를 용서하시고, 격려의 한말씀 해주시면 정말 감사하겠습니다. :)
그런데, jQuery 정말 다들 아시는거죠?

jQuery가 뭔데?

아직도 jQuery를 모른단 말인가?! 자네 정말 웹 관련 일하는 사람이 맞긴 맞는건가? 어헣. 이런 말이 오고가진 않아야 겠죠?

jQuery 공식 홈페이지에는 다음과 같은 말이 떡~하니 있습니다.

jQuery is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

쭉 보면,
jQuery는 자바스크립트 라이브러리의 한 종류입니다. jQuery는 신속한 웹 개발을 위한 HTML 문서 탐색, 이벤트 처리, 애니메이션, Ajax와의 상호작용을 간단하게하는 빠르고 간결한 자바스크립트 라이브러리입니다. jQuery는 자바스크립트 작성 방식의 전환을 위해 설계되었습니다.

다른건 몰라도, 암튼 웹 개발을 빠르게 해준다니까 오케이입니다. 귀찮은 작업도 간결하게 해주는 것 같고요.
Visual Studio 에 jQuery가 탑재되어있는 것도 마이크로소프트가 이를 지원한다는 얘기? 그래서 오케이. 스캇 구쓰리의 블로그를 보시면 계속 jQuery 플러그인 얘기가 올라오고 있는 것으로 봐서 활발하게 개발중인 것 같습니다.

간단 예제

정말 간단한 예제를 한번 살펴보도록 하겠습니다. 실망하시면 안~되요.
지금 하려는 것은 'ASP.NET MVC에 대한 자세한 내용을 보려면...' 이 있는 p 태그의 스타일을 변경해 볼겁니다. 먼저 MVC 프로젝트를 새로 생성하겠습니다. 그 다음, Index.aspx 페이지에 Contents 폴더에 있는 jquery-1.4.1.js 파일을 끌어다 놓습니다. '$(' 입력해보시면 놀랍게도 정말 놀~랍게도 인텔리센스를 지원해주는 것을 확인하실 수 있습니다. 멋지죠? :-)


아. 이거할때가 아닌데 좋아하고 있었네요. 먼저 필요한 스타일을 추가하겠습니다. 간단합니다.


색과 크기변경만 할겁니다.^^;
그 다음 스타일을 변경해줄 소스를 추가하겠습니다.

    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {           
            $('#btnStyle1').click(function () {
                $('p').removeClass();
                $('p').addClass('color-yellow').addClass('size-large');
            });
            $('#btnStyle2').click(function () {
                $('p').removeClass();
                $('p').addClass('color-red').addClass('size-small');
            });
        });
    </script>
    <div id="styleChange" style="background-color:Gray; width:300px">
        <h3 style="color: Yellow">스타일을 바꿔요</h3>
        <button id="btnStyle1">스타일_1</button>
        <button id="btnStyle2">스타일_2</button>
    </div>

jQuery 의 경우, 메쏘드 체인이 가능합니다. $().addClass().addClass().removeClass()...
암튼, 너무 간단해서 할 말을 잃으셨다면, 다음을 기대(?)해주세요^^;
실행 결과를 보면 스타일_1 버튼을 클릭했을시,


스타일_2 버튼을 클릭했을시,


참~ 이쁘게(?) 되네요.

마무리요

간단해서 따로 드릴 말씀은 없고요. 바로 다음 글 준비하겠습니다!!!


참고자료 : jQuery 1.3, 조나단 채퍼, 칼 스웨드버그
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. jquery 써보면 정말 편하긴 정말 편함

  2. 비주얼 스튜디오가 제가 생각하는 그 스튜디오가 맞군요.
    학교 다닐 때 종종 쓰던 프로그램이라 반갑네요 ㅎㅎ
    멋진 일을 하고 계셔서 부럽습니다. 앞으로도 수고 많이 해주세요 ^^

Posted by 박세식(쎄스)
유효성 검사 안끝난겨?

네. 아직입니다. ^^; 원래는 마무리를 지으려고 했었는데요. 갑자기 jQuery 가 급땡기는 바람에 슬슬 관련글을 적어보렵니다.

클라이언트단에서 유효성검사하기

지난번 포스팅을 보시면, 서버단의 모델 클래스에 DataAnnotaion을 사용하여 유효성검사를 했습니다. 물론, 클라이언트단에서도 자바스크립트를 사용하여 유효성검사를 할 수 있지만, 이는 동일한 유효성 검사를 두번(서버와 클라이언트) 하게됩니다. DRY(Don't Repeat Yourself) 규칙에 위반되는 작업인 거죠.

근데 왜?

저 아시는 분 없죠? 듣보잡인거죠. 그래서 이렇게 앞뒤가 없습니다. 이번 포스팅을 먼저 했으면 하는 마음도 있지만, 뭐 이렇게 된 것 그냥 적어내려갑니다.^^
DRY에 반하는 작업을 한다고 너무 차가운 피드백은 달지 말아주세요; '이런 방법도 있는 거였군'이라는 생각만 가져주셨으면 좋겠습니다.

먼저, 지난번 유효성 검사를 했던 소스에 jQuery를 이용한 유효성 검사 스크립트를 추가하겠습니다.


프로젝트내의 Scripts폴더에 있는 jquery-1.4.1.js와 jquery.validate.js파일을 추가합니다.(프로젝트에 이런 스크립트 파일들이 자동으로 적용되어있는 것으로 봐서는 맘껏 사용하라는 거겠죠?^^; 아. 그리고 미니버전을 사용해도 되는 것은  다들 아시죠? *min.js)

추가된 소스도 함께 보시죠.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>   
    <script type="text/javascript">
        $(function () {
            $("form").validate({               
                rules: {
                    "Name": { required: true, maxlength: 5 },
                    "Phone": { required: true },
                    "SpeedDial": { required: true, range: [1, 99] },
                    "Email": { email: true }
                },
                messages: {
                    "Name": "5자 이내로 이름을 입력하시오.",
                    "Phone": " 전화번호를 입력하시오.",
                    "SpeedDial": "1~99까지의 수만 입력하시오.",
                    "Email": "이메일이 형식에 맞지 않습니다."
                }
            });
        });   
    </script>
    <h2>Create</h2>
    <% using (Html.BeginForm()) { %>
    <div>
        이름 : <%= Html.TextBox("Name") %>
    </div>
    <div>
        전화번호 : <%= Html.TextBox("Phone")%>
    </div>
    <div>
        단축다이얼 : <%= Html.TextBox("SpeedDial")%>
    </div>
    <div>
        이메일 : <%= Html.TextBox("Email")%>
    </div>
    <input type="submit" value="Create" />
    <% } %>
</asp:Content>

소스를 보시면(빨간색) jQuery 스크립트와 유효성 검사를 위한 스크립트를 추가하였습니다. 또한 유효성 검사를 담당하는 jQuery 스크립트 구문도 추가하였습니다.

자, $("form").validate() 를 통해 유효성 검사를 합니다. 보시는대로, rulesmessages를 통해 에러를 표시하게되죠. Email을 제외한 각 필드를 필수값으로 세팅을 했고( required: true), 이름은 5자 이내(maxlength :5), 단축다이얼은 1~99까지의 숫자를 받도록(range[1,99]), 이메일은 이메일 형식을 체크(email: true)하도록 하였습니다. 이밖의 옵션들은 여기서 확인하실 수 있습니다.
빈값으로 폼을 전송하려고하면 클라이언트단에서 이에 제재를 가하게 됩니다.


이메일(필수값 아님)을 제외한 나머지는 에러가 났습니다. 올바른 값을 하나하나 입력하면 바로바로 에러메시지가 사라지는 것을 확인할 수 있습니다.


이메일을 잘못입력하면 에러메시지가 뜨는 것도 확인할 수 있습니다.

여기까지 잘 따라오셨으면 보다 싶게 클라이언트단에서의 유효성 검사를 진행해보죠. (윗부분은 이제 잊어도 좋습니다. 딱히 잊으라는게 아닌 아래 소스에서는 필요가 없어서.. 이렇게 말씀드리는건데...음.. '아 이런방법도 있구나'만 기억하시면 됩니다.^^;;)

DRY 잊지말자

지난번 포스팅에서는 서버단에서 유효성 검사를 하였기때문에 유효성 에러 메시지를 보려면 서버단까지 다녀와야할 필요가 있었습니다. 이를 가만히둘 마이크로소프트가 아닙니다. 정말 심플한 방법으로 손쉽게 클라이언트단과 서버단 두군데 모두 유효성검사를 할 수 있도록 하는 단 세줄의 코드가 있습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcTest.Models.TelDir>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <% Html.EnableClientValidation(); %>
    <h2>Create</h2>
    <% using (Html.BeginForm()) {%>       
        <fieldset>
            <legend>Fields</legend>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Name) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name) %>
                <%: Html.ValidationMessageFor(model => model.Name) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Phone) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Phone) %>
                <%: Html.ValidationMessageFor(model => model.Phone) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.SpeedDial) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.SpeedDial) %>
                <%: Html.ValidationMessageFor(model => model.SpeedDial) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Email) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Email) %>
                <%: Html.ValidationMessageFor(model => model.Email) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    <% } %>
</asp:Content>

위 세줄을 추가함으로 지난번 포스팅에서 DataAnnotation을 이용한 유효성 검사 로직을 클라이언트단에서도 사용할수 있게 되었습니다. 실행을 시킨 후, Create 버튼을 클릭하면 리로드없이 즉각적으로 에러메시지를 확인할 수 있습니다.


또한, 유효한 값을 입력하면 즉시 에러메시지가 사라집니다.
저희는 지금 클라이언트단에 유효성 검사 로직을 추가하지 않았습니다. 유효성 검사로직은 모델클래스에만 존재하고 있습니다. 하하하.(승리자의 웃음인거죠^^) 룰은 한 곳에다가 두고, 두군데(클라이언트와 서버)에서 모두 검사를 하도록 하였습니다. 이로써 DRY를 잊지 않은체 작업이 완료되었습니다.

마무리요

이렇게 손쉽게 클라이언트단에서도 검사가 가능한 방법이 있었습니다. ㅎㅎ 기분좋네요.
마이크로소프트는 현재 jQuery 프로젝트에 참여하여 계속 플러그인을 개발중에 있습니다. (이 얘기는 왜하는 걸까요? 음..) 이 부분에 대해서도 포스팅을 하도록 노력해보겠습니다.


참고자료 :
http://docs.jquery.com/Plugins/Validation
http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 안녕하세요?
    <% Html.EnableClientValidation(); %>
    입력하고 난 다음에
    <%: Html.ValidationMessageFor(model => model.SpeedDial) %>
    지정한 키를 찾을 수 없다고 그래요?
    혹시 이 문제 해결하신 분들 있나요? 저만 그런가요ㅠ

    • 안녕하세요. 먼저 읽어주셔서 감사합니다.
      EnableClientValidation 입력전에는 잘 됐다가 이 문장을 입력한 후부터 안되는건가요?
      그리고 SpeedDial 만 찾을 수 없는건가요?
      제가 오히려 질문만 드리네요;; 저도 한번 찾아보도록 하겠습니다.
      감사합니다.

  2. 한동안 안들어왔더니 답변이 달아져 있네요^^
    mvc에 관해 잘 정리된 블로그라서 자주 들어오는 데..
    문제는 model 폴더에 model class가 없어서 그런 거 같습니다.
    사정상 지금 model폴더에 model class를 놔두고 있지 않거든요. 다른 곳에서 가져오거든요
    아무래도 이 것때문에 문제가 발생한 거 같습니다.
    웹서비스나 wcf로 model 클래스를 가져올 때는 안되는 것 같습니다.

    • ing 2011/11/26 16:00

      WCF를 통해 가져올때 DataAnnotation에 대한 정보까지 같이 안 넘어와서 그럴거 같습니다.

      MetaData 클래스를 이용하던지
      아니면 partial class에서 작업을 해야 할듯 하네요.

  3. 이슬공주 2011/12/29 14:23

    스크립트라 그런지.. 대소문자 구분하는군요.. 왜 안돼나 했네요 ^^;;

Posted by 박세식(쎄스)
모기와의 사투를 버린 끝에 이제야 컴퓨터 앞에 앉아 글을 쓸 수 있게 되네요(새벽 1시네요ㅡ.ㅡ) 아흑.
비록 눈이 따갑고 눕고 싶지만, 이제는 정말 제 자신과의 약속을 지키기 위해 한자 한자 적어나가렵니다.^^

지난 시간에 유효성 검사에 대해 살펴봤는데요. 이제 본론으로 넘어와서 적용해봐야겠죠?

유효성 검사 적용하기

저희가 USER 모델을 생성할때 엔터티 프레임워크(엔티티가 입에 붙었는데 한글판에 엔터티라고 명시되어있네요;;)를 통해 생성한 것 다들 기억하시죠? 엔터티 프레임워크의 경우 자동으로 모델 클래스를 생성해 주는 것도 다들 아실겁니다. 또한, 엔터티 프레임워크로 생성된 모델클래스를 직접적으로 컨트롤 할수 없다는 것도..
그렇다면 유효성 검사 부분은 도대체 어디다 둬야 한단 말이냐?

파샬 & 메타데이타 클래스 생성하기

메타 데이타 클래스를 만들어야 합니다. 또한 USER 모델에 해당하는 파샬 클래스도 생성해야합니다.
파샬 클래스의 경우 여러 파일, 여러 부분에 멤버나 메쏘드 등의 정의를 각각 두면 컴파일시에 이들 모두를 결합하게 되죠. 다들 아시는 내용!
여기서 잠깐, 엔터티 프레임워크로 생성된 모델 클래스의 소스를 잠깐 살펴보면,


모델 클래스가 파샬 클래스로 정의 되어 있는 것을 확인할 수 있습니다. 아~ 이러면 자동 생성된 이 모델 클래스는 건들 필요 없이 파샬 클래스를 하나 더 추가해서 그곳에다가 우리가 필요한 정의를 내려주면 되겠구나~ 라는 생각이 팍팍 드시죠?

그래서 추가해봤습니다. 동일한 이름의 모델 클래스를 하나 만들어 보죠. 그리고, 메타 데이타 클래스도 같이 만들겠습니다.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace MvcSite.Models

    [MetadataType(typeof(USERMetaData))]
    public partial class USER
    {      
    }

    public class USERMetaData
    {
        [Required(ErrorMessage="아이디 입력하셔야죠!")]
        [StringLength(10)]
        public object ID { get; set; }

        [Required(ErrorMessage="이름 입력하셔야죠!")]
        public object NAME { get; set; }
               
        [Required(ErrorMessage="패스워드 입력하셔야죠!")]       
        public object PWD { get; set; }
              
        [Required(ErrorMessage="이메일 입력하셔야죠!")]
        [RegularExpression(@"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$",
                                                             ErrorMessage = "올바른 이메일 형식이 아닙니다.")]
        public object EMAIL { get; set; }
    }
}

메타 데이터의 경우 테이블의 필드값을 대신합니다. 즉 모델과 같아야 합니다.
메타 데이터를 만든 후 파샬로 된 모델(USER) 클래스에 MetadataTypeAttribute를 통해 USERMetaData을 정의합니다. 이렇게하면 1차작업이 완료됩니다. 실행해 보시면 잘 돌아갑니다. 확인페이지는 따로 보여드리지 않겠습니다^^ 글이 너무 길어지면 지루해지겠죠?

모델에 없는 필드 확인하기

우리는 패스워드 확인 필드를 갖고 있습니다. 필수값이고 비교도 해야하지만 테이블에는 없는 필드죠. DataAnnotation을 통해 나머지 필드들은 각각 비교는 했는데, 패스워드 확인 필드는 어떻게~ 어떻게~ 어떡하면 되냐고~ 띠리링~ 그냥 만들어!

헉. 뭐 만들면 되죠;;;
일단, ValidationAttribute를 상속 받는 PropertiesMatchAttribute라는 이름의 두 값을 비교할 커스텀한 DataAnnotation 클래스를 만듭니다. 중요한건 검사를 담당하게될 IsValid 메쏘드를 오버라이드해야합니다.


이렇게 만든 후에, 생성한 USER 클래스를 수정하도록 하겠습니다.

    [PropertiesMatchAttribute("PWD", "CPWD",
                                         ErrorMessage = "패스워드 확인 안하실거에요?!")]

    [MetadataType(typeof(USERMetaData))]
    public partial class USER
    {
        [Required(ErrorMessage = "패스워드 확인 입력하셔야죠!")] 
       public string CPWD { get; set; }
    }

    public class USERMetaData
    {
        [Required(ErrorMessage="아이디 입력하셔야죠!")]
        [StringLength(10)]
        public object ID { get; set; }

        [Required(ErrorMessage="이름 입력하셔야죠!")]
        public object NAME { get; set; }
               
        [Required(ErrorMessage="패스워드 입력하셔야죠!")]       
        public object PWD { get; set; }
              
        [Required(ErrorMessage="이메일 입력하셔야죠!")]
        [RegularExpression(@"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$",
                                                            ErrorMessage = "올바른 이메일 형식이 아닙니다.")]
        public object EMAIL { get; set; }
    }

USER 클래스에 커스텀한 DataAnnotation 정의를 추가했고요, 패스워드 확인 필드를 필수값으로 정의하였습니다.
여기까지 잘 오셨죠? 실행해 보도록 하겠습니다.


위 결과물은 모든 필드에 입력을 안하고 submit을 했을 경우고, 아래 결과물은 패스워드를 다르게 입력 했을 경우입니다.


일단 원하는대로 출력되는 것을 확인했습니다.

역시 급정리요

이번시간 역시 유효성 검사 부분을 다뤘고요, 메타 데이터와 파샬 클래스를 이용한 유효성 검사를 살펴봤습니다.
정말 간단한 내용인데 쓰다보면 길어지네요;; 더 간단하게 필요한 메시지만 전달하도록 노력하겠습니다.

참조 : http://byatool.com/mvc/custom-data-annotations-with-mvc-how-to-check-multiple-properties-at-one-time
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 유효성체크를 이렇게도 하는군요. 잘보고 갑니당...

  2. 멍돌이 2010/06/25 12:05

    요번글도 잘보고 갑니다 ㅎㅎㅎㅎㅎ이글을 참고해서 제 프로젝트의 유효성 검사쪽을 좀 수정해야겠네여 ㅎㅎㅎ

  3. 1번 강좌글부터 따라해보고 있습니다.
    지난 강좌까지 어렵게 따라해왔는데, 여기서 막히네요.
    위에서 처럼 Models에 USER에 대한 Metadata를 정의하여 추가하였는데,
    모두 빈칸으로 두고 가입 버튼을 누르게 되면, 첫번째 빈칸이 되는 필드에서 "This property can not be set to a null value" exception이 발생하네요. Metadata에 지정한 에러메세지가 안나오네요. 뭐가 잘못 되었을까요? 혹시 샘플 프로젝트를 올려주실 수 는 없는지...

    • 안녕하세요. 너무 늦은 답변이라 뭐라 드릴말씀이 없네요;; 이 문제는 일단 디버그 모드일때 발생하고요 릴리즈 모드에서는 발생하지 않습니다. 만약 디버깅 모드에서도 처리를 하시려면 파샬클래스의 각 필드에 [DisplayFormat(ConvertEmptyStringToNull = false)] 이것을 추가하시면 됩니다. 이 annotation의 경우는 바인더가 빈값을 널로 변환시키지 않도록 하는 것입니다.

  4. 안녕하세요. 저도 블로그 내용 잘 보고 있습니다. 그런데 partial class 추가하고 유효성 검사를 하려고 텍스트박스 내용을 빈칸으로 해서 클릭을 하면 사용자코드에서 ConstraintException이 처리되지 않았습니다 라는 에외가 발생하는데요. 아무리 찾아봐도 이유를 잘 모르겠어요...알려주시면 고맙겠습니다..ㅠㅠ

    • 안녕하세요. 위에도 댓글을 달았지만(너무 늦었죠;;) 릴리즈모드에서는 정상 작동합니다. 이 exception 의 경우에는 엔터티 프레임워크가 ASP.NET MVC 프레임워크에게 해당 필드가 제약조건(null 허용 안함) 을 만족시키지 못했다고 통보하는 예외입니다. 유효성 검사에는 바인딩 이전(PreBinding), 이후(PostBinding)가 있는데요. submit(PostBinding)시에 유효성 검사를 하려했지만, 이전에 빈값으로 넘어온 값이 널(null) 값으로 변환되면서 바인더가 널값을 허용하지 않는 필드에 널값을 세팅하려는데서 발생한 것입니다. 필드에 [DisplayFormat(ConvertEmptyStringToNull = false)] 을 추가하시거나 릴리즈 모드에서 진행해보세요^^ 읽어주셔서 감사합니다.

  5. 안녕하세요 블로그 잘 보고 mvc 공부하고 있습니다. 예제를 보고 진행하는데
    위에 말씀하신대로 release 모드에 USERMetaData class에 [DisplayFormat(ConvertEmptyStringToNull = false)] 이 부분을 추가하고 실행을 하게 되면 빈값으로 해도 JoinSuccess로 페이지 이동은 일어나기는 하나 유효성 검사는 일어나지 않게됩니다.
    혹시 join.aspx 파일도 create.aspx 처럼 마크업을 바꿔주어야 하나요 또한 MemberController에 ModelState로 조건문을 추가해 줘야하는지요

    공부 열심히하고 있습니다 (__)

Posted by 박세식(쎄스)
안녕하세요. 지난 포스팅에 이어서(넘흐 오랜만이죠^^;) 시작하겠습니다. 아마 다들 잊으셨을 겁니다. 여기까지 했었죠?


_db.SaveChanges() 를 하려 했더니, 에러가 발생했습니다. 자세히 들여다 보니


ID 에 NULL 값을 넣을 수가 없다네요. 이래서 에러가 발생했죠.
아~ 이래서 사용자가 빈 값을 넣으려 하면 막아야하겠구나~ 라는 생각이 번뜩 드셨을겁니다.

유효성 검사!

유효성검사라 하면 필수입력값에는 꼭 데이터를 입력해야하고, 데이터의 타입이나 길이에 맞게 들어오게 체크하는 것을 말하겠죠?

ASP.NET MVC 프레임워크에서는 모델 스테이트(Model State)를 제공합니다. 정확히 말하면 model state dictionary 라고 해서 유효성 에러들을 표시하기 위해 사용됩니다. 유효성 검사중에 해당 프로퍼티에서 fail 이 발생하면 모델 스테이트에 이를 추가합니다. 모델 스테이트에 에러가 있으면 ModelState.IsVaild 는 false를 반환합니다.
여기까지 설명을 드리고, 예제와 함께 보시겠습니다.

예제 만들기

아주 간단한 전화번호를 담는 TelDir 클래스를 만들겠습니다.


DirectoryController 도 추가하겠습니다. 이 컨트롤러에 두개의 Create 액션메쏘드를 만들겠습니다. 하나는 /Directory/Create url 요청시(GET) 호출되는 메쏘드이고, 다른 하나는 POST로 호출되는 메쏘드 입니다. 아시죠?^^
ASP.NET MVC 프레임워크에서는 자동적으로 폼 필드에 값을 해당 모델 속성들과 매핑을 시킵니다. 모델 바인더가 이런 일을 하게되죠. 예제에서 처럼 HTML 폼 필드의 값을 TelDir 객체에 매핑을 시키는데, 에러가 없이 바인딩이 되면 즉, ModelState.IsValid가 true 이면 데이터베이스에 저장을 하는 것이고, 그렇지 않다면, 다시 폼을 그리며 에러를 표시하게됩니다.


뷰도 같이 만들겠습니다. 액션메쏘드에서 오른쪽버튼을 클릭하여 Add View 를 선택하고, 강하게 생성하겠습니다.


추가하기 전에 빌드하는 것 잊지 않으셨죠? 모델 생성 후 빌드를 하지 않으면 View data class 항목에 표시가 되지 않습니다. Add 해서 완료를 하시면 /Views/Directory/Create.aspx 가 생성되었습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcTest.Models.TelDir>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 Create
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Create</h2>
    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>
        <fieldset>
            <legend>Fields</legend>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Name) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name) %>
                <%: Html.ValidationMessageFor(model => model.Name) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Phone) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Phone) %>
                <%: Html.ValidationMessageFor(model => model.Phone) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.SpeedDial) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.SpeedDial) %>
                <%: Html.ValidationMessageFor(model => model.SpeedDial) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Email) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Email) %>
                <%: Html.ValidationMessageFor(model => model.Email) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    <% } %>
</asp:Content>

휴. 여기까지 했으니 이제 유효성검사를 해보실까요?
다음과 같이 컨트롤러에서 유효성 검사를 할수 있습니다.


물론, 클라이언트단인 aspx 에서도 할 수 있겠죠. 제가 프로젝트에서 경험해본 유효성검사는 클라이언트단에서 먼저 검사를 하고 혹시나 몰라서, 클라이언트에서의 유효성검사를 신뢰할수 없어서 서버단에서도 한번 더 유효성검사를 했었습니다. 코드가 중복되고 또한 비슷한 UI 에서도 같은 검사를 해야했었죠.
ASP.NET MVC 에서는 이러한 부분을 모두 없애고 모델클래스에서 이를 담당하게 합니다. 심플해지고 개발속도도 향상되죠.

DataAnnotation을 이용한 유효성 검사


위와같이 컨트롤러와 뷰가아닌 모델에 유효성 검사로직을 두게되면, 다른 UI(Edit와 같은) 에서도 따로 유효성 검사를 하지 않고도 동일한 유효성 검사를 할 수 있습니다. 이렇게 함으로써 중복되는 코드를 피할 수 있게되는 거죠. DRY관점에서도 올바른 방향으로 나가는 거겠죠?ㅡ.ㅡ

위 소스를 보시면 유효성 검사를 위한 몇개의 속성들이 눈에 띄실겁니다.  using 문에 System.ComponentModel.DataAnnotations를 추가하면 유효성 검사 속성들을 사용할 수가 있습니다. 
각 필드에 속성들을 추가할 수 있는데요. [Required], [Ragng], [ReqularExpression], [StringLength] 등이 있고 커스텀한 속성도 만들 수가 있습니다.
만약 Name 에 길이제한을 5자로 하고 싶다면 [StringLength(5, ErrorMessage="5자까지만!")] 을 추가만 하시면 됩니다. 모델의 유효성 검사를 추가함으로(컨트롤러와 뷰 수정없이), 이 모델을 사용하는 부분에는 모두 적용이 되는거죠. 참 쉽죠잉?

일단 에러를 내볼까요?


위 에러메시지가 표시되는 것은 Create.aspx 소스를 보시면

<div class="editor-field">
    <%: Html.TextBoxFor(model => model.Name) %>
    <%: Html.ValidationMessageFor(model => model.Name) %>
</div>

<%: Html.ValidationMessageFor() %> 를 보실 수 있습니다. 바로 이것이 ModelState.IsValid 가 false 여서 뷰를 다시 그릴때, 각각의 해당 필드 옆에 붙어서 에러메시지를 보여주는 유효성 검사 헬퍼 메쏘드 입니다.

여기서 마무리

바로 지난번에 이어 계속 진행하고 싶지만, 유효성 검사에 대해 설명하다보니 이것만으로 너무 길어져서 오늘도 여기서 마무리 하겠습니다(__). 곧 찾아뵙도록 하겠습니다. ^^

참고 : http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 멍돌이 2010/06/01 12:45

    기다리구있었는데 나왔네욤 ㅎㅎㅎㅎㅎ 잘보겠습니다.

  2. 멍돌이 2010/06/03 16:41

    editor-field 에 스타일어떻게 주셨는지 알려주시면 감사하겠습니다. 유효성 검사에 걸렸을때만 저렇게 Text Field가 분홍색으로 되게 설정 해놓셨나여?

    • editor-field 스타일은 유효성검사부분과 상관이 없습니다. Html.TextBox() 헬퍼메쏘드의 경우, <input> 태그로 렌더될때 class="input-validation-error" 가 적용이 됩니다. 유효성 에러가 표시되었을때 웹페이지에서 소스보기를 해보시면 알수 있습니다. Html.ValidationMessage()의 경우도 <span> 태그로 렌더되면서 class="field-validation-error"가 적용이 되고요. 이 스타일들은 Content 폴더의 Site.css에 있습니다.

  3. 멍돌이 2010/06/08 22:52

    6월이 되어서 ASp.Net MVC 프로젝트를 시작하였습니다.
    공부하고 시작해야되는데 공부도 안하고 바로 시작하니 이거 완전 맨땅에 헤딩수준이네요...ㅠ.ㅠ
    그래도 박세식님의 글을 보고 많은 도움을 받았답니다 ^^.

    궁금한점이 있습니다. 가급적이면 View에서 팝업페이지를 생성하는 일은 하지 않으려 했는데 불가피하게 팝업페이지를 사용하게 되었네요.
    1. 팝업페이지에서 몬가의 기능을 수행하고난 후
    2. 정상적으로 등록이 되었다는 메세지 박스를 표출하고
    3. 자기자신의 창은 닫히고
    4. 부모페이지가 Refresh가 되어야하는경우
    이런 경우에는 어떻게 핸들링을 하는지 궁금합니다.
    controller에서 기존의 ASP.NET 비하인드 코드에서 사용했던 Response.Write 같은 기능이나 RegisterClientScriptBlock 같은건 없나여? 구글링 해보니 jQuery 이용해서 많이 핸들링하는거 같던데 JQuery가 답인가여?


    너무 뜬구름잡듯이 질문을 한건아닌지 ㅠ.ㅠ 조심스럽게 답변 기다려볼게욤 ^^

    • 너무 늦게 답변을 드린점 죄송하고요;; 프로젝트는 잘 진행되고 계신가요? 일단, ASP.NET MVC에서 jQuery가 잘 작동하거든요, 물론 이 외에도 프로토타입과 같은 다른 자바스크립트 프레임워크도 잘 작동하고 동시에 사용할수도 있어서 사용하시면 좋을 듯 합니다. 그리고, ActionResult로 string 을 리턴하면 그게 Response.Write로 볼 수 있을텐데요. script를 리턴하려면 뷰페이지에서 인코드 안한 상태로 출력하면 될거고요. 멍돌이님 덕분에 다음 포스팅은 jQuery에 대해 써볼 생각입니다^^ 감사합니다.

  4. 멍돌이 2010/06/25 12:02

    답변 잘 받았습니다. 말씀하신것처럼 JQuery 사용해서 일주일가량을 밤샌결과...겨우겨우 프로젝트를 무사히(?) 마무리 지을수있었답니다 ㅎㅎㅎ블로그 자주 찾아뵈며 많은 도움을 받고있는점 감사하게 생각하고 있습니다 ^^

Posted by 박세식(쎄스)
안녕하세요. 추운날씨 잘 견디셨죠? 이제야 좀 어깨펴고 글좀 쓰겠네요. 자~ 오늘도 함께하시죠^^

이번에는 MVC로 사이트를 만드는 시간을 가져보려합니다. 간단하게 회원가입, 로그인, 게시판 정도로 해볼 생각입니다. 오늘은 첫번째로 회원가입을 해보도록 하겠습니다. 너무 썰렁하더라도 옷 단단히 더 껴입으시고 웃음으로 넘어가 주세요^^;

DB 생성하기

사용자 테이블을 만들어봐야죠^^ 테이블 컬럼은 다음과 같습니다.

 컬럼명  데이터 타입
 SEQ  int
 ID  nvarchar(50)
 NAME  nvarchar(50)
 PWD  nvarchar(50)
 EMAIL  nvarchar(100)
 EMAIL_YN  char(1)
 RGST_DT  datetime

다음의 순서대로 테이블을 생성하겠습니다.

1. SQL Server DataBase를 생성합니다. 솔루션 탐색기에서 마우스 우클릭하여 App_Data -> Add -> New Items을 선택하여 MvcDb.mdf라는 이름으로 데이터베이스를 생성합니다.
2. 서버 탐색기에서 생성된 MvcDb.mdf를 클릭하면 데이터베이스가 연결되면서 DB구조가 확장이됩니다. Tables 폴더에서 마우스 우클릭하여 Add New Table을 클릭하고, 위의 테이블 구조로 TB_USER 테이블을 만들겠습니다. 다 만든후 저장해주세요^^


DB와 테이블이 생성이 되었으면 이제 다음의 순서대로 모델을 생성하겠습니다.

1. 솔루션 탐색기에서 Models -> Add -> New Items을 선택합니다.
2. Data 카테고리를 선택하고 ADO.NET Entity Data Model 템플릿을 선택합니다.
3. 모델 이름을 UserDbModel.edmx라고 입력한후 다음버튼을 클릭합니다.
4. Entity Data Model 위자드 팝업이 뜨면 Generate from database를 선택하여 다음버튼을 클릭합니다.


5. 완료가 되면 엔티티 데이터 모델 디자인 창이 열립니다.


SQL Server DataBase의 생성과 모델 생성은 여기를 참고하세요.

초간단한 가입페이지 만들기

정말 간단하게 만듭니다. 위 모델 보시면 항목도 많지가 않죠^^

먼저, 컨트롤러를 하나 생성하겠습니다. 이름은 Member로 하겠습니다.
Controllers에서 Add -> Controller을 하시고 다음과 같이 Member 입력하시고 Add를 꼬옥 눌러줍니다.


다음으로 액션메쏘드를 만들도록 하겠습니다. 이름은 Join으로 하겠습니다.^^

public ActionResult Join()
{
    return View();
}

네, 잘 만들었죠. 그러면 View 페이지도 생성하도록 하겠습니다. 메쏘드 안에서 오른쪽 버튼 클릭후 Add View 하시면 Member 폴더 밑에 Join.aspx 페이지가 생성이 됩니다. 소스는 다음과 같습니다.

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

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>회원가입</h2>
    <% using (Html.BeginForm()) {%>
       <p>아 이 디 : <%= Html.TextBox("Id") %></p>
       <p>이    름 : <%= Html.TextBox("Name") %></p>
       <p>패스워드 : <%= Html.Password("Pwd") %> </p>
       <p>패스워드 확인 : <%= Html.Password("CPwd") %></p>
       <p>이 메 일 : <%= Html.TextBox("Email") %>
       <%= Html.CheckBox("Email_Yn", true, new { @value = "Y" } )%>수신여부</p>         
       <input type="submit" value="가입" />  
    <% } %>
</asp:Content>

여기서 확인해볼 것은, Html.BeginForm() 입니다. 브라우저를 열어서 소스보기를 해보시면


자연스럽게 <form>~</form>태그가 생성된 것을 확인하실 수 있습니다. 또, action 부분에 /Member/Join 이 매핑되는 것도 확인하실 수 있습니다.

페이지를 만들었으니 확인을 해봐야겠죠? F5를 꾸욱 눌러봅니다.(위에서 먼저 눌러서 확인했잖아~!! 소스보기는 하늘에서 뚝 떨어진 거니? 라고 물으신다면, 저는 할말이 ;;;)


^^ 바로 띄우기도 좀 거시기해서, 링크하나 걸었습니다;;


폼 내용을 입력하시고, 가입버튼을 클릭합니다.
그런데 이게 무슨 퐝당한 시츄에이션인지요. 뭔가 상태바를 보니 서버를 호출하는것은 같은데 제가 입력한 값들만 다 사라지고 아무 변화가 없습니다. 이유인 즉, 폼이 /Member/Join으로 전송되면 Join메쏘드를 호출합니다. 그런데 거기서 아무 처리를 안해줬으니 그냥 동일하게 뷰페이지만 새로 렌더링하는거죠. 그래서 제가 입력한 값들은... 과감히 버려졌습니다. 앍!
여기서 하나 알게된 것은, 아~ 그러면 값들을 처리하는 메쏘드가 하나 더 있어야겠구나 하는거죠^^;


소스를 보시면, Join 메쏘드가 두개인 것을 확인하실 수 있습니다. 하나는 /Member/Join이 호출되었을때의 메쏘드 이고, 다른 하나는 폼입력을 마친후에 submit시 호출되는 메쏘드 입니다.

Post로 받는 메쏘드를 보시면 EMAIL_YN이 하나 걸리긴 하는데요. Html.CheckBox() 헬퍼 메쏘드를 사용하면 hidden 필드값이 하나 더 생깁니다.(소스보기 참고) value 값은 false 로 되어있고요, 그래서 체크박스가 체크가 되어있으면 제가 value로 지정한 'Y'가 넘어오는데 체크해제때에는 'false'로 넘어옵니다. 그래서 저런 구문을 추가했긴했는데, 추후에 조금 더 알아보도록 하겠습니다.
_db.AddToUserSet(userInfo); 의 경우 엔티티 프레임워크에서 제공하는 프로퍼티로 저희가 생성한 User를 추가해준다는 거겠죠? 그리고 항상 디비작업을 완료하려면 SaveChanges(); 메쏘드를 호출해야합니다.

완료가 됐으니 JoinSuccess 페이지에 모델객체를 넘겨서 마무리를 짓도록 하겠습니다.
Views 폴더 밑 Member 폴더에서 Add -> View 를 하셔서 형식화된 뷰를 생성하도록 하겠습니다.


JoinSuccess.aspx 페이지의 소스는 아래와 같습니다.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcSite.Models.USER>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 JoinSuccess
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>회원가입 완료</h2>
    <%= Html.Label(Model.NAME) %> 님, 회원가입이 완료되었습니다. <br />
    환영합니다!
</asp:Content>

다시, 실행을 시켜서 폼 입력을 마친 후 가입버튼을 클릭하면,


네, 디비에 값이 잘 인서트 되었는지도 확인해보세요^^;
여기서 잠깐! 우리가 여기까지 너무 쉽게 온 것 같네요. 다시 실행을 시켜보도록 하죠. 그리고 폼에 값을 입력하지 않고 가입버튼을 클릭하면 Excepton 발생!!!


역시, 너무 쉽게 됐다고 생각했습니다. View Datail을 클릭하니


'Cannot Insert the value NULL into column 'ID...'
아이디부터 걸리기 시작합니다.

급 마무리요

글이 너무 길어졌습니다. 간단한 것을 이리도 길게 글을 쓰는 저를 꾸짖진 말아주세요^^
암튼, 여기서 과제가 생겼습니다. 다음 포스팅에서는 유효성 검사 부분들을 다루도록 하겠습니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 잘 보고 갑니다. : )

  2. 멍돌이 2010/05/28 15:55

    Join 메서드에서 인자로넘긴 USER가 도대체 뭐인가요? 찾아바두 도대체가 모르겠어염 ㅠ.ㅠ 어디서 나온거에욤??

    • 헛. 답변을 너무 늦게드리네요(__) UserDbModel.edmx 클릭하시면, 위 이미지와 같이 엔티티 디자인 창에서 TB_USER라고 보이실겁니다. 보이시죠? ^^; 이 엔티티를 클릭하시면 프로퍼티 창이 보일텐데요. Name 속성을 USER로 변경한 것입니다. 디자인 창에 있는 엔티티의 TB_USER를 더블클릭하셔도 Name을 수정하실 수 있습니다. 감사합니다.

  3. dbswhdgus523 2010/06/27 02:19

    aaa

  4. 비밀댓글입니다

  5. MVC 게시 관련 질문입니다.

    우선 서버 상황은 2003 IIS 6.0

    .net framework는 1.1, 2.0, 3.0, 3.5, 4.0 까지 설치 되어 있으며

    1개의 IP에 여러 싸이트가 있는 상황이며
    그중 한 싸이트에 MVC를 게시하려고 합니다.
    실행권한은 스크립트 전용으로 해주었으며
    ASP.NET은 4.0.30319 version 을 주었뜨랬죠

    디렉토리 편집의 익명 액세스 가능에 체크했으며
    기본적으로 들어있는 계정 IUSR~~ 뒤랑 비번은 그대로 둔채 Windows 통합인증 상태입니다.

    이 상태에서 대충 default.htm 파일 줘서 해당 URL로 접근시 HTML이 나타나는지 확인했구요

    제 로컬 컴퓨터에 MVC3 (UNIT 테스트 제외) 기본 웹 응용 프로그램을 만들었죠

    바로 컴파일 기본적인 Welcome 메세지의 MVC 글귀가 보이고

    바로 프로젝트 우클릭 게시를 눌렀습니다.

    One-Click 게시 기능 메뉴가 나타나고 게시방법은 FTP
    - 웹 배포 아무리 헤딩해도 아래와 같은 에러만 토해내고 실패 ㅜㅜ
    오류 1 웹 배포 작업에 실패했습니다(원격 에이전트(URL
    http://com.mycompany.co.kr/MSDEPLOYAGENTSERVICE)에 연결할 수 없습니다. 대상 컴퓨터에 원격 에이전트
    서비스가 설치되고 시작되었는지 확인하십시오.).
    요청한 리소스가 없거나 요청한 URL이 잘못되었습니다.
    오류 정보:
    원격 에이전트(URL http://com.mycompany.co.kr/MSDEPLOYAGENTSERVICE)에 연결할 수 없습니다. 대상 컴퓨
    터에 원격 에이전트 서비스가 설치되고 시작되었는지 확인하십시오.
    지원되지 않는 요청을 받았습니다. 응답 헤더 'MSDeploy.Response'이(가) ''인데 'v1'이(가) 필요합니다.
    원격 서버에서 (404) 찾을 수 없음 오류를 반환했습니다. 0 0 xxxxxxx


    대상 위치는 해당 서버의 도메인 주소

    http://com.mycompany.co.kr

    일치하는 파일에 로컬 복사본으로 바꾸기에 체크

    패시브 모드 체크, 사용자 이름 암호를 입력해주고

    게시를 클릭하면

    VS2010의 하단 출력창에 각 폴더 별로 "폴더를 게시하는 중...." 나타나더니 성공

    그런데 자세히 보면 bin, Content, Scripts, Views 폴더만 넘어가고
    그 밖의 파일은 Global.aspx, Web.config 등이 날아가는데

    Controller 폴더는 전송하지 않더군요 대신 bin 폴더안에 dll이 들어있기는 합니다만...

    그래서 서버 주소

    http://com.mycompany.co.kr
    를 입력하면 기본적인 MVC 페이지가 나타나기를 기대했으나

    HTTP 403 사용권한 없음 에러가 납니다 ㅜㅜ

    대체 왜이럴 까요...

    태요 형님의 MVC 책에 배포 부분을 봐도...
    "이전 단계들은 또한 일종의 403 접근 거부 에러를 낼 수 도 있다." 라고만 써져 있던데요 ㅜㅜ
    P.623

    제발 알려주세요 ㅜㅜ 너무 너무 헤딩했더니 머리가 아파오고 속이 메슥거려요 ㅜㅜ

Posted by 박세식(쎄스)
안녕하세요. 아직 떨린 마음을 감추지 못하는 팀블로그 새내기 박세식입니다. 너무나 오랜만에 포스팅을 하게되네요. 제 개인사까지 다 말씀드릴 필요는 없겠지만, 여러분 모두 새해에는 하시는일 모두 잘되었으면 좋겠습니다. 진심으로요ㅠㅠ 늦었지만 새해 복 많이 받으세요^^

이번 시간은 ASP.NET MVC와 인사를 나눠보는 시간을 갖도록 하겠습니다. 반갑게 만나보도록 하죠^^

M, V, C의 각방생활

먼저 프로젝트를 생성합니다. 새 프로젝트 열기에서


ASP.NET MVC 2 Web Applicatoin 을 선택하고, 이름은 HelloMVC 로 하겠습니다. OK를 클릭하면 다음과 같이 유닛 테스트 프로젝트를 생성할 것인지 묻는 창이 뜹니다. (이게 ASP.NET MVC의 장점이라는 겁니다. 프로젝트 자체에서 유닛 테스트를 지원해주고 있습니다. 이 창에서 Yes 를 선택하면 간단하게 유닛테스트 프로젝트를 생성할 수 있습니다.) 이 시간은 유닛테스트와는 전혀 상관이 없는 관계로 No를 선택하도록 하겠습니다.


그러면, 다음과 같은 구조의 프로젝트가 생성된 것을 확인하실 수 있습니다.


Controllers, Models, Views 폴더가 각각 분리되어 생성되었습니다. 지나가는 얘기로, 저의 한가지 꿈이 여러개의 방이 있는 집을 갖는건데요.^^; 하나는 서재실, 또 하나는 음악실, 나머지 하나는 침실 뭐 이런거죠. 정말 각각의 방 안에서의 할일이란 명확합니다. 각각의 방에서 할일들을 한 방에서 하게 된다면... 잠시 상상해보겠습니다. 한쪽에서는 드럼과 피아노와 일렉기타의 절묘한 하모니의 시끄러움(?)이, 다른 한쪽에서는 책과 씨름하며, 또 다른 한쪽에서는 코를 곯며 자는 모습... 상상이 가십니까? 음악실에서는 음악을 연주하며 맘껏 소리높여 노래도 부르고, 서재실에서는 조용한 가운데 책도 보며 교양을 쌓고, 침실에서는 자면되는거죠. 모델, 뷰 그리고 컨트롤러 또한 각자의 할 일이 뚜렷하기 때문에 한 방에 같이 있을 수가 없습니다. 각방을 써야하는거죠^^ 

프로젝트가 생성될때 샘플페이지도 같이 생성이 됩니다. F5를 눌러서 확인해보겠습니다. 클릭하시면 디버깅을 할 수 있도록 Web.config 파일을 수정한다는 팝업창이 뜨는데요, OK하고 넘어가도록 합니다.


자, Welcome to ASP.NET MVC! 가 출력되는 것을 확인하실 수 있습니다. 우리를 먼저 반갑게 맞이해주는데요.^^ 기분좋네요~ 가만히 있을 순 없죠. 저도 인사를 해보도록 하겠습니다.

Hello! ASP.NET MVC!!!

먼저, 컨트롤러 폴더의 HomeController 클래스의 Index() 메쏘드를 다음과 같이 수정하겠습니다.

public ActionResult Index()
{
    ViewData["Message"] = "Hello! ASP.NET MVC!!!";
    return View();
}

소스 1 - /Controllers/HomeController.cs

컨트롤러는 ViewData 를 통해서 뷰에 데이터를 전달할 수 있습니다. 뷰에서는 인라인 코드로 ViewData에 접근할 수 있습니다. (자세한건 여기에서 'ViewData로 뷰에 전달하기'를 봐주세요) 수정한 내용은 F5 로 실행하여 확인할 수 있습니다.


그런데 주소를 보니 http://localhost:1589/로 되어있는데도 원하는 결과를 확인할 수 있습니다. ASP.NET MVC는 기존 웹폼에서처럼 직접적인 페이지 호출이 아닌 라우팅 룰에 의해 호출이 됩니다. ASP.NET MVC 애플리케이션이 처음 시작되면 Global.asax.cs 에 있는 Application_Start() 메쏘드가 호출되고 이는 라우트 테이블을 생성합니다.


소스 2 - Global.asax.cs

라우트 테이블은 들어오는 웹 요청을 3부분으로 나눕니다. 처음은 컨트롤러 이름과 매핑이되고, 두번째는 액션메쏘드와 매핑이 되고, 세번째는 그 메쏘드에 전달될 파라미터와 매핑이 됩니다. 예를들어, /Product/Detail/3 과 같이 요청이 들어오면 다음과 같이 나뉩니다.

Controller  = ProductController
Acton = Detail
Id = 3

예제에서 주소가 http://localhost:1589/  이렇게 되어도 라우트 테이블의 디폴트값인 HomeController의 Index 액션메쏘드를 호출하기 때문에 우리가 원하는 결과를 볼수 있었던 거죠^^

이제 인사는 나누었는데 처음 만남에 인사만 나누기는 섭섭하죠? ^^; 커피라도 한잔하며 얘기 나눠보
는게 좋겠죠? 흠.. 이번시간은 간단히 인사만 나누고 끝내려고 했는데요. 너무 금방 헤어지면 정말 아쉬울것 같아서 더 진행하는 것이니 간단하게 해보도록 하겠습니다. 아무쪼록 저의 허접함을 탓하지 마옵소서...(저 스스로 분발하도록 하겠습니다^^;)

우리 차라도 한잔?

먼저 차한잔 마실거니까요 Index.aspx 를 수정해서 차 마시러 가보도록 하죠^^

<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<br />
차라도 한잔 하실래요?
<%= Html.ActionLink("네", "../Menu/MenuForm") %>

소스 3 - /Views/Home/Index.aspx

Html.ActionLink() 메쏘드는 A 태그를 만듭니다. 링크를 MenuForm으로 하네요. 물론 실행해 보면 에러가 나겠죠. 메뉴컨트롤러와 해당 액션메쏘드가 없기 때문이죠. 그러면 컨트롤러를 생성해보도록 하겠습니다.

using HelloMVC.Models;

namespace HelloMVC.Controllers
{
    public class MenuController : Controller
    {
        //
        // GET: /Menu/
        public ActionResult MenuForm()
        {
            List<Menu> MenuList = new List<Menu>();

            MenuList.Add(new Menu { Id = 1, Name = "커피", Price = "4000" });
            MenuList.Add(new Menu { Id = 2, Name = "레몬에이드", Price = "5000" });

            return View(MenuList);   
        }
    }
}

소스 4 - /Controllers/MenuController.cs

요란한 밑줄이 보이는 Menu 클래스도 생성하겠습니다.

public class Menu
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Price { get; set; }
}

소스 5 - /Models/Menu.cs

모델 클래스의 경우 생성을 하신 후에 꼭! 꼭! 꼭! 빌드를 하셔야합니다. 그래야 아래 보이는 Add View를 하실때 원하는 모델 클래스를 선택하실 수 있습니다.

ViewResult로 MenuList 모델을 파라미터로 뷰페이지로 리턴합니다. 액션메쏘드에 아무데서나 마우스 오른쪽 버튼을 클릭하여 뷰페이지를 생성하도록 하겠습니다.


Add View를 클릭하면 다음과 같은 팝업이 뜹니다. 먼저 저희가 컨트롤러에서 메뉴를 추가한 리스트를 확인해보기 위해서 다음과 같이 세팅하도록 하겠습니다.


Create a stringly-typed view를 선택하고(뷰를 생성할때 모델과 강력한 결합을 이끌게 되면 직접적으로 모델의 애트리뷰트들을 액세스할수 있게 됩니다.), View data class 를 Menu클래스로 선택합니다(여기서 Menu 클래스가 안보이시면 빌드를 안하신거에요. 빌드하셔야죠!). 마스터 페이지의 체크를 해제하도록 합니다. Add 버튼을 클릭하시면 MenuForm 페이지가 생성되는 것을 확인하실 수 있습니다. 바로 실행을 해보시면,


잘나오네요. 그러면 소스를 조금(?) 수정하도록 하겠습니다.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<HelloMVC.Models.Menu>>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>MenuForm</title>
</head>
<script type="text/javascript">
    var menuList = new Array();
    function Menu() {
        this.id;
        this.name;
        this.price;
        this.quantity = 0;
        this.cPrice;
    }
    function addMenu(id, name, price) {
        var menuNum = -1;
        for (var k = 0; k < menuList.length; k++) {
            if (id == menuList[k].id) {
                menuNum = k;
                break;
            }
        }
        if (menuNum == -1) {
            var mn = new Menu();
            mn.id = id;
            mn.name = name;
            mn.price = price;
            mn.quantity++;
            mn.cPrice = price;
            menuList.push(mn);
        }
        else {
            menuList[k].quantity++;
            menuList[k].cPrice = menuList[k].quantity * parseInt(menuList[k].price);
        }

        var str = "";
        var totalPrice = 0;
        for (var i = 0; i < menuList.length; i++) {
            str += menuList[i].name + " " + menuList[i].quantity + "잔 " + menuList[i].cPrice + "<br />";
            totalPrice += parseInt(menuList[i].cPrice);
        }
        document.getElementById("divMenuList").innerHTML =
str + "<br /> 돈부터 내시죠~ 여긴 선불!! " + totalPrice + "원 되겠습니다~~^^";
    }
</script>
<body>
    <h2>Menu</h2>
    <table width="400px" cellspacing="1" style="background-color:#CCCCCC">
    <% foreach (var menu in Model) { %>
    <tr>
        <td style="background-color:#EEEEEE"><%= Html.Encode(menu.Name) %></td>
        <td style="background-color:#AAAAAA" align="center"><%= Html.Encode(menu.Price) %></td>
        <td style="background-color:#BBBBBB">
<a href="javascript:addMenu('<%= menu.Id %>', '<%= menu.Name %>', '<%= menu.Price %>');"><%= Html.Encode(menu.Name)%> 추가요</a></td>
    </tr>  
    <% } %>       
    </table><br />
    =================== 주문서 ===================<br /><br />      
    <div id="divMenuList" style="border:1px solid #E3E3E3; width:400px; height:200px" ></div>
</body>
</html>

소스 6 - /Views/Menu/MenuForm.aspx

이상하게 복잡스럽게 보이지만(죄송합니다__) 수정된것은 테이블에 색깔준것과 주문추가 이벤트, 주문서네요.
결과물을 보면


추가 이벤트를 일으킬때마다 주문서가 수정되는 간단한 예제를 보고 계십니다.^^

마무리요

마지막의 결과물은 간단한데 너무 복잡하게 표현한건 아닌지 심히 걱정이 됩니다. 제 실력이 여기까지인지라..다음 포스팅때는 더 깔끔하고 세련된 코드로, 더 나아진 모습으로 찾아뵙도록 하겠습니다.


참고자료 :
http://www.techbubbles.com/aspnet/aspnet-35-mvc-application/
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 잘 따라해 봤습니다. 덕분에 대략 개념이 잡혀가는거 같네요

  2. 감사합니다^^ 다음글도 열심히 써야겠다는 책임감이 밀려오는데요^^; 열심히 하겠습니다. 잘 봐주세요^^

  3. 안녕하세요 좋은 설명글 보았습니다. HelloMVC.Models.Menu 를 어떻게 추가를 해야할지 모르겠습니다. Create a stringly-typed view에도 어떻게 해야 Menu가 나타나게 되는지 흑..OTL

  4. 발견했습니당 ㅋㅋ Models 에 Menu class를 넣고 빌드를 해야 Create a stringly-typed view에 Menu가 나타나내용 ㅎㅎ

  5. 진짜 class 넣는거 내용없어서 못해먹겠다 ..--;;;

    • 원하시는 class가 Menu 클래스를 말씀하시는건가요? 내용 추가하였습니다.(다시 보시고, 이번꺼 꼭 잡수셨으면 좋겠습니다. ㅡ.ㅡ;) 덧붙여 말씀드리면, 모델 클래스를 생성한 후에는 꼭~ 빌드를 해주셔야 합니다. 감사합니다.

Posted by 박세식(쎄스)
안녕하세요. 이번에 새롭게 팀원이된 박세식이라고 합니다. 많이 부족해서 컴터앞에 앉아 이렇게 자판을 두드리고 있는 시간에도 떨림이 멈추질 않네요-_-; 앞으로 잘 부탁드리겠습니다.(따스~한 피드백 아시죠^^;)  
자~ 그럼. ASP.NET MVC에 대해 알아보도록 하겠습니다.

첫번째 시간으로 ASP.NET MVC vs ASP.NET WEB FORM 에 대해 글을 써보도록 하겠습니다. 제 포스트는 ASP.NET MVC에 관한 글입니다.^^; 그래서 이 둘의 대결구도라기 보다는 웸폼의 문제점을 짚어보고 MVC에 좋은 점에 대해서 글을 써 나가려고 합니다.


ASP.NET WEB FORM의 문제점?

ASP.NET WEB FORM은 ASP.NET 개발의 전통적인 스타일이고, 큰 스케일의 웹사이트를 좀더 간단하게 만들게 해주는 기술입니다. 웹폼은 드래그 앤 드랍으로 컨트롤들을 ASP.NET 페이지에 추가하고 그것들에 맞는 코드를 작성합니다. 이러한 개발방식이 개발자들의 마음을 끄는거죠. 그!러!나! 웹폼은,

관계가 분리되어 있지 않습니다. UI와 코드가 섞여있죠--;
● 자동적으로 테스트하는 것이 쉽지 않습니다. 런타임 시작없이 테스트하기가 어렵죠. 이는 실행환경을 쭉~ 돌면서 테스트할 수 밖에 없다는 겁니다-_-;
● 상태정보를 저장하려면 각 서버페이지의 상태를 뷰스테이트라고 하는 히든 필드값으로 클라이언트 페이지에 저장합니다.

하지만, 웹폼 개발에서의 특징인 뷰스테이트와 포스트백은 축복이자 파멸의 원인이됩니다. 뷰스테이트는 클라이언트와 서버간의 오고가는 데이터들의 상태를 히든 필드로 구성하고 있는 메커니즘으로, 이것의 크기는 무지막지하게 커질 수 있습니다. 매번 호출시 이 거대한 데이터가송수신된다니 끔찍스럽죠-_-; 특히 페이지에 데이터그리드나 그리드뷰와 같은 서버컨트롤이 포함되어있다면 한페이지 한페이지 넘길때마다 응답지연의 원인이 되어 사용자들을 기다림에 지치게 만드는거죠 OTL;; 또한 포스트백은 매번 액션에 의한 트리거로서 발생이됩니다. 그 거대한 데이터(뷰스테이트)를 어떤 액션만 취하게 되면 다시 그리게 되는거죠. 이 뷰스테이트에 대해 좀더 알아보죠.


뷰스테이트(View State)란?

뷰스테이트는 포스트백시 웸폼의 상태의 변화를 유지시켜주는 기술입니다. 일반적으로 __VIEWSTATE라는 이름의 히든 필드로 웹페이지에 위치합니다. 이 히든값은 수십 킬로바이트씩 쉽게 커질 수 있습니다. 이 뷰스테이트는 사용자가 웹 페이지를 포스트백 할 때 천천히 불려지고(다운로드), 그 히든 값의 내용을 웹 요청시에 포스트해서 요청 시간을 길어지게 합니다. ASP.NET 웹 페이지의 요청이 올 때 정확하게 무슨 일이 일어나는지를 알려면 ASP.NET 페이지의 생명주기(Life Cycle)을 알아봐야 하는데요. 잠깐 간단하게만 알아보도록 하죠^^;(어째~ 이야기가 점점 옆으로 새네요.. 언제 제자리로 돌아올지는 생각하지 말아주세요-_-;)


Asp.Net Page Life Cycle

매번 ASP.NET 웹 페이지에 의해 서버에 요청이 오면 첫째로 웹 서버는 ASP.NET 엔진으로 요청을 넘깁니다. ASP.NET 엔진은 웹 페이지의 올바른 파일 접근을 확인하는 여러 단계로 구성된 파이프라인을 통해서 사용자의 세션 정보를 얻습니다. 파이프라인의 끝에서는 요청된 웹 페이지에 상응하는 클래스를 인스턴스화하고 ProcessRequest() 메쏘드를 호출합니다. ASP.NET 페이지의 생명주기는 ProcessRequest() 를 통해서 시작됩니다. 이 메쏘드는 페이지의 컨트롤 단계를 준비합니다. 그 다음으로, 페이지와 서버는 ASP.NET 웹 페이지에 필요한 여러 단계를 하나씩 단계별로 밟게 됩니다. 이 단계들에는 뷰스테이트를 관리하고, 포스트백 이벤트를 처리하고, HTML 페이지를 렌더링하는 것들이 포함되어 있습니다.


그림 1. 페이지 생명 주기의 이벤트들
출처 : http://msdn.microsoft.com/en-us/library/ms972976.aspx

다시 뷰스테이트로 돌아와서 정리하자면, 세상에 공짜는 없습니다.(비용이 든다는거죠) 여기 뷰스테이트도 예외일 수는 없습니다^^; ASP.NET 페이지가 요청될 때마다 뷰스테이트는 두가지 성능에 관련되는 일을 합니다. 첫째는, 모든 페이지를 방문할 때 뷰스테이트는 해당 컨트롤 계층의 모든 컨트롤의 뷰스테이트를 모아서 베이스 64 인코딩으로 시리얼라이즈합니다. 여기서 생성된 스트링이 __VIEWSTATE에 값인거죠^^

반대로, 포스트백시에는 뷰스테이트를 읽엇 저장된 뷰스테이트 데이터로 디시리얼라이즈하고 컨트롤 계층구조에 있는 적절한 컨트롤러로 업데이트합니다. 두번째로, 뷰스테이트는 클라이언트가 다운로드 받아야할 웹페이지의 크기를 증가시킵니다. 원래 보여질 페이지의 데이터와는 또다른 데이터인거죠. 뷰스테이트 크기가 큰 페이지는 이 뷰스테이트의 크기가 수십 킬로바이트가 됩니다.  이것을 다운받기 위해 또 수 초나 수 분의 시간을 할애해야합니다.(이게~ 뭔가요-_-;) 또, 포스트백시에도 뷰스테이트를 웹 서버로 보내야하고, 그것 때문에 포스트백 요청시간이 증가하는 거죠.


ASP.NET MVC 알아보기

ASP.NET MVC는 모델, 뷰 그리고 컨트롤러로의 3개의 파트로 분리되어 구현됩니다.


그림 2. MVC Framework
출처 : http://dotnetslackers.com/articles/aspnet/KiggBuildingADiggCloneWithASPNETMVC1.aspx

● 뷰(View) 는 애플리케이션의 UI를 담당하고, 이는 단지 컨트롤러에 의해 애플리케이션의 데이터로 채워질 HTML 템플릿에 지나지 않습니다.
● 모델(Model) 은 UI를 렌더링하는 뷰가 사용할 애플리케이션의 객체, 즉 애플리케이션의 데이터의 비즈니스 로직을 구현합니다.
● 컨트롤러(Controller) 는 사용자 입력과 상호작용하는 응답을 핸들링합니다. 웹 요청은 컨트롤러에 의해 핸들링되고, 요청된 URL의 표현될 뷰와 적절한 데이터(모델 객체)를 결정합니다.


ASP.NET MVC의 요청 흐름도

ASP.NET MVC 애플리케이션은 웹폼과 같이 주소창에 입력된 URL이 해당서버의 디스크에 있는 페이지(파일)을 찾는것이 아닌 컨트롤러를 통한 뷰를 호출하게 됩니다. URL은 컨트롤로와 매핑이 되고 컨트롤러는 뷰를 리턴해주는 식이죠. 다음의 그림을 보시면


그림 3. 요청 흐름도
출처 : http://dotnetslackers.com/articles/aspnet/KiggBuildingADiggCloneWithASPNETMVC1.aspx

처음 사용자 요청(URL)이 들어오면 Routing Rule 에 의해 컨트롤러를 매핑시킵니다. Routing Rule 은 ASP.NET MVC 프로젝트를 생성하면 Global.asax에 정의되어 있는데요. 제 블로그에 컨트롤러를 설명하면서 Global.asax에 대해 간략하게 설명한 부분이 있는데요 참고하시기 바랍니다. 여기서도 간단히 설명드리자면, 주소는 {controller}/{action}/{id} 이런식으로 들어오게됩니다. 특정 컨트롤러의 특정 액션메쏘드의 파라미터로 id를 넘겨준다는 룰이죠. (액션메쏘드는 컨트롤러 클래스에서 public으로 제공되는 메쏘드를 가리킵니다.)

다시, 컨트롤러는 뷰에 넘겨줄 데이터를 만들 모델을 선택합니다. 선택된 모델객체는 뷰에 넘겨줄 데이터(ViewData)를 만들고, 컨트롤러가 이를 뷰에 넘겨줍니다. 마지막으로 뷰는 HTML로 렌더링해서 사용자에게 보여줌으로 하나의 흐름이 흘러가는 거죠^^;

그래서 ASP.NET MVC의 장점은?

● 모델, 뷰, 컨트롤러로 명확하게 관계과 분리되어 있어 복잡한 애플리케이션 로직을 관리하기 쉽게 해줍니다. 이로 인해 각 개발자는 MVC 패턴의 분리된 컴포넌트를 각자 개발할 수 있습니다. 페이지 단위로 되어 있는 웸폼은 비하인드 코드에서 로직을 담당하게 되는데요. 다른 두개의 페이지에서 비슷한 작업을 하게 된다해도 하나의 작업으로 사용하기가 어렵다는 거죠^^; 특정 페이지의 이벤트가 그 페이지의 비하인드 코드를 호출하기 때문에 같은 작업을 해도 저처럼 잘 모르는 사람들은 저희에게 무한한 능력(?)을 심어주는 카피 앤 페이스트 작업을 거쳐야한다는 겁니다.

● 유닛테스팅을 쉽게해줍니다. 이 유닛테스트도 M,V,C 가 각각 깔끔하게 분리되어 있어주기 때문에 가능한거죠^^; 추후에 유닛테스트가 과연 얼마나 쉬운지 알아보는 시간을 갖도록 하겠습니다.

● MVC 모델은 뷰스테이트와 포스트백을 사용하지 않습니다. 그래서, MVC는 일반적으로 웹폼에 비해 페이지 사이즈가 작습니다. 폼의 히든 필드인 뷰스테이트 데이터와 같은 불필요한 데이터가 없기 때문이죠.

● 웸폼 모델에서의 URL이 서버의 존재하는 파일을 직접 요청하는 것 대신에 REST 방식의 URL을 사용하여 URL을 간단하게 해주고, 기억하기 쉽게 해주고, SEO의 도움을 줍니다.

SEO(Search Engine Optimization) 는 검색엔진의 결과로 보여질 랭크의 순위를 높이는 작업을 말합니다. 상위 랭크의 검색결과로 나타내어지면 사용자가 아무래도 계속 그것만 보게되니 좋겠죠^^; 그래서 URL 또한 사용자가 보기 쉬운 걸로 나타내면 좋다는거죠. 예를들어, /Product/Edit/4 이런 URL 이라면 4번째 상품을 수정하겠다는 거군. 이렇게 명시적으로 알수 있다는 겁니다. 예가 좀 부적합한가요^^;

● jQuery나 ExtJS와 같은 클라이언트단 자바스크립트 프레임워크와 쉽게 통합할 수 있습니다.


마무리요

사실, 웸폼과 MVC를 비교해서 꼭 이것이 더 좋으니까 이것만 사용해야지가 아닙니다. 각 프로젝트의 특성에 맞게 선택하는 거죠. (다시한번 말씀드리지만 이 포스트는 ASP.NET MVC에 관한 글입니다--;) 성능을 따지지 않고 빠른 개발을 원한다면 웹폼을 선택하는 것이 좋을 것 같고, 유닛테스팅과 성능에 중점을 두겠다 싶으면 MVC쪽을 선택해봄이 좋겠다는 거죠. 다음 포스트에는 예제를 통해서 ASP.NET MVC와 인사를 나눠보는 시간을 갖도록 하겠습니다^^


참고자료 :
http://msdn.microsoft.com/en-us/library/ms972976.aspx
http://dotnetslackers.com/articles/aspnet/KiggBuildingADiggCloneWithASPNETMVC1.aspx
http://msdn.microsoft.com/en-us/magazine/dd942833.aspx
http://www.techbubbles.com/aspnet/aspnet-mvc-and-web-forms/
http://www.taeyo.net/lecture/NET/AspNet35_pre02.asp
http://weblogs.asp.net/shijuvarghese/archive/2008/07/09/asp-net-mvc-vs-asp-net-web-form.aspx
http://weblogs.asp.net/scottgu/archive/2007/10/14/asp-net-mvc-framework.aspx
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 비밀댓글입니다

  2. 안녕하세요 각방생활 잘 보고 갑니다~ㅎㅎ

    mvc와 seo의 관계를 찾던 도중에 이 글을 발견했네요~^^

    나중에 seo에 관한 글도 쓰시나요?ㅎㅎ
    꾸준히 보도록 하겠습니다~ㅎㅎ

    수고하시고요~! ㅎㅎ
    댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠?ㅋㅋ

  3. 안녕하세요 각방생활 잘 보고 갑니다~ㅎㅎ

    mvc와 seo의 관계를 찾던 도중에 이 글을 발견했네요~^^

    나중에 seo에 관한 글도 쓰시나요?ㅎㅎ
    꾸준히 보도록 하겠습니다~ㅎㅎ

    수고하시고요~! ㅎㅎ
    댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠?ㅋㅋ

  4. 아주 좋은 기사. 그냥 구글 번역기를 통해 읽어보세요.

  5. # 2 연필과 꿈이 어디서든 걸릴 수 있습니다.

  6. 의견을 변경하고 당신은 세계를 변경합니다.

  7. 아주 좋은 기사. 그냥 구글 번역기를 통해 읽어보세요.

  8. 댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠

  9. 댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠?ㅋㅋ.

  10. 아주 좋은 기사. 그냥 구글 번역기를 통해 읽어보세요.

  11. 我始终将给好被猛推的看在跟从我的书签饲料的你。我不实际上评论和不喜欢在输入评论方面花时间。但是在这里我必须做这因为这应得报答好喜欢。

  12. 아주 좋은 기사. 그냥 구글 번역기를 통해 읽어보세요.

  13. 我不实际上评论和不喜欢在输入评论方面花时间。但是在这里我必须做这因为这应得报答好喜欢。

  14. 댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠

  15. 수고하시고요~! ㅎㅎ
    댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠?ㅋㅋ

  16. 댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠

  17. I really enjoy reading the articles on this blog. I'll bookmark this so I can read more later.

  18. ASP.Net platform is really powerful and developed now!

  19. This thing requires a giant manual to understand how it works.

  20. 댓글을 너무 늦게 단게 아닌가 생각이 드네요 ㅎㅎ 기다리다 목 빠지시진 안으셨죠?ㅋㅋ.

  21. 당신이 뭘 원하는지 모르는 경우, 그냥 형식이나 구조를 복사한 후, 원하는 것을 홍보 자료의 예제를 찾습니다. 디자이너에게 샘플을 지참하고 홍보 자료에 스타일의 터치를 제공하도록 요청합니다.

  22. 당신이 시장에 귀사의 브랜드를 제시하기 전에 약속을 지킨다되어 있는지 확인합니다. 당신은 사람들에게 신뢰의 느낌을 보내면, 그들이 귀하의 조직에 의존하는 것이 좋습니다 것입니다. 대신, 당신은 그들의 기대에 도달하지 않을 경우, 조직의 명성은 영원히 악화될 수 있습니다. 따라서 자선 브랜드가 귀하의 목표와 일치하는지 확인하기 위해 조치를 취해야한다.