Drag-Drop Data Binding to Silverlight 4


Prerequisites

ใน Silverlight 4 เราสามารถผูกข้อมูลได้ง่ายๆ เพียง คลิก – ลาก – วาง เหมือนใน WPF

หน้าจอ ผูกข้อมูลคลิก – ลาก – วาง

16

 

หน้าจอ โหลดข้อมูล

23

ไปดูวิธีการสร้างกันเลยครับ

 

ขั้นตอนการสร้างแอปพลิเคชัน

  • ขั้นตอนที่ หนึ่ง: สร้างโซลูชันโดยเปิดใช้งาน RIA Services
  • ขั้นตอนที่ สอง: สร้าง Data Models
  • ขั้นตอนที่ สาม: สร้าง Domain Service
  • ขั้นตอนที่ สี่: สร้าง Silverlight Client
  • ขั้นตอนที่ หก: ผูกข้อมูลบน Silverlight โดยการคลิก – ลาก – วาง (Drag-Drop Data Binding)
  • ขั้นตอนที่เจ็ด: ปรับแต่ง DataGrid

 

ขั้นตอนที่ หนึ่ง: สร้างโซลูชันโดยเปิดใช้งาน RIA Services

1. บน VS2010 สร้าง RIA Services project โดยเลือก File=> New=> Project
2. Silverlight Application template and name the new project RIAServicesExample

1

3. คลิก OK

4. จะมีหน้าต่าง New Silverlight Application ให้เลือก  Enable WCF RIA Services เพื่อสร้าง RIA Services link ระหว่าง client project และ server project.

2

5. คลิก OK เพื่อสร้างโซลูชัน

ในโซลูชัน เราจะได้สองโปรเจ็กต์ คือโปรเจ็กต์ฝั่งไคลเอ็นต์ชื่อ Drag-DropDataBindingToSilverlight4 เป็นโปรเจ็กต์ที่บรรจุโค้ด Silverlight สำหรับสร้าง  presentation tier และ
โปรเจ็กต์ฝั่งเซอร์ฟเวอร์ชื่อ Drag-DropDataBindingToSilverlight4.Web เป็นโปรเจ็กต์บรรจุโค้ด  middle-tier

3

 

ขั้นตอนที่ สอง: สร้าง Data Models

ในส่วนนี้เป็นการสร้างคลาส ADO.NET Entity เพื่อดึงข้อมูลจากฐานข้อมูล Northwind โดย RIA Services  จะเข้าถึงข้อมูลผ่านทาง Data Models นี้ โดยมีขั้นตอนดังนี้

1.ใน Solution Explorer คลิกขวาบนโปรเจ็กต์ เซิร์ฟเวอร์  (RIAServicesExample.Web) เลือก Add  และเลือก Add New Item… แล้ว กล่องโต้ตอบเพิ่มรายการใหม่ (Add New Item)ปรากฏขึ้น

 4

2. ในรายชื่อของประเภทเทมเพลตเลือก Data และจากนั้น เลือกแบบ ADO.NET Entity Data Model

3. ชื่อไฟล์ใหม่ ในที่นี้ขอใช้ชื่อ Default และคลิก Add แล้ว ตัวช่วยสร้างแบบจำลองข้อมูลเอ็นติตี้(Entity Data Model Wizard) ปรากฏขึ้น

5

4.ในหน้าจอ เลือกเนื้อหา Model (Choose Model Contents) เลือกสร้างจากฐานข้อมูล และคลิก Next

6

5.ในหน้าจอเลือกการเชื่อมต่อข้อมูลของคุณสร้างการเชื่อมต่อข้อมูลไปยังฐานข้อมูล และคลิก Next

6.ในหน้าจอเลือกวัตถุฐานข้อมูล (Choose Your Database Objects) ของคุณเลือกตารางสินค้า(Products)

7

7.คลิก Finish

แล้วแบบจำลองของเอนทิตี้สำหรับตาราง จะถูกสร้าง ณ ที่นี้ 

 8

8.Build โซลูชัน หนึ่งครั้งเพื่อสร้างคลาสแบบจำลองเมื่อสักครู่

 

ขั้นตอนที่ สาม: สร้าง Domain Service

ในส่วนนี้เราจะเพิ่ม domain service สำหรับ  middle-tier  เพื่อ exposes the data entities และ operations ต่างๆ ในโปรเจ็กต์เซอร์ฟเวอร์ ไปสู่โปรเจ็กต์ไคลเอ็นต์ เราสามารถเพิ่ม
ในส่วนของ business logic ให้ domain service เพื่อจัดการ และควบคุมไคลเอ็นต์การในการเข้าถึงข้อมูล

1.คลิกขวา บนโปรเจ็กต์ เซิร์ฟเวอร์เลือก Add  และ New Item

2.ในรายชื่อของประเภทเท็มเพลต เลือก Web และจากนั้น เลือกเท็มเพลต  Domain Service Class

