Copyright © 2003-2009
By Suthep Sangvirotjanaphat
  Mobile: 089-967-2200, 081-915-7816
Phone: 0-2992-4877   Fax: 0-2992-4878
Fast Contact Us

GreatFriends.Biz Community
Custom Search
Copy เพื่ออ้างอิงถึงข้อความนี้:
 MESSAGE #111084 (อ่าน 3,284 ครั้ง)

บทความ – 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 

 

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

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


banpote_tt วันที่ส่ง: 31 ก.ค. 52 13:50 GMT+7
วันที่ปรับล่าสุด: 25 เม.ย. 53 03:23 GMT+7
REPLY #1 (111088)

ตัวอย่าง: การใช้เทคนิคใหม่ที่มีอยู่ใน 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 ด้านล่างนี้ครับ   

 


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:14 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:14 GMT+7
REPLY #2 (111089)

    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   


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:20 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:20 GMT+7
REPLY #3 (111091)

 


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:23 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:23 GMT+7
REPLY #4 (111092)

Html Page Implement:


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:24 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:24 GMT+7
REPLY #5 (111093)

โอ...... เยี่ยมมากครับบรรพต

หายหน้าไปนาน นึกว่าหายไปไหน ที่แท้ไปซุ่มเขียนบทความดีๆมาให้อ่านนี่เอง
 

firefly วันที่ส่ง: 31 ก.ค. 52 14:26 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:26 GMT+7
REPLY #6 (111094)
 

 


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:27 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:27 GMT+7
REPLY #7 (111095)

เมื่อทำการ Run Application ข้อมูลลูกค้าจะถูก Load ลงไปใน Table ทั้งหมด

 

เมื่อ User ทำการ Find หรือ Sort ข้อมูล JavaScript ก็จะทำการ Build UI ออกมาตามข้อมูลที่ได้รับจาก WebService

 

สรุป

      ใน ASP.NET AJAX 4.0 จะทำให้เราสามารถ Build Web Application ที่มี Rich มากกว่าเดิมและเพิ่มประสิทธ์ภาพในเรื่องของ Performance ในการ Transform Data  


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:30 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:30 GMT+7
REPLY #8 (111097)
Source Code และ DOCX ของบทความนี้ครับ
 
 
 

 


banpote_tt วันที่ส่ง: 31 ก.ค. 52 14:44 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 14:44 GMT+7
REPLY #9 (111106)
เยอะมากมาย หายตัวไปปั่นนี่เอง หุหุ

Nine (นาย) วันที่ส่ง: 31 ก.ค. 52 17:13 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 17:13 GMT+7
REPLY #10 (111109)
ปักหมุดให้แล้วครับ

Nine (นาย) วันที่ส่ง: 31 ก.ค. 52 17:18 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 17:18 GMT+7
REPLY #11 (111111)
 หายไปนานเลยนะครับ อิ อิ

mr.l วันที่ส่ง: 31 ก.ค. 52 18:24 GMT+7
วันที่ปรับล่าสุด: 31 ก.ค. 52 18:24 GMT+7
REPLY #12 (111116)

เยี่ยมเลยครับ มิน่า banpote_tt ถึงเชียร์ให้ลองเล่นดู

 

jnithi วันที่ส่ง: 1 ส.ค. 52 08:00 GMT+7
วันที่ปรับล่าสุด: 1 ส.ค. 52 08:00 GMT+7
REPLY #13 (111149)

got it! 111111

 

 

REPLY #11 (111111)

 หายไปนานเลยนะครับ อิ อิ
mr.l

surrealist วันที่ส่ง: 1 ส.ค. 52 22:41 GMT+7
วันที่ปรับล่าสุด: 1 ส.ค. 52 22:41 GMT+7
REPLY #14 (111151)
  พึ่งสังเกตเห็นเช่นกันครับ

mr.l วันที่ส่ง: 1 ส.ค. 52 22:54 GMT+7
วันที่ปรับล่าสุด: 1 ส.ค. 52 22:54 GMT+7
REPLY #15 (111164)

บรรพตคนเดิมกลับมาแล้ววว

อ่านไปได้นิดเดียว เดี๋ยวแวะมาอ่านต่อ
 
ว่าแต่สไลด์ในรูปที่ 4 นี่คุ้นๆ แฮะ อิอิ

