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

Silverlight Old/Experiment 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. 프로젝트 소스


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

설정

트랙백

댓글

  • 이지홍9 2008.03.11 14:54 신고 ADDR 수정/삭제 답글

    전 add 실버라이트 링크라는 메뉴가 없는데 어떻하죠?
    visual studio 2008에 실버라이트 2.0 입니다.

  • 이지홍9 2008.03.11 15:04 신고 ADDR 수정/삭제 답글

    js랑 테스트 페이지가 안생깁니다.
    도와주세요.

  • BlogIcon 길버트 2008.03.11 18:59 신고 ADDR 수정/삭제 답글

    제 글은 실버라이트 1.1에 해당하는 내용입니다.

    실버라이트2에서는 프로젝트 생성 시,
    기본 옵션으로 웹어플리케이션 프로젝트를 동시에 생성할 수가 있구요.

    이때 생긴 [프로젝트명]_Web란 이름의 웹어플리케이션 프로젝트 쪽의 파일 구성을 유심히 보시면,
    js랑 테스트 페이지 대신에 [프로젝트명]TestPage.aspx파일과 [프로젝트명]TestPage.html 파일이 생깁니다.
    둘 중 테스트 하고 싶으신 것을 '시작 페이지로 지정'하시고 실행하시면됩니다.

    [프로젝트명]TestPage.aspx에서는 asp:Silverlight 컨트롤에 의해서 실버라이트가 호스팅 되고,
    [프로젝트명]TestPage.html에서는 object 태그에 의해서 실버라이트가 호스팅 되고 있는 것을
    확인하실 수 있습니다.

    실버라이트 2에서는 TestPage.html.js 같은 것이 필요없게 되었습니다.

  • BlogIcon cube 2009.01.31 23:14 신고 ADDR 수정/삭제 답글

    잘 보고있어요!!

    • BlogIcon 길버트 2009.02.01 13:00 신고 수정/삭제

      열심히 하는 모습이 보기 좋습니다.
      cube군 파이팅! 좋은 결과 있길!