โปรแกรมมั่ว พ่อลูกอ่อน
ASP.NET AJAX ENABLE - WCF SERVICE ตอนที่ 1

วันก่อนมีโอกาสได้ฟังคุณ banpote_tt มา present เรื่อง JSON-Enabled WCF Services in ASP.NET 3.5 ให้ฟังครับ รู้สึกชอบมากเพราะปัจจุบันก็เขียน ASP.NET AJAX ร่วมกัน Web Services อยู่แล้ว กำลังเล็งๆที่จะลอง WCF อยู่พอดี พอได้ฟังก็เลยเกิดอาการร้อนวิชาอยากลองครับ กลับบ้านจัดการ format เครื่องลง Windows ใหม่ พร้อมกับลง Visual Studio 2008 Trial Verison ที่ได้มาครับ

ก่อนอื่นใครที่อ่านบทความนี้ แนะนำให้ไปอ่านของคุณ banpote_tt และดาวน์โหลดสไลด์ของคุณ nas มาทำความเข้าใจ จะได้ปูพื้นเรื่อง WCF ก่อน เพราะผมขอข้ามส่วนนี้ไปเลยนะครับ ส่วนบทความของผมจะพยายามลงรายละเอียดมากขึ้นอีกหน่อยครับ

บทความ - JSON-Enabled WCF Services in ASP.NET 3.5 (VS2008)
//greatfriends.biz?75473

Session 5: SOA Showcase with WCF / WCS
//greatfriends.biz/files/VT8-SOAwithWCFWCS-Narate.rar (3.36 MB)

เริ่มต้นผมทำการสร้าง Website ก่อนครับ ขั้นตอนนี้เราจะได้ไฟล์ Default.aspx และไฟล์อื่นๆที่จำเป็น เช่น Web.Config

ขั้นตอนที่สอง ผมจะสร้าง Class ชื่อ TestClass.vb ครับ


จากรูป จะเห็นว่า Class นี้มี 3 properties และ สังเกตุว่ามีการระบุ Serializable() Attribute ไว้ด้วยครับ การระบุ Serializable() จะทำให้ Object ที่สร้างจาก Class นี้มีสามารถถูก Serialize เพื่อส่งผ่าน network ไปยังปลายทางได้ (ในที่นี้คือส่ง Serialized Object ไปให้ Web Browser) ซึ่งจะถูก Deserialized ให้กลับมาเป็น Object อีก ซึ่ง Class นี้ผมเขียนให้ดูแบบง่ายๆ ไม่ต้องติดต่อผ่าน Database เพราะไม่ใช่เป้าหมายของบทความนี้ครับ เอาแค่ว่าเมื่อ WCF ถูกเรียกแล้วจะส่ง Collection ของ Object ผ่าน Network ไปได้ยังไง

จากนั้นทำการ New Item โดยเลือก AJAX Enable - WCF Service ครับ ตั้งชื่อไฟล์ Service1.svc ละกัน เรามาดูที่ Service1.svc ก่อนเลยครับ



จุดสังเกตุ 1 ผมมีการระบุ Namespace 2 แห่ง ชื่อต่างกันครับ โดย Namespace ที่ระบุใน ServiceContract() Attribute จะเป็น Namespace ของ WCF Proxy ครับ (เดี๋ยวจะอธิบายเรื่อง Proxy ทีหลังครับ) ส่วน Namespace อีกตัวก็รู้กันอยู่แล้วไม่ต้องอธิบาย

ส่วน AspNetCompatibilityRequirements() Attribute เป็นการระบุเพื่อให้ ASP.Net Ajax Enable สามารถเรียกใช้ WCF Service ได้ครับ (ถ้าตอนสร้าง WCF เราไม่ได้สร้างเป็น Ajax Enable - WCF Service ก็ต้องมาใส่ Attribute ตัวนี้เพิ่ม และก็ไปแก้ไข Web.Config ด้วยครับ ตอนผมทำครั้งแรกก็สร้างเป็น WCF ธรรมดาก็ต้องมาแก้เอง งมอยู่นานเหมือนกัน T_T )


NOTE ไฟล์ Servcie1.svc จะอยู่นอก App_Code folder ส่วน Service1.vb จะอยู่ใน App_Code ครับ และ Visual Studio ไม่สร้าง Interface ให้ครับ (ไม่เหมือนการสร้าง WCF ธรรมดา ที่ VS จะสร้างตัว Interface ให้ด้วย และ ไฟล์ .svc จะถูกเก็บใน App_Code folder เช่นเดียวกับ .vb) ซึ่งการที่ Service1.svc อยู่นอก App_Code ทำให้เราสามารถเรียกใช้ WCF ได้ตรงๆครับ ถ้า Service1.svc ถูกเก็บอยู่ใน App_Code folder หรืออยู่ใน Server อื่นจะไม่สามารถเรียกใช้ได้ครับ ต้องทำเทคนิคที่เรียกว่า Bridge ครับ