9  

3.ทำการตั้งชื่อใหม่ ในที่นี้ขอใช้ชื่อ Default  DomainService1.cs

4. คลิก Add กล่องโต้ตอบ  Add New Domain Service Class ปรากฏขึ้น

5. ติ๊กเลือก Enable client access และ เลือก Products Entity

10

6. คลิก OK

VS2010 จะสร้างคลาสให้ดังนี้ และมีเมธอดสำหรับอ่านข้อมูล ชื่อ GetProducts()

11

 

ขั้นตอนที่ สี่: สร้าง Silverlight Client

เนื่องจากมีการเชื่อมโยง RIA Services อยู่ระหว่างโปรเจ็กต์ไคลเอ็นต์ และโปรเจ็กต์เซิร์ฟเวอร์ คลาสที่พร็อกซีไคลเอ็นต์จะถูกสร้างขึ้นเมื่อเรา build โซลูชัน คลาสที่พร็อกซีเหล่านี้ ช่วยให้เราสามารถเข้าถึงข้อมูลจากฝั่งไคลเอ็นต์ได้

1. Build โซลูชัน
2. ในโปรเจ็กต์ ไคลเอ็นต์ คลิกแสดงแฟ้มทั้งหมด แล้วเข้าไปในโฟลเดอร์ Generated_Code เราจะเห็นคลาสพร็อกซี ที่สร้างขึ้นเรียบร้อยแล้ว

12

 

ขั้นตอนที่ หก: ผูกข้อมูลบน Silverlight โดยการคลิก – ลาก – วาง (Drag-Drop Data Binding)

ในส่วนนี้เราจะทำการผูกข้อมูลให้คอนโทรล DataGrid ด้วยการคลิก – ลาก – วาง ตามเป้าประสงค์ของบทความนี้

1. ในโปเจ็กต์ไคลเอ็นต์ ให้คลิกเปิดไฟล์ ViewHome.xaml

2. ไปที่เมนู Data เลือก Show Data Source

13 

3.เราจะได้กล่องของ DataSource  จะเห็นข้างในมี DataSource ชื่อ DomainServices1 ซึ่งได้จาก คลาสพร็อกซี นั่นเอง

14

4. ไฟล์ datasource อยู่ที่โฟลเดอร์ Properties >DataSources>Drag_DropDataBindingToSilverlight4.Web.DomainService1.datasource

15

 

5. ให้เรากลับมาที่ไฟล์ Home.xaml และเปิดกล่อง DataSource คลิกบน DomainServices1 จะเห็น Entity Products อยู่หนึ่งอ็อบเจ็กต์ ตามที่เราได้สร้างไว้ตั้งแต่การสร้าง Data Model เราสามารถผูกข้อมูลได้สองมุมมอง กล่าวคือ แบบ DataGrid และแบบ Detail

6. ผูกข้อมูลแบบ DataGrid จะอยู่ในรูปของคอลัมน์ และ แถว

16

 

7. ผูกข้อมูลแบบ Detail จะอยู่ในรูปของ Label และTextBox

17

 

8. ในบทความนี้เราจะใช้แบบ DataGrid โดยคลิกที่เมนู ดรอบดาวน์ เลือกแบบเป็น DataGrid จากนั้นคลิกอ็อบเจ็กต์ Products  แล้วลาก ไปวางบนไฟล์ Home.xaml VS2010 จะทำการสร้างคอนโทรล DataGrid และทำการผูกข้อมูลให้เรียบร้อย เพียงเท่านี้เราก็สามารถโหลดข้อมูลได้แล้วครับ

18

แต่ยังก่อน ท่านผู้อ่านจะเห็นว่ายังมีบางคอลัมน์ที่เราไม่จำเป็นต้องแสดง เช่น CategoryID  ให้เราไปทำการปรับแต่งคอนโทรล DataGrid สักเล็กน้อย

ขั้นตอนที่เจ็ด: ปรับแต่ง DataGrid

1. ให้คลิกขวาบนคอนโทรล DtaaGrid => Properties> Columns> Columns> (Collection)  จะได้หน้าต่าง Collection Editor

2. ลบคอลัมน์ ออกได้

19

3. จัดเรียงลำดับของคอลัมน์

20

 

4.ผลที่ได้จากการปรับแต่งคอนโทรล DataGrid

21

 

5. VS2010 อยู่เบื้องหลังในการจัดการ โค้ด xaml แทนเรา

22

 

ทดสอบรันจะได้ผลดังรูป

23

 

ขอให้สนุกกับการใช้งาน Silverlight นะครับ

 

แหล่งข้อมูลดาวน์โหลด:

http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/11-21-2009_Drag-DropDataBindingToSilverlight4.zip

 

ผู้เขียน:
nano_mvp_2009_1

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Silverlight

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: