Silverlight2 Master Detail with WCF and LINQ


 

ใช้กับ

  • Visual Studio 2008
  • Microsoft Expression Blend 2.5 March 2008 Preview
  • Microsoft SQL Server 2005 EXPRESS
  • .NET Framework 3.5

บทนำ

เป็นบทความที่ผมเขียนตีพิมพ์ลง นิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน มิถุนายน 2551] ซึ่งผมได้ขออนุญาตในการนำบทความไปเผยแพร่จากทางสำนักพิมพ์เป็นที่เรียบร้อยแล้ว ติดตามกันได้เลยครับ:

จากบทความ Silverlight2 RIA WCF and LINQ ในนิตยสาร CODE IT ฉบับก่อนหน้านี้เป็นการกล่าวถึง การพัฒนาแอพพลิเคชันแบบ Rich Internet Application (RIA) ด้วย Silverlight2 (ผู้เขียนขอเรียกสั้นๆ ว่า SL2) ซึ่งผู้เขียนได้เล่าถึงการใช้งานคอนโทรล DataGrid ในการแสดงข้อมูลผ่าน LINQ และ WCF โดยใช้คอนโทรลเพียงหนึ่งตัว มาในบทความฉบับนี้ผู้เขียนขอเล่าความ ต่อยอดและขยายความจากครั้งที่แล้ว เราจะมาทำงานกับข้อมูลผ่านคอนโทรลสองตัวอันได้แก่ คอนโทรล DataGrid และ คอนโทรล ListBox โดยแสดงข้อมูลในรูปแบบของความสัมพันธ์แบบแม่และลูก (Master Detail) และท่านผู้อ่านจะได้ใช้งานเครื่องมือมีระดับอีกชิ้นหนึ่งนั่นคือ Microsoft Expression Blend 2.5 March 2008 Preview (ผู้เขียนขอเรียกสั่นๆ ว่า Expression Blend) ซึ่งเป็นเวอร์ชันแสดงก่อนออกโรงของเวอร์ชันจริง ท่านผู้อ่านสามารถดาวน์โหลดมาทดสอบ และศึกษาได้ฟรี ซึ่งถ้าเมื่อเทียบเคียงระหว่าง Expression Blend และ VS2008 สามารถกล่าวได้ว่า Expression Blend เป็นเครื่องมือมีระดับของเหล่านักออกแบบ (Designers) สำหรับใช้ในการออกแบบหน้าตา(Graphical user interface: GUI) ของแอพพลิเคชั่นให้หรูหราได้ตามใจต้องการ และ VS2008 เป็นเครื่องมือมีระดับของเหล่านักพัฒนา (Developers) สำหรับใส่โค้ดสั่งการให้หน้าจอของแอพพลิเคชันสามารถปฏิบัติการตามเป้าหมาย ดังที่เราได้ตั้งเป้าไว้แล้ว

เป้าประสงค์ของการพัฒนาแอพพลิเคชันในบทความนี้ คือการแสดงข้อมูลแบบแม่ และลูก โดยใช้ข้อมูลตัวอย่างในฐานข้อมูล Northwind บน SQL Server 2005 EXPRESS ข้อมูลแม่ได้แก่ตาราง Categories (ข้อมูลประเภทสินค้า) ข้อมูลลูกได้แก่ตาราง Products (ข้อมูลสินค้า) โดยข้อมูลแม่เราจะโยนเข้าไปผูกไว้กับคอนโทรล ListBox และข้อมูลลูกจะโยนเข้าไปผูกเข้ากับคอนโทรล DataGrid และทำการใส่โค้ดสั่งให้ เมื่อเราทำการเลือกข้อมูลแม่บนคอนโทรล ListBox แล้วให้ข้อมูลลูกในคอนโทรล DataGrid ปรับเปลี่ยนตาม โดยวิธีการรับส่งข้อมูลไคลเอ็นต์จะยิงผ่านทาง WCF Service และ LINQ หน้าตาของแอพพลิเคชันตามเป้าประสงค์นี้ได้ถูกบันทึกไว้แล้วในรูปที่ 1 หน้าตาแอพพลิเคชันความสัมพันธ์แบบแม่และลูก

 

1

