IT Knowledge: บทความ – Introduction to ASP.NET AJAX 4.0

บทความนี้ผมจะนำเสนอถึงนวัฒกรรมใหม่สำหรับการพัฒนา AJAX Application ใน ASP.NET AJAX 4.0 ที่จะช่วยให้เราสามารถพัฒนา AJAX Solution ออกมาด้วยแนวความคิดและแนวทางใหม่ โดยการย้ายส่วนการทำงานของ AJAX Engine ที่ทำหน้าที่ในการสร้าง UI ลงมาไว้ในฝั่งของ Client-Side และการสร้าง UI ในส่วนของ Client-Side ยังมีลักษณะเป็น Data Driven ซึ่งเป็นการสร้าง UI จากข้อมูลในรูปแบบของ JavaScript Object Array

เมื่อท่านผู้อ่านทราบถึงแนวทางของเวอร์ชั่นนี้แล้วผมจะแสดงตัวอย่างด้วยการใช้ฟีเจอร์พื้นฐานของ ASP.NET AJAX 4.0 เพื่อให้เห็นถึงวิธีการในการสร้าง AJAX Application ด้วยเทคนิคของ ASP.NET AJAX 4.0 และทราบถึงความสามารถของเวอร์ชั่นนี้

ปัญหาของ ASP.NET AJAX 1.0 กับเป้าหมายของ ASP.NET AJAX 4.0

ตั้งแต่ ASP.NET AJAX 1.0 ได้ Release ออกมาในวันที่ 23 มกราคม 2007 การพัฒนา AJAX Application ใน ASP.NET เป็นสิ่งที่สามารถทำได้อย่างง่ายดายเพราะว่าวิธีในการพัฒนา AJAX Application นักพัฒนาเพียงนำ Control ScriptManager และ UpdatePanel ครอบไปยัง Control ต่างๆ ใน WebForms ให้อยู่ภายใต้ ContentTemplate ก็จะทำให้ Control ต่างๆ ที่อยู่ใน UpdatePanel เกิดการทำงานแบบ Asynchronous Postback ตามตัวอย่างในรูปด้านล่างนี้

รูปที่ 1 แสดงตัวอย่างการใช้ ScriptManager, UpdatePanel ในการสร้าง AJAX

แต่ทว่าสิ่งที่เกิดขึ้นภายใต้การทำงานของ ASP.NET AJAX Server Control คือโปรเซสการทำงานยังอยู่บนฝั่งของ AJAX Server-Side เช่นเดิมส่วนหน้าที่การทำงานของ AJAX Client-Side จะทำหน้าที่ในการสร้าง Request สำหรับทำ Async-Postback ส่งไปให้กับ AJAX Server-Side เพื่อสั่งให้ AJAX Server-Side ทำโปรเซสต่างๆ ให้จากนั้นจึง Render Output กลับมาให้ Client-Side เท่านั้นลักษณะที่กล่าวมาสามารถแสดงได้ตามรูปด้านล่างนี้

รูปที่ 2 เปรียบเทียบโปรเซสการทำงานระหว่างฝั่งของ Server-Side และ Client-Side ใน ASP.NET AJAX 1.0

ถ้าเราเจาะลึกเข้าไปถึงโปรเซสการทำงานในการทำ Async-Postback เมื่อ AJAX Server-Side ได้รับ Request ที่เป็น Async-Postback ก็จะทำโปรเซสทั้งหมดที่เป็นของ ASP.NET Server Side ก่อนอย่างเช่นการทำ Event ต่างๆ ของ Page Event ใน ASP.NET อย่างเช่น Load, PreRender, SaveViewState เหมือนกับการ Postback ปกติเมื่อผ่านการ Event ต่างๆ ครบ ASP.NET AJAX ก็จะหยิบเอาHTML และ ViewState ส่งกลับลงมายัง Client-Side

รูปที่ 3 แสดงขั้นตอนในการทำ Async-Postback ใน ASP.NET AJAX 1.0

ดังนั้นโปรเซสการทำงานส่วนใหญ่ก็ยังอยู่บน AJAX Server-Side เช่นเดิมเพียงแต่สิ่งที่แตกต่างจากการที่ไม่มี ASP.NET AJAX เข้ามาช่วยคือเรื่องของ Responsive (ลักษณะแบบนี้เราเรียกว่าเป็น AJAX Engine แบบ Server Centric) ในทิศทางของ ASP.NET AJAX 4.0 จึงปรับเปลี่ยนสิ่งเหล่านี้ให้การทำงานของ AJAX Engine อยู่ในรูปแบบที่เป็น Client Centric แทน โดยเปลี่ยนโปรเซสการทำงานในการสร้าง UI ให้อยู่ในฝั่งของ Client-Side และให้ฝั่งของ Server-Side ทำหน้าที่ Consume ข้อมูลออกมาเป็น JSON ส่งให้กับ Client-Side ตามการร้องขอเท่านั้น

