CascadingDropDown와 sql DB 같이 쓰기~~~~~~

[빛꽈소금]

CascadingDropDown와 sql DB 같이 쓰기~~~~~~

안녕하세요~ 빛꽈소금 입니다. 능력은 없지만. 차후 능력이 생길 때 강좌를 올리는 경험이 없어 어리버리할까봐.  연습삼아서 제가 공부한 자료를 올려 보려 합니다. 이 다짐이 얼마나 갈지 몰르겠지만, 허접한 자료 이겠지만. 비웃지만 말아주세요 ^^;;;

제가 오타가 좀 많아요… ^^:;;

그 처음으로 CascadingDropDown와 sql db를 같이 쓰는 경우를 보도록 하겠습니다.

보통 강좌는 편히상 반말로 진행되더라구요??? 저두 따라하겠습니다. ㅎㅎㅎㅎㅎ

---------------------------------------------------------------------------------------

CascadingDropDown 컨트롤은 A DropDownList 컨트롤 변경 할 경우 A의 선택된 SelectValue값으로 B DropDownList컨트롤를 포스트백없이 바인딩하는 AJAX컨트롤 이다.

먼저 정상적으로 작동하는 그림을 보자~

첫번째 DorpDownList(이하 ddl이라고 부름)컨트롤 은 sql2005 예제 DB은 AdventureWorks의 [AdventureWorks].[Production].[ProductCategory]테이블을 바인딩 한다.

두번째 ddl컨트롤은 [AdventureWorks].[Production].[ProductsubCategory]를 바인딩하는데  첫번째 ddl에서 선택된 ProductCategoryID 를 부모로 가지고 있는 자식들이 바인딩 된다.

그럼 차근 차근 만들어 보도록 하겠다.

먼저 새로운 Asp.net ajax-enable web site를 선택 하고 웹사이트를 만들자

Asp.net ajax-enable web site 를 이용해 웹사이트를 만들면 기본적으로 닷넷에서 AJAX를 사용하기위해서 가장 중요한 ScriptManager컨트롤이 자동으로 생겨져 있다.

위에 그림과 같이 ddl컨트롤를 두개 추가 시키고 AjaxControlToolkit 중에 CascadingDropDown 컨트롤도 두개를 추가 시킨다.

소스 뷰를 보면 다음과 같이 구성되어 있다면 아주 잘 만든것이다. ㅋㅋㅋ 단지 드래그앤 드랍만 했을 뿐이겠지만.^^;;

CascadingDropDown에 DB를 사용하기 위해서는 웹서비스를 사용해야 한다.(페이지메소드라는 기술를 쓰면 웹서비스가 필요 없지만 반환타입에 제한이 있기 때문에 사용 할 수 없다.) 다음과 같이 웹서비스 파일을 하나 추가 시켜주고

CascadingDropDown에 ServicePath라는 속성을 추가 시켜주자. 속상값으 조금전에 만든 웹서비스의 페이지명을 적어주면 되겠다. ServicePath = “WebService.asmx”  이런식으로. ServicePath 속성은 느낌상 알겠지만 CascadingDropDown에서 어떠한 웹서스를 쓰겠다고 지정해주는 속성이다.

속성이야기가 나온김에 CascadingDropDown에 나머지 속성을 알아보자. 아래가 그 속성들이다.

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"

    TargetControlID="DropDownList2"

    Category="Model"

    PromptText="Please select a model"

    LoadingText="[Loading models...]"

    ServicePath="CarsService.asmx"

    ServiceMethod="GetDropDownContents"

    ParentControlID="DropDownList1"

    SelectedValue="SomeVal‎ue" />

TargetControlID : 적용될 ddl컨트롤의 ID

ParentControlID : 부모 ddl컨트롤의 ID

Category        : 적용될 ddl컨트롤이 대표하는 분류명

PromptText      : ddl컨트롤에 선택된 값이 없을 경우 선택을 요구하는 멘트

LoadingText     : ddl컨트롤 바인딩시 출력되는 멘트

ServiceMethod   : ServicePath연결된 웹서비스에서 사용할 메소드

ServicePath     : 사용할 웹서비스파일 명

우리는 아래와 같이 속성들을 지정해준다.

<cc1:CascadingDropDown ID="ccdCate" runat="server" TargetControlID="DropDownList1"   Category="Cate" PromptText="카테고리를선택하세요" LoadingText="[Loading colors...]"  ServicePath="WebService.asmx"  ServiceMethod="GetDropDownData" />