รูปที่ 1. หน้าตาแอพพลิเคชันความสัมพันธ์แบบแม่และลูก

 

จากรูปที่ 1 กล่าวได้ว่า

เมื่อเราทำการปรับเปลี่ยนข้อมูลแม่ ซึ่งคือข้อมูลประเภทสินค้าบนคอนโทรล ListBox จะส่งผลให้ข้อมูลที่เป็นลูก ซึ่งคือข้อมูลสินค้าจะปรับเปลี่ยนตามแม่ของมัน

 

สำรวจความพร้อมอีกสักครั้งก่อนลงมือพัฒนาแอพพลิเคชัน

เครื่องไม้เครื่องมือที่ใช้ในบทความนี้

 

เมื่อท่านผู้อ่านเตรียมเครื่องไม้เครื่องมือสำหรับการพัฒนาแอพพลิเคชันเรียบร้อยแล้ว ผู้เขียนขอนำท่านผู้อ่านเข้าสู่ขั้นตอนการพัฒนาแอพพลิเคชัน ซึ่งผู้เขียนขอแบ่งขั้นตอนต่างๆ ออกเป็นดังต่อไปนี้ เพื่อความง่ายการในเล่าความ และเพื่อให้ท่านผู้อ่านรู้สึกถึงความกระจ่างอย่างเป็นขั้นตอน

ขั้นตอนการพัฒนาแอพพลิเคชันในบทความ

  • ขั้นตอนที่หนึ่ง: สร้างโปรเจ็กต์ Silverlight2 ด้วย VS2008
  • ขั้นตอนที่สอง: ออกแบบหน้าจอแอพพลิเคชันด้วย Expression Blend
  • ขั้นตอนที่สาม: สร้าง LINQ และ WCF
  • ขั้นตอนที่สี่: การผูกข้อมูลให้คอนโทรล ListBox
  • ขั้นตอนที่ห้า: ใส่โค้ดให้หน้าแอพพลิเคชันทำงานตามเป้าประสงค์

 

ขั้นตอนที่หนึ่ง: สร้างโปรเจ็กต์ Silverlight2 ด้วย VS2008

หากท่านผู้อ่านได้ติดตามบทความ Silverlight2 RIA WCF and LINQ ในนิตยสาร CODE IT ฉบับก่อนหน้านี้ ผู้เขียนได้กล่าวถึงวิธีการสร้างโปรเจ็กต์ที่เป็นประเภท Silverlight Application แล้ว พอสมควร ท่านผู้อ่านสามารถติดตามได้จากบทความฉบับก่อนหน้านี้ ผู้เขียนไม่ขอกล่าวถึงในบทความนี้

บทความนี้ผู้เขียนขอใช้ชื่อโซลูชันว่า SL2_MasterDetail ซึ่งผู้เขียนได้ทำการบันทึกเป็นภาพเรียบร้อยแล้วดังรูปที่ 2 โซลูชัน SL2_MasterDetail บน VS2008 เป็นโซลูชันที่เปิดทำงานบน VS2008 และรูปที่ 3 โซลูชัน SL2_MasterDetail บน Expression Blend เป็นโซลูชันตัวเดียวกันแต่เปิดทำงานบน Expression Blend ซึ่งเหตุการณ์ที่จะเล่าความต่อไปนี้เป็นการใช้งานเครื่องมือทั้งสองตัวร่วมประสานกันในการพัฒนาแอพพลิเคชัน

2

รูปที่ 2. โซลูชัน SL2_MasterDetail บน VS2008

 

จากรูปที่ 2 กล่าวได้ว่า

โซลูชัน SL2_MasterDetail บน VS2008 สำหรับเหล่านักพัฒนาใช้ในการใส่โค้ดเพื่อสั่งการให้หน้าตาแอพพลิเคชันสามารถประพฤติตามเป้าประสงค์ของเรา โดยในโซลูชัน SL2_MasterDetail มีสอง

