WonHada.com으로 이전

[실버라이트] 웹서비스 만들고 메소드 호출하기 본문

WPF, Silverlight

[실버라이트] 웹서비스 만들고 메소드 호출하기

반주부 2007. 11. 15. 11:40
반응형

webservice_sample.zip




실버라이트(silverlight)에서 웹서비스 메소드를 호출하는 예제입니다..
예제를 위해 필요한 프로그램 및 파일..(
http://silverlight.net/GetStarted/ 에서 다운가능)
- 비주얼 스튜디오 2008 베타 2 (VS2005도 가능할거 같지만 이왕이면 2008로 하는게 좋을거 같습니다)
- 실버라이트 1.1 리프레시(런타임)
- Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)

1. 프로젝트를 생성합니다.

사용자 삽입 이미지



2. 아래 번호 순서대로 따라하세요.

사용자 삽입 이미지



3. Page.xaml 코드를 아래 코드와 같이 작성..(복사 -> 붙여넣기)
호출 버튼과 결과를 출력할 TextBlock을 넣는 과정..

 <Canvas x:Name="parentCanvas"
        xmlns="
http://schemas.microsoft.com/client/2007" 
        xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml" 
        Loaded="Page_Loaded" 
        x:Class="WebService_sample.Page;assembly=ClientBin/WebService_sample.dll"
        Width="640"
        Height="480"
        Background="White"
        >
  <Canvas x:Name="btn" Width="129" Height="30" Canvas.Left="27" Canvas.Top="63" Background="#FF19B5B6">
    <TextBlock Width="102" Height="26" Canvas.Left="20" Canvas.Top="3" Foreground="#FFFFFFFF" TextWrapping="Wrap">
      <Run Text="Method "/>
      <Run Text="C"/>
      <Run Text="all"/>
    </TextBlock>
  </Canvas>
  <TextBlock x:Name="txt" Width="488" Height="225" Canvas.Left="27" Canvas.Top="115" Foreground="#FF000000" Text="" TextWrapping="Wrap"/>
</Canvas>

4. Page.xaml.cs 코드를 아래 코드와 같이 작성..(복사 -> 붙여넣기)
주석부분은 웹서비스 생성 후 내용이 추가될 것입니다.

 using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace WebService_sample
{
    public partial class Page : Canvas
    {
        public void Page_Loaded(object o, EventArgs e)
        {
            // Required to initialize variables
            InitializeComponent();

            btn.MouseLeftButtonDown += new MouseEventHandler(btn_MouseLeftButtonDown);
        }

        void btn_MouseLeftButtonDown(object sender, MouseEventArgs e)
        {
            //이곳에서 웹서비스의 메소드를 호출할 것입니다.
        }
    }
}

5. 새로운 프로젝트를 추가합니다..처음엔 New였지만 지금은 Add입니다..

사용자 삽입 이미지



6. 아래 번호 순서대로 따라하세요.

사용자 삽입 이미지



7. 추가된 웹서비스를 오른쪽 클릭한 다음 실버라이트 프로젝트를 링크합니다..
이는 동기화를 위한 작업입니다..즉, 실버라이트 프로젝트가 바뀌면 저절로 웹서비스의 실버라이트 부분도 바뀝니다..
단, 새롭게 추가된 파일과 Silverlight.js, TestPage.html, TestPage.html.js 파일은 수동으로 교체해야 합니다..

사용자 삽입 이미지



8. 프로젝트 선택 창이 뜨면 ok, 링크 관련 창이 하나 더 뜨면 예를 클릭하세요..

9. 웹서비스를 시작 프로젝트로 설정하겠습니다..아래 이미지를 참고하세요..

사용자 삽입 이미지



10. Shift + F5를 눌러 웹서비스를 확인해 보죠..(F5를 눌렀다면 위쪽 'Modify - ' 라디오버튼 선택한 상태로 OK)
(Directory Listing -- /  이 나온다면
 Service1.asmx 를 클릭하세요..)

HelloWorld 라는 메소드가 보이세요? 그렇다면 성공한 것입니다..자, 이제 실버라이트에 연결해보죠..
URL을 복사하세요..http://localhost:51383/Service1.asmx 이런식으로 되겠죠..

11. 아래 번호 순서대로 따라하세요.

사용자 삽입 이미지



12. 아래 번호 순서대로 따라하세요..

사용자 삽입 이미지



13. 설명 7에서 동기화가 안된다고 했던 Silverlight.js, TestPage.html, TestPage.html.js 파일들을 WebService_sample에서 WebService로 복사합니다..

14. 설명 4에서 작성했던 Page.xaml.cs 코드의 주석 부분을 아래 코드와 같이 작성합니다..

 void btn_MouseLeftButtonDown(object sender, MouseEventArgs e)
 {
        //이곳에서 웹서비스의 메소드를 호출할 것입니다.
        localhost.Service1 service = new WebService_sample.localhost.Service1();
        txt.Text = service.HelloWorld();
 }

15. 마지막으로 Service1.asmx.cs 파일의 // [System.Web.Script.Services.ScriptService] 부분의 //를 삭제합니다..(주석제거)
자바스크립트 사용을 가능하게 하는 구문입니다..

16. Shift + F5를 눌러 실버라이트 페이지를 확인해 보겠습니다..
(Directory Listing -- /  이 나온다면
 TestPage.html 을 클릭하세요..)

모든 과정이 제대로 됐다면, 아래와 같이 버튼을 클릭 했을 때 Hello World 가 표시됩니다..

사용자 삽입 이미지

수고하셨습니다..^^

p.s. 첨부한 파일에는 두개의 문자열을 받아서 그 문자열을 합한 후 되돌려주는 메소드를 하나 더 추가했습니다..

아..메소드를 추가한 다음에는 웹서비스 프로젝트를 빌드하고 실버라이트에서 웹서비스 업데이트를 꼭 해줘야 합니다..Good luck~!! ^^

반응형