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

posted on 20 Aug 2009 16:11 by devstock  in DotNET
บทความนี้ผมจะนำเสนอถึงนวัฒกรรมใหม่สำหรับการพัฒนา 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  


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

   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   

 

 


 

 

094)
 

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

 

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

 

สรุป

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

 
 
1 Comments

ทำไมจึงควรใช้ Asychronous script callback และ Page Method แทน Update Panel

posted on 20 Aug 2009 16:10 by devstock  in DotNET

การ ใช้งาน Asynchronize Feature ใน Ajax นั้นสามารถทำได้หลายวิธีด้วยกัน วิธีที่งานและเป็นที่นิยมมากคือการใช้ Update Panel ซึ่งเป็น Control พื้นฐานที่ติดมากับตัว Ajax Extension Module สำหรับ ASP.NET

UpdatePanel นั้นสามารถใข้งานได้งาน เพียงแค่นำส่วนของ Page ที่ต้องการให้เป็น Asynchronous Postback ใส่ไว้ใน Update Panel ก็สามารถทำงานได้แล้วแต่ ตัว UpdatePanel นั้นมีความสามารถในงาน call กลับไปยัง server ได้โดยที่ วงจรชีวิตในการทำงานของ server-side จะเกิดขึ้นปกติเหมือนกับการทำ postback ปกติ ตรง จุดนี้เองทำให้การใช้งาน Updatepanel นั้นจะได้ Performance ที่ต่ำกว่าการเรียกใช้ Webmethod หรือการใช้ Asynchronous layer เรียกไปยัง web service โดยตรง เนื่องจาก WebMethod นั้นจะทำงานโดย JSON ซึ่งเป็นลักษณะหน่ึงของ Web Service ข้อมูลที่ใช้ส่งระหว่างกันจะมีเพียงข้อมูลเป้าหมายที่ต้องการแสดงเท่านั้น แต่ในขณะที่ UpdatePanel นั้นจะทำการ render ทุกๆส่วนภายใน Panel ใหม่ทั้งหมด(ความจริง Render ใหม่ทั้ง Page แต่ว่า write กลับเฉพาะส่วนที่อยู่ภายใน UpdatePanel)

สรุป

การ ใช้ UpdatePanel นั้นดูเหมือนว่าจะเป็นการเพิ่มความสามารถให้กับหน้า Web Page ของเราแต่กลไกการทำงานของตัวมันเองจะมีลักษณะเดียวกับหน้าที่ไม่เป็น UpdatePanel และอาจจะอันตรายกว่าเนื่องจากการใช้ UpdatePenel เข้าไปช่วยนั้นมักจะทำให้เกิดการส่งข้อมูลบ่อยครั้งกว่าเนื่องจากผู้พัฒนา มักเข้าใจผิดว่า server จะทำงานน้อยลง หากผู้พัฒนาต้องการทำเว็บเพจ ที่ต้องการการพิจารณาถึงเรือ่ง performance อยางระมัดระวังแล้ว Web service และ webmethod ดูจะเป็นทางเลือกที่ดีกว่า

0 Comments

callback

posted on 20 Aug 2009 16:08 by devstock  in DotNET

สวัสดีค่า วันนี้หัดท่า Callback Methods กันนะค่ะ
คือเป็นแบบว่าทำงานงานหนึ่งเสร็จแล้วไปเรียกอีกงานหนึ่งแบบอัตโนมัติ โดย .net framework ได้จัดท่านี้ไว้ให้แล้วซึ่งจะใช้ ASyncCallBack กับ delegates เป็นกลไกในการทำงาน (มั่งค่ะ)

ก่อนอื่นต้องมาดูปัญหากันก่อนนะค่ะ ก่อนอื่นขอยกตัวอย่างพวก function

ReadLine
 หรือ function
AcceptTcpClient
 จะมีสิ่งที่เรียกว่า blocking แบบว่าตอน runtime จะต้องมีการรอหรือตอบสนองเข้ามาก่อนถึงจะผ่านหรือไปประมวลผลต่อไปได้