โปรเจ็กต์แต่ละโปรเจ็กต์มีหน้าที่ดังนี้

  • โปรเจ็กต์ SL2_MasterDetail_Web เป็น ASP.NET ทำงานฝั่งเซอร์ฟเวอร์ คอยรับการร้องขอ และให้บริการข้อมูลให้กับไคลเอนต์ผ่านทาง WCF Service และติดต่อข้อมูลส่วนกลางผ่านทาง LINQ
  • โปรเจ็กต์ SL2_MasterDetail เป็น RIA แอพพลิเคชันโดยใช้เทคโนโลยี Silverlight 2 ทำงานฝั่งไคลเอ็นต์ และหรูหราเสมือนโปรแกรมบนเดสก์ทอป ทำหน้าร้องขอและยิงสัญญาณขอข้อมูลผ่าน WCF ส่งไปให้เซอร์ฟเวอร์

3

รูปที่ 3. โซลูชัน SL2_MasterDetail บน Expression Blend

 

จากรูปที่ 3 กล่าวได้ว่า

โซลูชัน SL2_MasterDetail บน Expression Blend สำหรับนักออกแบบใช้ในการออกแบบหน้าตาแอพพลิเคชัน เพื่อส่งให้นักพัฒนาใส่โค้ดให้ทำงานตามเป้าประสงค์ ซึ่งในบทความนี้ ผู้เขียนจะนำท่านผู้อ่าน แปลงร่างเป็นสองร่าง กล่าวคือร่างหนึ่งทำหน้าที่เป็นนักพัฒนาในการใช้ VS2008 ใส่โค้ดโปรแกรม และอีกหนึ่งร่างนั้นเป็นนักออกแบบใช้งาน Expression Blend ในการออกแบบหน้าตาแอพพลิเคชัน เพื่อส่งให้นักพัฒนาใส่โค้ดต่อไป

 

ขั้นตอนที่สอง: ออกแบบหน้าจอแอพพลิเคชันด้วย Expression Blend

เหตุการณ์ในหัวข้อขั้นตอนที่สองนี้ผู้เขียนขอแปลงร่างเป็นนักออกแบบ และขอเล่าความนำท่านผู้อ่าน เข้าสู่การออกแบบหน้าตาแอพพลิเคชันโดยใช้เครื่องมือ Expression Blend ซึ่งเป็นดังที่กล่าวไปแล้วว่า เราต้องแปลงร่างเป็นสองร่าง กล่าวคือร่างหนึ่งเป็นนักออกแบบ และอีกร่างหนึ่งเป็นนักพัฒนา นั่นหมายความว่าเราก็สามารถใช้งานเครื่องมือทั้ง Expression Blend และ VS2008 ในการพัฒนาแอพพลิเคชันไปพร้อมๆ กันได้ กล่าวคือให้เราทำการเปิดโซลูชัน SL2_MasterDetail บนทั้งสองเครื่องมือดังจะเล่าความไปนี้

จากขั้นตอนที่หนึ่งเมื่อเราทำการสร้างโปรเจ็กต์ Silverlight2 ด้วย VS2008 เรียบร้อยแล้ว นั่นคือตอนนี้โซลูชัน SL2_MasterDetail ของเราทำงานอยู่บน VS2008 ผู้เขียนต้องแปลงกายเป็นนักออกแบบ เพื่อทำการออกแบบหน้าตาแอพพลิเคชัน SL2 บนโซลูชัน SL2_MasterDetail ให้เลื่อนเมาส์มาเลือกโปรเจ็กต์ SL2_MasterDetail ซึ่งเป็นโปรเจ็กต์ Silverlight 2 ให้ทำการคลิกเมาส์ขวาบนไฟล์ Page.xaml จากนั้นทำการเลือกเมนู Open in Expression Blend… เพื่อเปิด โซลูชัน SL2_MasterDetail บน Expression Blend ซึ่งผู้เขียนได้ทำการบันทึกเป็นภาพเรียบร้อยแล้วดังรูปที่ 3. โซลูชัน SL2_MasterDetail บน Expression Blend

โดยดีฟอลต์แล้วกล่องเครื่องมือ(Tools Box) ใน Expression Blend จะไม่โชว์คอนโทรล DataGrid ให้เห็นเราต้องทำการอ้างอิง ไลบรารี System.Windows.Controls.Data.dll เข้ามาใน Expression Blend ก่อน กล่องเครื่องมือจึงสามารถแสดงคอนโทรลให้เรานำไปใช้งาน วิธีการอ้างอิงไลบรารี System.Windows.Controls.Data.dll ผู้เขียนได้ทำการบันทึกเป็นภาพเรียบร้อยแล้วดังรูปที่ 4 วิธีการอ้างอิงไลบรารี System.Windows.Controls.Data.dll

