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

Silverlight Old/Experiment 2007.12.25 13:34

1. 서론 (준비사항)

.Net Framework 3.5 기반으로 생성한 WebService와 Silverlight 연동하기는
누워서 떡먹기인데, 웹호스팅 업체들이 .Net Framework 3.5를 지원하는
서비스를 아직 내놓지 않고 있죠? (비싼 돈 내고 서버 호스팅을 하는 수 밖에...)

그래서 현재 시점에서는 .Net Framework 2.0 기반의 WebService와 함께 하는 것이 손쉬운 길입니다.

.Net Frameworks 2.0 기반에서 Silverlight와 연동하기 위해서는 AJAX의 도움이 필요합니다.
일단 Visual Studio 2008은 설치되어있으시다고 가정하면, 다음과 같은 것들을 추가로 설치하셔야 합니다.

- ASP.NET 2.0 AJAX 1.0 Extensions 1.0
- Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008

설치 후 Visual Studio 2008을 구동시켜 새 프로젝트 만들기를 시도해 보면,
Web 프로젝트 형식의 .NET Framework 2.0 용 템플릿에 무엇인가 새로 추가되어 있는 것을
발견하실 수 있습니다.

사용자 삽입 이미지
AJAX 설치 전

사용자 삽입 이미지
AJAX 설치 후

AJAX 1.0-Enabled ASP.NET Web Application이 새로 추가되었군요!


2. 샘플 프로젝트 만들기

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

사용자 삽입 이미지

이어서 .Net Framework 2.0 기반의 'AJAX 1.0-Enabled ASP.NET Web Application' 프로젝트를 하나 추가합니다.

사용자 삽입 이미지

사용자 삽입 이미지

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

사용자 삽입 이미지

위와 같은 창이 뜨면 OK를 누릅니다.
이 과정을 거치고 나면 WebSvc2_0 프로젝트에 Page.xaml과 Silverlight 프로젝트의 빌드 결과물(.dll)들이 참조되게 됩니다.

사용자 삽입 이미지

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

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

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

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

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


사용자 삽입 이미지

WebSvc2_0에 오른쪽 클릭을 하고 '추가 - 새 항목'을 통해서,
웹서비스를 하나 추가합니다. 위 그림에서 WebService1.asmx.

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

using System;
using System.Data;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.ComponentModel;
using System.Web.Script.Services;

namespace WebSvc2_0
{
    /// <summary>
    /// WebService1의 요약 설명입니다.
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Merry Christmas!";
        }
    }
}


웹서비스 클래스에 [System.Web.Script.Services.ScriptService]가 선언이 되어있어야,
Silverlight의 비하인드 코드를 통해서 직접 연동할 수 있습니다.

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

저의 경우에는 http://localhost:49573/WebService1.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.WebService1 svc = new mySvc.WebService1();
    _tbMessage.Text = svc.HelloWorld();
}


5. 테스트

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

사용자 삽입 이미지


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

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

감사합니다.


6. 프로젝트 소스


필요하신 분은 다운받으십시오.

설정

트랙백

댓글