ทีนี้ลองมาดูที่ TestResult Function ครับ ฟังก์ชันตัวนี้จะคืนค่าเป็น List ของ TestClass ที่เราเพิ่งสร้างไปเมื่อสักครู่ ฟังก์ชันนี้ก็เขียนง่ายๆเหมือนกัน พอมีการเรียกฟังก์ชัน ตัวฟังก์ชันจะไปสร้าง Object ของ TestClass มา 3 ตัวโดยส่งพารามิเตอร์ไปด้วย เพื่อคำนวนผลลัพธ์ จากนั้นก็เอาไปเก็บใส่ใน List คราวนี้ WCF Service ของเราก็พร้อมใช้งานแล้วครับ

มาที่ Default.aspx เลยครับ ให้ดูส่วนที่เป็น Body ของ HTML ก่อน



จะเห็นว่าในส่วน ScriptManager มีการระบุ Service ไว้ โดยอ้างไปยังไฟล์ .svc ครับ นอกจากนี้มีการระบุ InlineScript="false" เอาไว้ โดยปกติไม่ใส่ก็ได้ครับ แต่ที่เขียนให้ดูเพราะเราไม่สามารถระบุเป็น True ได้ นอกจากนี้มี Button 1 ตัว และมี Span อีก 1 ตัว โดยตัว Button ถูกกำหนด OnClientClick() property ไว้ด้วยครับ

ทีนี้มาดูส่วน JavaScript ดูบ้าง



เริ่มต้นที่ function btnTestWCF_OnClick() ซึ่งเมื่อ Button ถูก click จะทำการเรียกฟังก์ชันนี้มาทำงาน ง่ายๆเหมือนกันก็คือจะไปเรียกใช้ WCF Service ทีเราสร้างขึ้น ส่วน Syntax ที่ใช้ในการเรียกก็คือ


Namespace.ClassName.FunctionName(parameter1, parameter2,...,parameterN, SucceededCallBackFunction, _[FailedCallBackFunction], [context])


เนื่องจากเราไม่มี parameter ส่งไป และ ไม่ต้องการ Implement FailedCallBackFunction (จริงๆควรต้องเขียน function นี้นะครับ) รวมถึงไม่ใช้ context ด้วย ดังนั้นเราเขียนแค่นี้ครับ

jnithi.Service1.GetTestResult(OnGetDataSuccess);

เมื่อเราทำการเรียก WCF Service ให้ทำงาน ถ้าได้ผลลัพธ์ที่ Success มันก็จะไปเรียก function OnGetDataSuccess เพื่อทำงานต่อครับ จะเห็นว่าใน OnGetDataSuccess มี comment อยู่ 1 บรรทัด ไม่ต้องสนใจครับ เอาไว้ตอนต่อไปค่อยมาดูกัน โดยฟังก์ชันนี้มี parameter 1 ตัวชื่อ result นั่นก็คือผลลัพธ์ที่ WCF Service ส่งมาให้นั่นเองครับ ซึ่งก็คือ List ของ TestClass Object ที่มีสมาชิก 3 ตัว เราก็สร้าง table และเอาข้อมูลที่ได้มาสร้างแถว จากนั้นก็เอา table ที่ได้ไปใส่ใน span เพื่อแสดงผลลัพธ์

จุดสังเกตุ2 List หรือ Collection ของ Object ทางฝั่ง server จะถูก Serialize เป็น JSON โดย default (ยกเว้นเราไปกำหนดใน attribute ให้เป็น XML) ซึ่งเมื่อส่งมาที่ browser แล้วฝั่ง browser จะ deserialize เป็น array ที่มีสมาชิกเป็นแบบ Dictionary ครับ