4

รูปที่ 4. วิธีการอ้างอิงไลบรารี System.Windows.Controls.Data.dll

 

จากรูปที่ 4 กล่าวได้ว่า

  1. บนเครื่องมือ Expression Blend คลิกเมาส์ไปที่เมนู Project
  2. จากนั้นเลือกเมนู Add Reference
  3. บราวไปที่พาธ C:Program FilesMicrosoft SDKsSilverlightv2.0LibrariesClient แล้วเลือกไลบรารี System.Windows.Controls.Data.dll
  4. คลิกไปที่กล่องเครื่องมือตรงเครื่องหมาย Asset Library เมื่อโชว์หน้าต่าง Asset Library ช่อง Search ให้พิมพ์ dat จะเห็นคอนโทรล DataGrid เป็นอันแรก ให้ทำการคลิกลงบน DataGrid เพียงเท่านี้ DataGrid จะมาโชว์ในกล่องเครื่องมือ ให้เราสามารถนำไปใช้งานแล้ว

จากรูปที่ 3 โซลูชัน SL2_MasterDetail บน Expression Blend ในไฟล์ Page.xaml ในโหมดออกแบบ(Design) ให้เราทำการลากคอนโทรล TextBlock คอนโทรล ListBox และคอนโทรล DataGrid ไปวางบน LayoutRoot ดังภาพที่ได้บันทึกไว้ในรูปที่ 5 ออกแบบหน้าจอบน Expression Blend

5

รูปที่ 5. ออกแบบหน้าจอบน Expression Blend

 

จากรูปที่ 5 กล่าวได้ว่า

ให้ลากคอนโทรล TextBlock ไปวางบน LayoutRoot สองอันแล้วทำการปรับพรอพเพอร์ตีดังนี้:

text

ในหน้าต่าง Objects and Timeline ให้ปรับพรอพเพอร์ตีของ [UserControl] ในหน้าต่าง Properties ให้คลิกเมาส์บน LayoutRoot จากนั้นกำหนด พรอพเพอร์ตี ดัวนี้ Width = Auto, Height = Auto, HorizontalAlignment = Stretch ,VerticalAlignment = Stretch และปรับพรอพเพอร์ตีของ LayoutRoot ใส่สี Background ให้เลือกเฉดสีเป็น Gradient brush จากนั้นให้ปรับสีเฉดสีตามใจต้องการ ในบทความนี้ผู้เขียนขอใช้เฉดสีเป็นสีน้ำเงิน

ปรับพรอเพอร์ตี้ของคอนโทรล ListBox ตามภาพที่ได้บันทึกไว้ในรูปที่ 6 ปรับพรอเพอร์ตี้ของคอนโทรล ListBox

ปรับพรอเพอร์ตี้ของคอนโทรล DataGrid ตามภาพที่ได้บันทึกไว้ในรูปที่ 7 ปรับพรอเพอร์ตี้ของคอนโทรล DataGrid

6

รูปที่ 6. ปรับพรอเพอร์ตี้ของคอนโทรล ListBox

 

จากรูปที่ 6 สามารถกล่าวได้ว่า

บนคอนโทรล ListBox ตั้งชื่อเป็น listbox_Master ความกว้างกำหนด 300 ความสูงกำหนดให้เป็นอัตโนมัติ(Auto) และกำหนดให้ชิดขวา และติดด้านบน ตรงอีเวนท์(เครื่องหมายฟ้าผ่า) ให้ใช้เมาส์ดับเบิ้ลคลิกบนอีเวนท์ SelectionChanged มันจะกระโดดไปเปิด VS2008 ให้และเจนเนอเรต อีเวนท์ ดังนี้ ไว้ใส่โค้ดเมื่อเราทำการปรับเปลี่ยนข้อมูลแม่ ให้ข้อมูลลูกปรับเปลี่ยนตาม ซึ่งจะกล่าวถึงในไม่ช้า

อีเวนท์ SelectionChanged

private void listbox_Master_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

}