nas วันที่ส่ง: 2 ส.ค. 52 01:22 GMT+7
วันที่ปรับล่าสุด: 2 ส.ค. 52 01:22 GMT+7
REPLY #16 (111165)

เข้มข้นเช่นเดิม

จาก REPLY #11 (111111) 
ถ้างวดนี้ ออก 11 เสียดายแย่เลย
 
 

nano วันที่ส่ง: 2 ส.ค. 52 01:28 GMT+7
วันที่ปรับล่าสุด: 2 ส.ค. 52 01:28 GMT+7
REPLY #17 (111609)

ขอบคุณครับ

ถ้าผมใช้ 2008 อยู่  จะใช้ AJAX4.0 ได้หรือไม่ครับ


nazisus วันที่ส่ง: 10 ส.ค. 52 15:08 GMT+7
วันที่ปรับล่าสุด: 10 ส.ค. 52 15:08 GMT+7
REPLY #18 (111613)
เยี่ยมมาก

jujeehun วันที่ส่ง: 10 ส.ค. 52 15:51 GMT+7
วันที่ปรับล่าสุด: 10 ส.ค. 52 15:51 GMT+7
REPLY #19 (111733)
ฮ่าๆ บ้าพลังเหมือนเดิม นึกว่ามีแฟนแล้วจะลืมน้องๆใน GF

เฮียอ้วน วันที่ส่ง: 13 ส.ค. 52 02:17 GMT+7
วันที่ปรับล่าสุด: 13 ส.ค. 52 02:17 GMT+7
REPLY #20 (111895)
สุดเยื่ยมยอดครับ

sspt วันที่ส่ง: 15 ส.ค. 52 17:59 GMT+7
วันที่ปรับล่าสุด: 15 ส.ค. 52 17:59 GMT+7
REPLY #21 (111965)
ขอบคุณคุณ banpote_tt  มากครับ เป็นประโยชน์มากเลย ผมหายไปนาน ช่วงนี้เก็บตัวอยู่เนื่องจากงานเยอะมาก แต่กลับมาเปิด GF ครั้งใดไม่เคยผิดหวัง มีแต่พี่ๆ และเพื่อนๆ ที่แบ่งปันความรู้ และเป็นสิ่งที่น่ายกย่องครับ จากใจคนทำ HR

*aeed* วันที่ส่ง: 17 ส.ค. 52 08:15 GMT+7
วันที่ปรับล่าสุด: 17 ส.ค. 52 08:15 GMT+7
REPLY #22 (112689)
ข้อมูลเยอะดีครับ  ฆ่าเวลางานผมได้ดีจริงๆ ^^

evilstep วันที่ส่ง: 28 ส.ค. 52 11:40 GMT+7
วันที่ปรับล่าสุด: 28 ส.ค. 52 11:40 GMT+7
REPLY #23 (121778)
REPLY #17 (111609)

ขอบคุณครับ

ถ้าผมใช้ 2008 อยู่  จะใช้ AJAX4.0 ได้หรือไม่ครับ

---------------------------------------------------------
ได้ครับ ผม ที่บริษัทผมก็ใช่้อยู่ครับ Microsoft Ajax 4.0 + WCF + LINQ + jQuery โดย VS 2008 อิอิ

JazZUp วันที่ส่ง: 25 เม.ย. 53 03:23 GMT+7
วันที่ปรับล่าสุด: 25 เม.ย. 53 03:23 GMT+7
เรียน .NET/OOAD กับ อ.สุเทพ (surrealist) Microsoft Most Valuable Professional (MVP):
ลงทะเบียนเรียน
กระทู้นี้มีอายุเกิน 365 วันแล้ว ท่านจะไม่สามารถตอบกระทู้นี้ได้อีก
ถ้าต้องการสนทนาต่อ กรุณาตั้งเป็นกระทู้ใหม่ได้ในหน้าโฮม
และอาจจะอ้างถึงกระทู้นี้ โดยก๊อปปี้ข้อความในกล่องสีขาวด้านล่างไปแปะในกระทู้ใหม่

copy เพื่ออ้างอิงถึงข้อความนี้:
บทความ – Introduction to ASP.NET AJAX 4.0
http://greatfriends.biz?111084


4 ก.ย. 01:21
Online: 206