<cc1:CascadingDropDown ID="ccdSubCate" runat="server" TargetControlID="DropDownList2" ParentControlID=" DropDownList1"  Category="SubCate" PromptText="카테고리를선택하세요" LoadingText="[Loading colors...]"  ServiceMethod="GetDropDownData" ServicePath="WebService.asmx" />

이제는 웹서비스파일에 내용을 입력할 차례이다. App_Code/ WebService.cs 를 클릭하자.

여기서 AJAX에서 웹서비스를 사용하기위해서는 추가해야 줘야 할것이 있는데. 아래의 그림을 보고 using문과 [System.Web.Script.Services.ScriptService()] 추가 하도록 하자. 

그리고 CascadingDropDown속성에서 지정해준 메소드 GetDropDownData를 만들어주자

다음과 같이 말이다.

 [WebMethod]

public CascadingDropDownNameVal‎ue[] GetDropDownData(string knownCategoryValues, string category)

{

}

사실 개인적으로는 이부분이 가장 설명할 부분이 많은거 같은데 내공이 너무 딸린다. ㅠ,ㅠ  많은 이해와 용서를 부탁 드린다.ㅠ,ㅠ.

주목해야 할점이 2가지가 있는데 반환타입이 CascadingDropDownNameVal‎ue[]인 점과

2개의 파라미터 값이 있다는 것이다.(string knownCategoryValues, string category)

먼저 CascadingDropDownNameVal‎ue클래스는 AJAXToolkit에서 정의된 클래스 인데

AJAXToolkit설치 위해 다운 받은 파일에 보면 CascadingDropDown폴더에 CascadingDropDownNameVal‎ue.cs파일을 참조하면 되겠다.  클래스를 보긴 했찌만 뭐어 솔적히 난 머가 먼지 몰르겠다.. ㅋㅋㅋㅋ…그냥 느낌상 왠지.. ddl컨트롤에 vale값과 Text값 를 받을 수 있는 클래스 인거 같다.  대략 CascadingDropDownNameVal‎ue클래스에 ddl컨트롤에 바인딩할 값을 담아서 보내는 정도로 이해하면 될 듯 싶다.

그다음 인자 값인 string knownCategoryValues, string category 이놈들은 무엇일까?? 이 둘의 변수명은 변경되면 오류가 난다. 이유는 몰른다. 만든 사람이 그렇게 만들었다..ㅠ,ㅠ..

knownCategoryValues는 ddl컨트롤에서 선택된 값이 넘어 오는거라고 생각하면 되고, category는 CascadingDropDown속성에서 지정해준 category 값이다. 이것으로 웹서비스 메서드에서 어떠한 ddl컨트롤의 변경된지 알수 있다.

그럼 GetDropDownData메소드의 내용을 볼 차례이다.

List<CascadingDropDownNameVal‎ue> result = new List<CascadingDropDownNameVal‎ue>();

ConnectionStringSettings setting = ConfigurationManager.ConnectionStrings["AdventureWorksConnectionString"];

using (SqlConnection conn = new SqlConnection(setting.ToString()))

{

string sql = string.Empty;

SqlCommand cmd = new SqlCommand();

if (category == "Cate")

        {

               sql = "select [ProductCategoryID], [Name] from [AdventureWorks].[Production].[ProductCategory]";

                cmd = new SqlCommand(sql, conn);

                cmd.CommandType = CommandType.Text;

            }

            else if (category == "SubCate")

            {

                sql = "select [ProductSubCategoryID], [Name]from [AdventureWorks].[Production].[ProductsubCategory] where [ProductCategoryID]=@CateID";

                StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

                cmd = new SqlCommand(sql, conn);

                cmd.CommandType = CommandType.Text;

                SqlParameter pram = new SqlParameter("@CateID", SqlDbType.Int);

                pram.Value = int.Parse(sd["cate"].ToString());

                cmd.Parameters.Add(pram);

            }

            conn.Open();

            SqlDataReader dr = cmd.ExecuteReader();

            while (dr.Read())

            {

                CascadingDropDownNameVal‎ue cv = new CascadingDropDownNameVal‎ue(dr[1].ToString(), dr[0].ToString());

                result.Add(cv);

            }

        }

        return result.ToArray();

가 전체의 내용이다. (끝이 보인다~~!! 힘내자~~!!!...글을 쓰는 사람도 읽는 사람도..ㅋㅋ) 기본적인 sql구문에 대해서는 설명을 생락하겠다.