เมื่อทำการปรับพรอเพอร์ตี้เรียบร้อย เบื้องหลังมันจะเจนโค้ด XAML ให้ดังนี้

<ListBox HorizontalAlignment="Left" Margin="8,23,0,0" VerticalAlignment="Top" Width="300" x:Name="listbox_Master" SelectionChanged="listbox_Master_SelectionChanged" />

7

รูปที่ 7. ปรับพรอเพอร์ตี้ของคอนโทรล DataGrid

 

จากรูปที่ 7 สามารถกล่าวได้ว่า

บนคอนโทรล DataGrid ให้ตั้งชื่อเป็น dataGrid_Detail กำหนดความกว้าง และสูงเป็นอัตโนมัติ และให้ชิดซ้าย-ขวา บน- ล่าง และกำหนดให้เจนคอมลัมน์อัตโนมัติตอนบรรจุข้อมูล จากการปรับดังกล่าวเบื้องหลังมันเจนโค้ด XAML ให้ดังนี้

<System_Windows_Controls:DataGrid Margin="8,26.5370006561279,8,52" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="dataGrid_Detail" AutoGenerateColumns="True"/>

 

ขั้นตอนที่สาม: สร้าง LINQ และ WCF

จากบทความ Silverlight2 RIA WCF and LINQ ในนิตยสาร CODE IT ฉบับก่อนหน้านี้ ผู้เขียนได้กล่าวถึงการสร้าง LINQ และ WCF Service พอสมควร ในบทความฉบับนี้ขออนุญาตเกริ่นย่อๆ เพื่อความง่ายในการเล่าความนำเสนอต่อท่านผู้อ่าน ดังนี้

ในขั้นตอนนี้ผู้เขียนต้องแปลงกายเป็นนักพัฒนาให้เรากระโดดไปทำงานบน VS2008 บนโปรเจ็กต์ SL2_MasterDetail_Web ซึ่งเป็นแอพพลิเคชัน ASP.NET ทำงานฝั่งซอร์ฟเวอร์เพื่อบริการการร้องขอข้อมูลจากไคลเอ็นต์ เราจะมาสร้าง LINQ และ WCF เพื่อให้แอพพลิเคชันเซอร์ฟเวอร์ของเราสามารถให้บริการดังกล่าว

สร้าง LINQ

ให้ทำการคลิกเมาส์ขวาบนโปรเจ็กต์ SL2_MasterDetail_Web เลือกเมนู Add New Item…และเลือกเทมเพล็ต LINQ to SQL Classes ตั้งชื่อเป็น DataClasses.dbml จากนี้ในหน้าต่างออกแบบ dbml ให้สร้างคอนเนคชันชี้ไปที่ฐานข้อมูล Northwind เมื่อสร้างคอนเนคชันเรียบร้อย ให้ทำการลากตารางCategories และตารางProducts มาวางบน dbml จากนั้นให้ทำการเปลี่ยนโหมด Serailzation จาก None ไปเป็น Unidirectional เพื่อให้สามารถส่งข้อมูลผ่าน WCF ได้ แล้วให้ทำการบันทึก และบิลด์หนึ่งครั้งเพื่อให้ VS2008 แมปข้อมูลตารางไปเป็นอ็อบเจ็กต์ ให้เราสามารถทำงานกับข้อมูลได้ง่ายขึ้นตามคอนเซ็ปต์ของ LINQ ที่ว่าแมปข้อมูลในรูปแบบตารางให้เป็นรูปแบบอ็อบเจ็กต์เพื่อให้ง่ายในการทำงานกับข้อมูล

สร้าง WCF Service

Add New Item…เลือกเทมเพล็ต WCF Service ตั้งชื่อเป็น Service.svc จากนั้นเข้าไปในโฟล์เดอร์ App_Code เปิดไฟล์ IService.cs ซึ่งเป็นอินเทอร์เฟซ (interface) ของ WCF Service ใน ServiceContract ให้เราเพิ่ม OperationContract สองตัวนี้เข้าไป

[ServiceContract]
public interface IService
{
   
//[OperationContract]
    //void DoWork();

   
[OperationContract]
   
List<Category> GetCategory();

    [OperationContract]
   
List<Product> GetProductByCategoryID(int CatID);
   
}

