Silverlight Old/Experiment

Silverlight와 WebService(.NET 3.5) 연동하기

길버트 2007. 12. 26. 10:35

1. 샘플 프로젝트 만들기

일단 솔루션에 .Net Framework 3.5 기반의 Silverlight Project를 먼저 생성하시고,

사용자 삽입 이미지

이어서 Web프로젝트 형식의 'ASP.NET 웹서비스 응용 프로그램 템플릿 프로젝트를 추가합니다.

사용자 삽입 이미지

WebSvc3_5 프로젝트에 오른쪽 클릭을 하고 'Add Silverlight Link'를 실행합니다.

사용자 삽입 이미지

아래와 같은 창이 뜨면 OK를 누릅니다.

사용자 삽입 이미지

이 과정을 거치고 나면 WebSvc3_5 프로젝트에 Page.xaml과 Silverlight 프로젝트의 빌드 결과물(.dll)들이 참조되게 됩니다.

사용자 삽입 이미지

Silverlight 프로젝트의 Silverlight.js 파일과 TestPage.html (TestPage.html.js파일 포함)파일을
WebSvc3_5 프로젝트에 복사해 줍니다.

WebSvc3_5 프로젝트 이름에 오른쪽 클릭을 하고 '시작 프로젝트로 설정'을 실행합니다.
WebSvc3_5 프로젝트 내의 TestPage.html 파일에 오른쪽 클릭을 하고 '시작 페이지로 설정'을
실행합니다.

위 액션의 의도가 궁금하신 분은 공도님의 포스트

http://gongdo.tistory.com/97 중 '웹 프로젝트와 Silverlight 프로젝트를 함께 디버깅'

파트를 참고하십시오. 안 궁금하신 분은 패스!


솔루션 탐색기 트리에서 Service1.asmx 파일을 더블클릭하여
Service1.asmx.cs 파일을 아래와 같이 편집합니다.

using System;
using System.Data;
using System.Linq;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.ComponentModel;
using System.Xml.Linq;
namespace WebSvc3_5
{
    /// <summary>
    /// Service1의 요약 설명입니다.
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다.
    [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {
        [WebMethod]
        public string HelloWorld()
        {
            return "Happy New Year!";
        }
    }
}

[System.Web.Script.Services.ScriptService]에 적용되어 있던 주석 하나만 풀어주면,
바로 Silverlight의 비하인드 코드를 통해 직접 연동할 수 있는 웹서비스 클래스가 됩니다.

Service1.asmx 파일에 오른쪽 클릭하고 '브라우저로 보기'를 실행하여,
URL을 클립보드에 복사해 둡니다.

저의 경우에는 http://localhost:56997/Service1.asmx 였습니다.
자 그럼 그창을 닫습니다.

주의) 나중에 웹에 게시할 때는 웹서비스가 게시된 웹상의 URL로 웹참조를
변경해 주셔야 합니다.



3. 웹 참조 추가

Silverlight 프로젝트에 오른쪽 클릭을 하고 '웹 참조 추가'를 실행합니다.

사용자 삽입 이미지

1. 클립보드에 복사한 URL을 붙여넣기 하고 '이동' 버튼을 누릅니다.
2. 웹 참조 이름을 변경합니다.
3. 참조 추가 버튼을 누릅니다.

이제 이 실버라이트 프로젝트 내의 모든 비하인드 코드에서 mySvc란 이름으로
웹 서비스에 접근이 가능해졌습니다.


4. 실버라이트 프로젝트에 웹서비스를 참조하는 샘플 코드 구현

웹서비스에서 받아 온 문자열을 화면에 보여 주기 위해 Page.xaml 파일을 Blend에서
조금 변경합니다.

사용자 삽입 이미지

크리스마스에 어울리는 빨간 글씨를 가진 TextBlock을 _tbMessage란 이름으로 추가합니다.

마지막으로 Page.xaml.cs에 손을 댑니다.

public void Page_Loaded(object o, EventArgs e)
{
    // Required to initialize variables
    InitializeComponent();

    // 웹 서비스의 HelloWorld 메서드를 실행하여 가져온 문자열을 화면에 표시
    mySvc.Service1 svc = new mySvc.Service1();
    _tbMessage.Text = svc.HelloWorld();
}


5. 테스트

자 이제 F5를 눌러 실행을 해봅니다.

사용자 삽입 이미지


웹 서비스에서 받아온 문자열이 화면에 잘 표시되는 것을 확인할 수 있었습니다.

이제 재미있고 유익한 웹 서비스를 구현하여 즐기는 일만 남았군요!

감사합니다.


6. 프로젝트 소스


필요하신 분은 다운받으십시오.
1 2 3 4 5 6 7 ··· 10