NOTE ปกติก่อนหน้านี้เวลาส่งข้อมูลกลับจาก Web Service ผมไม่ชอบใช้ XML เลยส่งเป็น String มา โดยให้มีตัวคั่นเพื่อแบ่งค่าหลายๆค่า เช่น jnithi;System Analyst;Pear จากนั้นก็เขียน javascript เพื่อ Split ออกเป็นข้อมูลย่อยๆ (หลายคนทำเหมือนกันใช่เปล่า) ซึ่งจริงๆแล้ว MS Ajax ก็จัดการส่งข้อมูลมาเป็น JSON นั่นแหละ ดังนั้นถ้าเราเปลี่ยนมาส่งเป็น Object ก็จะดีกว่าครับ เพราะถ้าส่งเป็น delimited string เราต้องจัดลำดับให้ถูกต้อง แต่ถ้าส่งเป็น Object มา มันเป็น Dictionary ดังนั้นถ้ารู้ Key ก็สามารถหา Value ได้ การทำงานกับ key name ง่ายกว่าทำงานกับ Index ครับ โอกาสผิดพลาดก็น้อยกว่า


ลองรันดูผลลัพธ์ครับ



ลองกดปุ่มเพื่อเรียก WCF Service



เรียบร้อยครับ จะเห็นได้ว่าการใช้ ASP.NET AJAX Enable - WCF Service ไม่ยากเลยใช่ไหมครับ ไว้ตอนหน้าเรามาจะมาดูรายละเอียดเพิ่มเติม เรื่องของ ASP.Net AJAX WCF Service Proxies และ บางส่วนของ Type System ใน ASP.NET AJAX Client Framework ซึ่งจะพบว่า Visual Studio 2008 นี่มันทำให้ชีวิตสะดวกสบายกว่า version 2005 เยอะเลย


Create Date : 22 มีนาคม 2551
Last Update : 26 มีนาคม 2551 23:29:51 น. 6 comments
Counter : 1292 Pageviews.

 
ขอบคุณค่ะมีประโยชน์มากๆ ขอตัวอย่างอีกเยอะๆ นะค่ะ
และพอจะแนะนำหนังสือ ไว้อ่านได้ไหมค่ะ ขอบคุณค่ะ


โดย: rainy IP: 58.136.117.63 วันที่: 27 มิถุนายน 2551 เวลา:15:18:00 น.  

 
แวะมาเยี่ยมครับ ไปให้กำลังใจผมหน่อยน่ะครับ ที่ kilimanjaro-passion.bloggang.com


โดย: ใบชา IP: 124.120.78.9 วันที่: 26 สิงหาคม 2551 เวลา:9:51:15 น.  

 
โทดทีครับ ผมแน่ใจว่าสิ่งที่พี่เขียนต้องมีประโยชน์มากแน่ๆ แต่ว่าตอนนี้ผมยังไม่ได้เกี่ยวข้องเท่าไหร่กับเรื่องที่พี่เขียนเท่าไหร่... เอาเป็นว่าเขียนต่อไปน่ะครับ ขอบคุณมากครับ อย่าลืม แวะไปคอมเมนท์ให้ผมด้วยน่ะครับ อิๆๆๆ kilimanjaro-passion.bloggang.com


โดย: ใบชา IP: 124.120.78.9 วันที่: 26 สิงหาคม 2551 เวลา:9:53:45 น.  

 
เข้าไปเว็บนี้นะครับ
//www.thaihotdesign.com
.NET Component, AJAX ASP.NET, ASP.NET C#,VB, Silverlight, WPF, Windows Forms

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


โดย: pongpang IP: 203.155.126.210 วันที่: 18 พฤศจิกายน 2551 เวลา:13:35:37 น.  

 
www.theblogfor.net เว็บนี้มีเรื่อง AJAX อยู่เหมือนกันน่ะค่ะ ถ้าสนใจลองแวะมาได้
ยินดีต้อนรับค่ะ พีเอส: นอกจากนี้ก้ยังมีเรื่องอื่นๆ ที่เกี่ยวกะ .net อยู่ด้วย ลองแวะมาน่ะค่ะ^^


โดย: pingpong IP: 125.24.38.202 วันที่: 3 มิถุนายน 2552 เวลา:16:42:23 น.  

 
ขอบคุณมาก ๆ ครับ ผมงมอยู่นานเลย Search มาเจอหน้านี้เจ้าเหมือนสวรรค์โปรดที่เดียว

ขอถามต่ออีกนิดนะครับ ถ้าผมจะให้ WCF Client ส่งไฟล์ไปที่ App Server (WCF Service) พอที่คำแนะนำไหมครับ


โดย: Neomaster วันที่: 27 มิถุนายน 2553 เวลา:23:50:30 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
รหัสส่งข้อความ
กรุณายืนยันรหัสส่งข้อความ

นายจวบ
Location :
กรุงเทพฯ Thailand

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]




โปรแกรมมั่ว พ่อลูกอ่อน
Group Blog
 
<<
มีนาคม 2551
 
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
 
22 มีนาคม 2551
 
All Blogs
 
Friends' blogs
[Add นายจวบ's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.