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 ของ
หน้าตาของ 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 มันก็จะหายไป
Month:
Processing data, please do not close this page.
Comments
Post a Comment