เมื่อได้อินเทอร์เฟซ เราก็มาทำการอิมพลีเมนต์โดยเปิดไฟล์ Service.cs ในพาธเดียวกัน ให้คลิกเมาส์ขวาบน IService เลือกเมนู Impletment Interface จากนั้นเลื่อนเมาส์ไปเลือกเมนู Implement Interface VS2008 จะทำการเจนโค้ดการอิมพลีเมนต์ ให้ดังนี้

เจนโค้ดการอิมพลีเมนต์: 

public class Service : IService
{
 
     public void DoWork()
     {

     }



   
#region IService Members

    public List<Category> GetCategory()
   
{

       

       throw new NotImplementedException();
      
   
}

    public List<Product> GetProductByCategoryID(int CatID)
   
{

              

       throw new NotImplementedException();

   
}

    #endregion

}

 

ให้ทำการใส่โค้ดเพื่อให้บริการ(Service) ของเราทำงาน ดังนี้:

โค้ดการอิมพลีเมนต์สมบูรณ์:

 

public class Service : IService
{

    //public void DoWork()

   
//{

   
//}

   
#region IService Members

    public List<Category> GetCategory()
   
{

        //throw new NotImplementedException();

       
//การใช้ บล็อก using กล่าวคือเมื่อออกจาก บล็อก using ตัวแปรต่างๆที่มีการประกาศใช้ เราไม่ต้องคืนค่าให้ระบบ

       
//.NetFramework จะจัดการทำลายทิ้งไปเอง หรือกล่าวอีกนัยหนึ่งว่าเป็นการใช้ LINQ แบบ Disconnect

       
using (DataClassesDataContext db = new DataClassesDataContext())
       
{

            //ส่งข้อมูลประเภทสินค้ากลับในรูปแบบ List
           
return db.Categories.ToList();

        }

    }

    public List<Product> GetProductByCategoryID(int CatID)
   
{

        //throw new NotImplementedException();

       
using (DataClassesDataContext db = new DataClassesDataContext())
       
{

            //ดึงข้อมูลสินค้า ตามรหัสประเภทสินค้าแล้วส่งกลับในรูปแบบ List

           
var q = from t in db.Products where t.CategoryID == CatID select t;

            return q.ToList();

        }

    }

    #endregion

}

 

แก้ไข web.config

เพื่อให้ Silverlight และ WCF สามารถสื่อสารกันเข้าใจและสามารถรับส่งข้อมูลได้ เรามาทำการแก้ไขชนิดการผูกข้อมูล (Binding) จาก wsHttpBinding เป็น basicHttpBinding กล่าวคือใน Silverlight ซัพพอร์ตการ binding แบบ basicHttpBinding เท่านั้น เนื่องจากใน SOAP 1.1 endpoint Service ใช้การ binding แบบ Basic HTTP Binding นั่นเอง

 

ขั้นตอนที่สี่: การผูกข้อมูลให้คอนโทรล ListBox

เมื่อเราทำการสร้าง LINQ และ WCF เรียบร้อยเราต้องมาทำการผู้ข้อมูลให้ ListBox ให้เราใส่โค้ดXAML ดังนี้

การผูกข้อมูลให้คอนโทรล ListBox:

<ListBox HorizontalAlignment="Left" Margin="8,23,0,0" VerticalAlignment="Top" Width="300" x:Name="listbox_Master" SelectionChanged="listbox_Master_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding CategoryID}"  />
                    <TextBlock Text="{Binding CategoryName}" />    
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
</ListBox>

การผูกข้อมูลให้คอนโทรลใน Silverlight 2 สามารถศึกษาเพิ่มเติมได้บนบล็อกของคุณ Scottgu http://weblogs.asp.net/scottgu , http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx และจาก msdn http://msdn.microsoft.com/en-gb/library/cc278072(vs.95).aspx

 

ขั้นตอนที่ห้า: ใส่โค้ดให้หน้าแอพพลิเคชันทำงานตามเป้าประสงค์