รูปที่ 4 เปรียบเทียบถึงขั้นตอนการทำงานของ AJAX Server-Side และ Client-Side (AJAX 4.0)

ใน ASP.NET AJAX 4.0 ได้มุ่งเน้นในการพัฒนาที่จะเพิ่มศักยภาพในส่วนของ Client-Slide Development โดยมีเป้าหมายที่จะเพิ่มความสามารถและลดข้อด้อยในเรื่องต่างๆ ดังนี้

ปรับเปลี่ยนการทำงานของ AJAX Engine ให้เป็นแบบ Client-Centric จากเดิมที่เป็นแบบ Server-Centric โดยแบบเดิมนั้น Engine ของการทำ AJAX มาจาก Server Control ไม่ว่าจะเป็น ScriptManager, UpdatePanel แต่ใน Version 4.0 นี้กลไกต่างๆ จะอยู่ใน Client Slide
ลด Data Traffic ในการทำ asynchronous ระหว่าง Server-Slide และ Client-Slide ให้มีขนาดเล็กลงด้วยการทำให้การส่งข้อมูลเป็นแบบ Pure JSON
ทำให้ฝั่ง Client-Slide มีความง่ายในการสร้าง UI จาก JSON ด้วยการใช้เทคนิคที่เรียกว่า AJAX Template โดยสร้าง Data Control จาก HTML และใช้ Syntax ในการทำ Client Data Binding คล้ายกับการทำ Data Binding ใน ASP.NET Server Control
สามารถที่จะเรียกใช้ Service ต่างๆ ได้ไม่ว่าจะเป็น Web Service, WCF, ADO.NET Data Service เพื่อนำข้อมูลที่เป็น JSON มา Binding ลงใน HTML Data Control ที่ได้ทำ Declarative หรือ Imperative ไว้
ในฝั่งของ Client-Side จะสามารถทำงานประสานกับ Service ในแบบ Two-way Data Binding นั้นหมายความว่าเราสามารถใช้ JSON ในการ Read และ Write ข้อมูลจาก Server-Side กับ Client-Side

ฟีเจอร์ต่างๆ ใน ASP.NET AJAX 4.0

Client Template Rendering
Instantiating Behaviors and Controls Declaratively
Live Data Binding
Using the Observer Pattern with JavaScript Objects and Arrays
The DataView Control
The AdoNetServiceProxy Class
The DataContext and AdoNetDataContext Classes

แหล่งข้อมูลและทรัพยากรต่างๆ ในการศึกษาค้นคว้า

สำหรับแหล่งข้อมูลที่ผมได้นำมาค้นคว้านำมาจากสอง Web Site คือ aspnet.codeplex.com และ msdn.microsoft.com และผมยังใช้ Visual Studio 2010 and .NET Framework 4 Training Kit - May Preview มาช่วยในการฝึกฝนทำ Lab

ตัวอย่าง: การใช้เทคนิคใหม่ที่มีอยู่ใน AJAX 4.0

โจทย์และการออกแบบ ผมจะสร้าง Web Application เพื่อให้ User สามารถสืบค้นข้อมูลลูกค้าจากฐานข้อมูล (Northwind) โดย User สามารถที่จะค้นหาข้อมูลได้จาก Search Box

การค้นหาข้อมูลจะระบุรหัสลูกค้าหรือชื่อบริษัทลูกค้าอย่างใดอย่างหนึ่ง และที่ Header ของ Grid สามารถกดเพื่อจัดเรียงข้อมูลได้ตามหน้า UI Design ด้านล่างนี้

รูปที่ 5 UI Design ของ Web Application ตัวอย่าง

Mapping UI to Process สำหรับตัวอย่างนี้ผมจะสร้าง Web Application ในรูปแบบที่เป็น Pure AJAX ซึ่ง Code ในการสร้าง UI จะทำอยู่ภายใต้ Browser ด้วย JavaScript และนอกจากนั้น Application จะทำหน้าที่ในการร้องขอข้อมูลจาก WebService ซึ่งทั้งสองฝั่งจะคุยกันด้วย JSON

Function หลักของ Application จะมีการค้นหาและการจัดเรียง มีลำดับการทำงานตาม Diagram ด้านล่างนี้ครับ

รูปที่ 6 หน้า Design ของ Web Application ที่ Map กับ Function การทำงาน

