AJAX Extension แบบง่าย

นั่งเล่นอยู่พักหนึ่งเกี่ยวกับการใช้งาน AJAX ใน VS2010 ตอนแรกงงๆ อยู่ ใน VS2003 มันช่างยากเย็นเสียเหลือเกินว่าจะทำได้ (ถ้าไม่ได้ทำ C&D : Copy and development เนี่ยยิ่งแล้วเลยครับ) บางครั้งรู้สึกมันทำความเข้าใจยากไปหน่อย และเห็นว่าหลายๆ คนใช้ VS2010 แล้ว และมันก็มี AJAX มาให้ เพราะ VS2010 มันทำให้เองเกือบหมด เลยลองทำดู แล้วสรุปมาในแบบของผม ผมก็อ่านๆ มาจาก link ด้านล่างก็ใช้ได้นะครับพอเข้าใจ   ลองใช้กันดูก็ได้นะ   ที่มา http://resources.esri.com/help/9.3/arcgisserver/adf/dotnet/developer/ADF/ajax_aspnet.htm http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx http://www.asp.net/ajax/documentation/live/overview/ScriptManagerOverview.aspx     ถ้าอ่านแล้วไม่เข้าใจมาใช้มันแบบง่ายๆ เลยดีกว่า ใน VS 2010 ที Tool ที่อยู่ในกลุ่มของ AJAX Extensions อยู่ 5 component (ไม่รวม Pointer นะครับ)   ตัวที่เราจะเอามาใช้ในครั้งนี้มี 3 component คือ 1.    ScriptManager component 2.    UpdatePanel component 3.    UpdateProgress component     1.    ลาก ScriptManager component มาวาง  แล้วตั้งชื่อให้มัน ถ้าไม่ตั้งก็เป็น Default name ได้     Note: แต่หาก Process ของเราในฝั่งของ server side จะ run นานกว่า 90 วินาที Set ค่า AsyncPostBackTimeout เพิ่มขึ้นไปตามที่เราต้องการ  ซึ่งเดิมมัน Default ให้ 90 วินาที  หาก Process เรา run นานเกินกว่า 90 วินาทีแล้วมันจะ เกิด Error on Page ประมาณนี้ครับ แต่ Process ที่ run ในฝั่ง server side run เสร็จเรียบร้อยดีตามปกติ (เจอมากับตัวเองแล้ว ตอนแรกงงๆ อยู่ นั่งโง่อยู่พักหนึ่ง)     Webpage error details   User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E) Timestamp: Fri, 16 Mar 2012 02:44:17 UTC   Message: Sys.WebForms.PageRequestManagerTimeoutException: The server request timed out. Line: 868 Char: 13 Code: 0   2.    วาง UpdatePanel component โดยเมื่อลากมาวางแล้ว จะเป็นเหมือน Panel ปกติ แล้วให้นำเอา Component ต่างๆ เราที่ต้องการ ทำการ run process ในฝั่ง server side มาวางไว้ภายใน Panel  เช่น DropDownList หรือ Button ที่มี Event ต้อง PostBack เพื่อไป run บางอย่างบน Server side.          Year:
Month:

           3.    วาง UpdateProgress component และต้อง Set ให้ AssociatedUpdatePanelID ตรงกับ ชื่อ ID ของ UpdatePanel ด้วยนะครับ AssociatedUpdatePanelID="UpdPanel_Main"  ส่วนนี้เป็นส่วนที่จะแสดง ข้อความหรือ Progress ระหว่างรอ ผลตอบกลับมาจาก Server Side ของผมไม่ได้ ให้แสดงเป็น percent ในของการ process ให้แสดงแค่ รูป Animation ว่ากำลัง process อยู่นะ อย่าเพิ่งปิดหน้านี้ตามรูป ดังนั้นใครอยากได้รูปแบบไหน วนซ้าน หรือ วนขวา หรือ progress bar ที่เป็น .gif ก็ไปหามาใส่ไว้ใน ภายใต้ Tag ของ                                    

Processing data, please do not close this page.

                    หน้าตาของ Form รวมๆ                 4.    จัดการ Coding : งานนี้ไม่มีอะไรอยากครับ เพราะให้เราเขียน Coding ของเราเหมือนเดิมไม่ต้องเพิ่มอะไร เขียนไปตามปกติ   protected void btn_ReRun_Click(object sender, EventArgs e)        {               ---Your code-- lbl_showresult.Text = strResult;        }                 ผลลัพธ์        หลังจากที่ท่าน Click หรือ run event ของ component ที่อยู่ภายใต้ UpdatePanel ตัว AJAX มันก็จะทำการแสดงข้อความหรือรูป Animation ใน UpdateProgress ออกมาให้เองอย่างรูปด้านล่างครับ                          พอ run เสร็จ ก็แสดงผมตามปกติที่เราเขียนไว้ แล้วข้อความหรือรูป Animation ใน UpdateProgress มันก็จะหายไป