List<CascadingDropDownNameVal‎ue> result = new List<CascadingDropDownNameVal‎ue>();

바인딩의 결과가 단한개가 아니라 N개 이므로 반환 타입을 CascadingDropDownNameVal‎ue를 쓰면 단 한 개의 값밖에 반환 할 수 없다.. 그래서 닷넷2.0에서 새로 발표된 List<>를 쓰게 되는것인데..msdn에 설명 문구를 빌려 쓰자면 “인덱스로 액세스할 수 있는 강력한 형식의 개체 목록을 나타냅니다. 목록의 검색, 정렬 및 조작에 사용할 수 있는 메서드를 제공합니다.” 라고 한다. ㅎㅎ ..

List 제너릭클래스에 대한 개념은

http://msdn2.microsoft.com/ko-kr/library/6sh2ey19(VS.80).aspx 나 http://cafe.daum.net/_c21_/bbs_search_read?grpid=8C6Q&fldid=6Hvn&contentval=0004Rzzzzzzzzzzzzzzzzzzzzzzzzz&nenc=T-qXiKyRjRbN5KJCQSjAoQ00&dataid=275&fenc=yqImalXpU-c0&docid=CDaARXk7 참고 하기를 바란다.

If(cateory == “Cate”)

이면 DropDownList1 바인딩을…

else if(category == “SubCate”)

이면 DropDownList2 바인딩을

두번째 if문을 보면

StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); 가 있는데

부모 ddl컨트롤의 선택된 selectvalue값을 리턴 받기 위해서 필요한 부분이다.

while (dr.Read())

{

CascadingDropDownNameVal‎ue cv = new CascadingDropDownNameVal‎ue(dr[1].ToString(), dr[0].ToString());

        result.Add(cv);

}

실행된 쿼리문을 반복문을 돌며 CascadingDropDownNameVal‎ue 타입으로 저장한 후, cv를 다시 CascadingDropDownNameVal‎ue[]로  선언된 result에 추가 시킨다.

그리고 모든 반복문이 완료 되면result값을 return 한다.

참고 URL

http://www.neostyx.net/GrayRec/NXBlogPostView.aspx?postid=070423000523171&categoryname=ASP.NET+AJAX

http://blog.naver.com/gboarder/90016479272

http://www.asp.net/ajax/control-toolkit/live/Walkthrough/CCDWithDB.aspx

마치며….

이 글을 쓰기위해 약 1주일을 넘게 투자 한거 갔네요..ㅠ,ㅠ.. 중간에 제 하드가 망가져서 비스타 다시 설치하고… 셋팅다시하고….. 제가 봐도 정말 어지러운 글입니다.  그냥 흐름 정도는 나름 설명 하겠는데 이게 왜~! 그러냐고 설명을 할려고 하니깐 솔적히 몰르겠네요 ㅎㅎㅎ 한 없이 부끄럽지만. 이왕한거 올려 봅니다. 어떠한 주제에 대해서 단순히  알고 넘어가는것과.. 설명 하는 능력은 하늘과 땅이네요.. ㅋ ^^;;

무엇이 부족한지 많은 글 부탁 드려요~~~ ㅎㅎㅎㅎㅎ

내가...무슨짓을 한건지..--;;;. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[웹닷컨피그]

이야~^^ 멋진데욧~~~ +ㅁ+ 강좌까지 쓰시고 많이 많이 올려주세요^^

[심재운]

소금님... 넘 멋진거 아녀유?? ㅋㅋ (근데 글자 색깔을 넣어서 그런지 잘 안보이네요...ㅋㅋ)

[웹지니™]

빛꽈소금님의 첫 강좌 잘 읽었습니다. 서두에서의 걱정(?)과는 달리 작성자의 노력이 엿보이는 좋은 글이었습니다. 더욱 갈고 다듬어 앞으로도 멋진 강좌를 올려주시길 기대합니다.

[엔틱스]

잘 보았습니다. 앞으로도, 좋은 글 많이 부탁드릴께요~ ^^;;

[즈믄]

드디어 시작했구나.. 아무쪼록 많은 강좌 기대하며... (근데.. 담부턴 글자 색좀.. 눈이 아프다네~)

[빛꽈소금]

응원글들 감사드려요~~~ ㅎㅎㅎㅎㅎㅎ

[프레지오]

멋진 강좌 눈 아포~+_+; 늦게 봐서 미안 요즘 좀 바빠서 ㅎ