จากภาพ Diagram ที่แสดงถึงกระบวนการทำงานของ Application จะเห็นว่าในกล่องสีเขียวจะเป็น JavaScript Code ที่มีการ Call ไปยัง JavaScript ที่เป็น Client Framework ของ ASP.NET AJAX และมีการส่งพารามิเตอร์ต่างๆ ขึ้นไปร้องขอข้อมูลจาก WebService ฝั่งของ WebService ก็จะทำการ Enquiry ข้อมูลต่างๆ แล้วส่งกลับมาเป็น JSON ใหกับ Application ทางฝั่ง Application จะมีการสร้าง Event Handler เพื่อคอยรับข้อมูลจาก WebService

เมื่อได้ข้อมูลมาก็ทำการ Binding ข้อมูลลงใน Html Table โดย Html Table จะถูกสร้างให้เป็น DataView Control ซึ่งเป็น Client-Side Control ที่อยู่ในเวอร์ชั่น 4.0

Application Layer ในตัวอย่างผมจะสร้าง AJAX Application เป็น Html Page โดยให้ Html Page ดึงข้อมูลจาก WebService และ WebService จะทำหน้าที่ในการ Provide Data ให้ในรูปแบบ JSONบนฝั่งของ WebService ก็จะมีการดึงข้อมูลจาก Database ผ่านทาง Entity Framework อีกทีตาม Model ด้านล่างนี้ครับ

Solution Explorer สำหรับตัวอย่างนี้จะมี Item พิเศษที่ต้องเพิ่มเติมเข้ามาคือการนำ AJAX Client Framework เข้ามา เพื่อใช้ในการ Reference ไปยัง Application ใน Project โดยนำไฟล์MicrosoftAjax.debug.js และ MicrosoftAjaxTemplate.debug.js มาจากhttp://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24645 ใส่เข้ามาใน Project

นอกจากนั้นในส่วนอื่นๆของโปรเจคก็จะมีไฟล์ของ EF (Northwind.edmx, Northwind.Designer.vb) ที่ใช้ต่อเข้ากับ Database ของ Northwind เป็น SQL Express (Northwind.MDF) และก็มีไฟล์ของWebService (Northwind.asmx, Northwind.vb)

รูปที่ 8 แสดง Microsoft Ajax Client Framework File ที่จะนำมาใส่ลงใน Project

WebService Implement ในส่วนของ Service Library ที่ผมนำมาใช้ในการ Coding ในส่วนนี้ขึ้นมามีดังนี้

System.Web.Script.Serialization.JavaScriptSerializer: ผมจะใช้ Function อยู่สอง Function คือ Function Serialize เพื่อทำหน้าที่แปลงข้อมูลจาก List Collection เป็น JSON และ Function DeSerialize ในการแปลงข้อมูลจาก JSON กลับมาเป็น List Collection (การ Serialize ข้อมูลเป็น JSON ผลที่ได้คือข้อมูลที่เป็น String ตามรูปแบบที่มาตราฐาน http://www.json.org)
Cache ในการทำ Caching ผมมีการใช้ Cache แบ่งออกเป็นสอง Level คือ

Data Cache เพื่อทำหน้าที่เก็บ Data Collection ที่ดึงมาจาก EF มา Buffer ไว้เพื่อลดการติดต่อกับ DB

Output Cache คล้ายกับการทำ ASP.NET Output Cache โดย Cache ตรงนี้จะเก็บ Output ของ Data ที่เคยส่งออกไปให้กับ Client ถ้ามี

การส่ง HTTP GET ขึ้นมาด้วยพารามมิเตอร์แบบเดิมก็จะดึงข้อมูลชุดเก่าที่เก็บอยู่ใน Output Cache ส่งกลับไปยัง Client แต่ถ้าพารามิเตอร์ที่

ส่งขึ้นมามีการเปลี่ยนแปลง Cache ก็จะถูก Destroy ไป

LINQ เพื่อช่วยในการ Where ข้อมูลและ Sort ข้อมูลแล้วส่งกลับไปให้ Client-Side

รูปที่ 8 แสดง Microsoft Ajax Client Framework File ที่จะนำมาใส่ลงใน Project

WebService Implement ในส่วนของ Service Library ที่ผมนำมาใช้ในการ Coding ในส่วนนี้ขึ้นมามีดังนี้

System.Web.Script.Serialization.JavaScriptSerializer: ผมจะใช้ Function อยู่สอง Function คือ Function Serialize เพื่อทำหน้าที่แปลงข้อมูลจาก List Collection เป็น JSON และ Function DeSerialize ในการแปลงข้อมูลจาก JSON กลับมาเป็น List Collection (การ Serialize ข้อมูลเป็น JSON ผลที่ได้คือข้อมูลที่เป็น String ตามรูปแบบที่มาตราฐาน http://www.json.org)
Cache ในการทำ Caching ผมมีการใช้ Cache แบ่งออกเป็นสอง Level คือ