ในขั้นตอนที่ห้าเรามาทำการใส่โค้ดในโปรเจ็กต์ SL2_MasterDetail ซึ่งเป็น Silverlight ทำงานฝั่งไคลเอ็นต์ เราต้องทำการอ้างอิง WCF Service มาเก็บไว้ฝั่งไคลเอ็นต์เพื่อให้ไคลเอ็นต์สามารถสื่อสารกับฝั่งเซอร์ฟเวอร์ได้ หรือถ้าจะกล่าวให้เกิดความกระจ่างโดยไม่อ้างอิงจากตำราเล่มใดๆ การอ้างอิง WCF Service คือการอ้างฟังก์ชันข้ามเครื่องนั่นเอง

การอ้างอิงบริการ

บนโปรเจ็กต์ SL2_MasterDetail ให้คลิกบนเมนู References และเลือกเมนู Add Service Reference จากนั้นในหน้าต่าง Add Service Reference ให้กดปุ่ม Discover และปุ่ม OK ดังที่ผู้เขียนได้บันทึกเป็นภาพแสดงในรูปที่ 8 การอ้างอิง WCF Service

8

รูปที่ 8. การอ้างอิง WCF Service

 

ใส่โค้ดให้แอพพลิเคชันทำงาน

บน VS2008 ให้เปิดไฟล์ Page.xaml.cs ในโปรเจ็กต์ SL2_MasterDetail แล้วทำการเพิ่มอีเวนท์ Page_Loaded โดยพิมพ์ Loaded ตามด้วยเครื่องหมาย บวกเท่ากับ(+=) จากนั้นกดปุ่ม TAB บนคีย์บอร์ด VS2008 จะเจนโค้ด Page_Loaded ให้อัตโนมัติดังภาพที่ผู้เขียนได้บันทึกแสดงไว้ในรูปที่ 9กดปุ่ม TAB เพื่อเจนโค้ดอัตโนมัติ

9

รูปที่ 9. กดปุ่ม TAB เพื่อเจนโค้ดอัตโนมัติ

 

โค้ดสมบูรณ์เป็นดังนี้:

namespace SL2_MasterDetail
{

    public partial class Page : UserControl
   
{
       
public Page()
       
{
           
InitializeComponent();
           
//เพิ่มอีเวนท์ Page_Loaded
            Loaded += new RoutedEventHandler(Page_Loaded);
       
}

        //อีเวนท์ Page_Loaded
        void Page_Loaded(object sender, RoutedEventArgs e)
       
{
           
//throw new NotImplementedException();
            ServiceReference1.ServiceClient svc = new SL2_MasterDetail.ServiceReference1.ServiceClient();
           
//กำหนดการผูกข้อมูลให้สามารถสื่อสารกันระหว่าง Silverlight และ WCF
            System.ServiceModel.BasicHttpBinding Binding = new System.ServiceModel.BasicHttpBinding();
           
Binding.MaxBufferSize = 2000000;
           
Binding.MaxReceivedMessageSize = 2000000;
           
svc.Endpoint.Binding = Binding;
           
//ไคลเอนต์ยิงสัญญาณและดึงข้อมูล ผ่าน WCF
            svc.GetCategoryCompleted += new EventHandler<SL2_MasterDetail.ServiceReference1.GetCategoryCompletedEventArgs>(svc_GetCategoryCompleted);
           
svc.GetCategoryAsync();
       
}

        void svc_GetCategoryCompleted(object sender, SL2_MasterDetail.ServiceReference1.GetCategoryCompletedEventArgs e)
       
{

            // throw new NotImplementedException();
            //ใส่ข้อมูล Category ให้ listbox_Master
            listbox_Master.ItemsSource = e.Result.ToList();

        }

