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		6 comments
Last Update : 26 มีนาคม 2551 23:29:51 น.
Counter : 2341 Pageviews.
Share Tweet