Code:
Console.ReadLine();

เพื่อนๆ บางคนอาจจะนึกภาพไม่ค่อยออก ถ้ายังไงคงต้องลองนึกภาพตอนเขียน console แล้วใช้คำสั่ง ReadLine ในการรับ Input เข้ามา โปรแกรมก็จะหยุดรอให้ user รับคำสั่งเข้ามา

ดังนั้นการทำงานบางอย่างถ้าติด function จำพวก blocking นี้จะไม่สามารถทำงานต่อไปได้ แต่หากว่า ต้องการ การหละ ปัญหาแบบนี้ก็ต้องไปใช้ thread ในการแก้ปัญหา ให้ไปประมวลผลแบบขนานกันไป

แต่ความต้องการไม่ได้หยุดเพียงแค่นี้ เราต้องการให้มันทำงานข้ามไปก่อนแต่พอมีการตอบสนองแล้วให้มี action อย่างอื่นตอบสนองกลับมาด้วย ท่านี้เลยเรียกว่า
Callback


การ Callback จะใช้การ invoke แต่หละ method โดยผ่านทาง Delegate

โจทย์ตัวอย่าง  เราจะส่ง method ไปทำงานหากเสร็จเรียบร้อยแล้วให้ทำการ callback กลับมาบอกด้วยว่าเสร็จเรียบร้อยแล้ว

อ.บอกว่า BeginInvoke นั้นก็เปรียบเสมือน Thread นั้นเองแต่พอเรารวมกับการ callback ไปด้วยแล้วก็จะกลายเป็นว่ามันก็คือ Thread ที่มีการ Callback นั้นเอง

ขั้นแรกก่อนอื่นไปสร้าง delegate ไว้ก่อน
Code:
//ประกาศ delegate รับค่าเป็น string และไม่มีการ return ค่า
public delegate void delegateTest(string s);
public event delegateTest OnTest;
//ประกาศ del เป็น delegate ของ delegateTest
delegateTest del;

เสร็จแล้วก็ทำการ ผูก event กับ delegate อะไรให้เรียบร้อย (ดูตัวอย่างเรื่อง event และ delegate[1][2][3] )

โดยต่อมาให้คุณไปสร้าง methed ที่จะทำหลังจากที่ทำงานเสร็จแล้ว (method ที่โดยเรียกตอน callback)   โดย method นี้จะต้องมี signature ดังนี้คือ return ต้องเป็น void ไม่มีการคืนค่าและ parameter ที่ส่งเข้าไปนั้นต้องเป็น type IAsyncResult  แสดงได้ดังตัวอย่าง
Code: (ตัวอย่าง method callback)
private void methodCallBack(IAsyncResult iar){....}

หลังจากนั้นทดสอบการทำงานโดยทำการเรียก method สอบแบบ
-แบบแรกเรียกผ่าน event ธรรมดาแบบไม่มี invoke และ callback
-แบบสองเรียกผ่าน event โดยใช้ begininvoke และมี การ callback

Code:
public void process(string s){
           
            // แบบที่สอง
            // เรียก method greeting โดยใช้ BeginInvoke ผ่านทาง delegate
            // BeginInvoke นั้นก็เปรียบเสมือน Thread แต่มีการ Callback
            // OnTest.BeginInvoke(s, new AsyncCallback(ResultsReturned), del);
            OnTest.BeginInvoke(s, new AsyncCallback(methodCallBack), del);
           
            // แบบแรก
            // เรียก method greeting โดยไม่มี delegate
            // OnTest("123");
            Console.WriteLine("NEXT");
        }

Code:
OnTest.BeginInvoke(s, new AsyncCallback(methodCallBack), del);
หากคุณเรียก method greeting ผ่านทาง delegate และใช้ begininvoke จะสามารถทะลุผ่านพวก blocking ได้

Code:
OnTest("123");
หากคุณเรียก method greeting  ผ่านทาง delegate แต่ไม่มี begininvoke จะไม่สามารถทะลุผ่านพวก blocking ได้
0 Comments
Previous | Next