        private void listbox_Master_SelectionChanged(object sender, SelectionChangedEventArgs e)
       
{
           
//ถ้ารายการที่เลือกเป็นข้อมูลประเภทเดียวกับ Category ให้เข้าบล็อก if{}
            if (listbox_Master.SelectedItem is SL2_MasterDetail.ServiceReference1.Category)
           
{
               
//ประกาศตัวแปร catID เป็น Int
                //หล่อ(cast)ค่าข้อมูลใน listbox_Master ที่เลือกเป็นข้อมูลประเภท Category แล้วดึงเฉพาะ CategoryID ไปใส่ใน ตัวแปร catID
                int catID = (int)((SL2_MasterDetail.ServiceReference1.Category)listbox_Master.SelectedItem).CategoryID;
               
SL2_MasterDetail.ServiceReference1.ServiceClient sc = new SL2_MasterDetail.ServiceReference1.ServiceClient();

                //ยิงสัญญาณและดึงข้อมูล ผ่าน WCF ไปที่เมธอด GetProductByCategoryID
                sc.GetProductByCategoryIDCompleted += new EventHandler<SL2_MasterDetail.ServiceReference1.GetProductByCategoryIDCompletedEventArgs>(sc_GetProductByCategoryIDCompleted);

                //โดยส่งผ่าน รหัสประเภทสินค้า ไปในเมธอด GetProductByCategoryID
                //เพื่อให้เซอร์ฟเวอร์ ส่งข้อมูลสินค้า ตามรหัสประเภทสินค้า ที่ไคลเอนต์ร้องขอ
                sc.GetProductByCategoryIDAsync(catID);

            }

        }

        void sc_GetProductByCategoryIDCompleted(object sender, SL2_MasterDetail.ServiceReference1.GetProductByCategoryIDCompletedEventArgs e)
       
{
           
//throw new NotImplementedException();
            //ใส่ข้อมูล Product ให้ dataGrid_Detail
            dataGrid_Detail.ItemsSource = e.Result.ToList();

        }

    }

}

 

บทสรุป:

มาถึงตรงท่านผู้อ่านคงมองเห็นภาพขึ้นบ้างแล้ว ถึงการใช้งานเครื่องไม้เครื่องมีระดับอย่าง VS2008 และ Expression Blend ในการร่วมประสานการพัฒนาแอพพลิเคชัน ให้สมบูรณ์แบบยิ่งขึ้น ซึ่งจากที่เล่าความมา กล่าวได้ว่า Expression Blend เสมือนเครื่องมือประจำกายของเหล่านักออกแบบ และVS2008 เสมือนเครื่องมือประจำกายของเหล่านักพัฒนา ซึ่งในโลกความเป็นจริงแล้ว บางครั้งนักพัฒนาแอพพลิเคชัน จำยอมต้องสวมบทบาททั้งเป็นนักออกแบบ และนักพัฒนาไปพร้อมๆ กัน ตามสภาพแวดล้อมของแต่ละองค์กร แต่จุดหมายปลายทาง หรือเป้าประสงค์ของทุกๆ ท่านไม่ว่าจะเป็นของผู้เขียนเองหรือของ ท่านผู้อ่านก็ตามที มีจุดหมายปลายทางเดียวกัน นั่นคือการได้เป็นส่วนหนึ่งในความสำเสร็จขององค์กร และสูงสุดคือความสำเร็จของประเทศชาติบ้านเมือง ซึ่งเป้าประสงค์สูงสุดนี้เป็นเสียงกระซิบร้องเรียกผ่านหัวใจ และผ่านจิตสำนึกของทุกผู้คน ในสังคมบ้านเราปัจจุบัน

ในสังคมโลกทุกวันนี้มีการแข่งขันสูง มีความเร่งรีบ จนบางครั้งตัวเราเองลืมนึกถึงคนรอบข้างไปบ้าง แต่ในโลกกว้างใหญ่ใบนี้ยังมีชุมชนเล็กๆ ที่มีแต่ความแบ่งปันเกื้อกูลกันและกัน ฉันพี่น้อง หากผู้อ่านท่านไดประสบปัญหาในการรับฟังบทความ หรือต้องการพบปะผู้เขียน ลองเข้ามาทักทายด้วยกันที่นี่: http://greatfriends.biz Greatfriends เป็นชุมชนด้านดอทเน็ตเทคโนโลยี ในบ้านเมืองเรา แล้วพบกันครับ.

หากเกิดข้อผิดพลาดประการใดในบทความนี้ ผู้เขียนยินดีน้อมรับคำแนะนำ และพร้อมแก้ไขในครั้งต่อๆ ไป

 

แหล่งข้อมูลอ้างอิง:

จาก: นิตยสาร CODE IT [สอดอยู่ในเล่ม Windows ITPro ฉบับเดือน มิถุนายน 2551]

เกี่ยวกับ

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
One comment on “Silverlight2 Master Detail with WCF and LINQ
  1. vango พูดว่า:

    ได้ความรู้มากเลย

ใส่ความเห็น

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: