자 이제는 jQuery 코드..

거의 ajax 를 사용해서 바인딩위주로 동작하기에 코드는 간단하다..

사용자 삽입 이미지

jquery 라이브러리와..

ajax 의공통적인 설정부분을 인클루드 한다.

사용자 삽입 이미지

jquery.ajax.init.js  는 위와 같은 내용으로..

ajax 의 기본적인 설정을 넣어놓는 부분이다.

사용자 삽입 이미지

UI 는 이런식으로 구성을 하고..


사용자 삽입 이미지
ready 함수에서 acode 를 불러온다..

참고로..

jquery 에서 select - option 태그를 핸들링하려면..

위 처럼해야한다..(이부분은 좀 해맸다 ㅡ,,ㅡ);


사용자 삽입 이미지

Bcode 를 가져오고..

ready 와 별반 다르지 않다.

사용자 삽입 이미지


CCode 또한..

짜짠..완성

사용자 삽입 이미지

자..

그러면 이제 data 를 읽어올 webservice 를 만들어 봅시다..

역시 씸플하게..

A.B.C 코드를 읽어오는 메소드를 한개씩



사용자 삽입 이미지

ACode를 읽어올 메소드 입니다..

SqlHelper 클래스는 필자가 만들어 쓰는 ms-sql 랩핑 클래스인데..

차후에 공개하기로 하고..

사용자 삽입 이미지
사용자 삽입 이미지

위의 세가지 메소드는 공통적으로 DataTable을 받아서  Json 으로 변환을 시켜준다..

JSonSerializer 또한 차후 공개 하기로 하고..(찾아보면 많다..)


사용자 삽입 이미지

webservice 를 실행한 결과이다..

json 데이타를 참 좋게 보여준다..
사용자 삽입 이미지

ms-sql 을 사용하여..

테이블을 3개 생성한다..

데이타베이스 관련한 포스팅이 아니므로 ..

직관적이고..

씸플하게..

사용자 삽입 이미지

jQuery + Webservice 를 사용해서 위와 같은 단계형 select box 를 만들어 보겠다.

[asp.net] 웹서비스 설명 표현

.Net 2009. 5. 26. 16:23 posted by 무명시인
http://msdn.microsoft.com/ko-kr/library/68zt3df9(VS.80).aspx#Mtps_DropDownFilterText





	[System.Web.Services.WebMethod(Description = "Hello world 문자열을 반환한다.")] 
	public string HelloWorld()
	{
        	return "Hello World";
	}