IT Knowledge: การเปลี่ยน ค.ศ. ในปฏิทินของ AJAX ให้เป็น พ.ศ. ฉบับสมบูรณ์

การเปลี่ยน ค.ศ. ในปฏิทินของ AJAX ให้เป็น พ.ศ. ฉบับสมบูรณ์

อ้างถึงบทความ http://www.greatfriends.biz/?80839

http://www.aspnetthai.com/%e0%b9%80%e0%b8%a3%e0%b8%a2%e0%b8%99%e0%b8%a3ASPNET/ASPNETAJAX/CorrectThaiformatinCalendarExtender/tabid/122/Default.aspx

ที่คุณ nas ได้นำเสนอเมื่อนานมาแล้วนั้น ผมก็ได้ใช้เป็นแนวทางนำมาปรับปรุงให้สามารถใช้งานครอบคลุมครบถ้วนให้ได้มากที่สุดโดยที่แก้ไขเปลี่ยนแปลงจาก Function เดิมของ Ajax เท่านั้น ซึ่งไม่ได้มีการเพิ่ม Function ใหม่เข้าไปเลย

ในบทความนี้ผมจะขอนำเสนอวิธีการตั้งแต่เริ่มแรกจนถึงขั้นตอนสุดท้ายใหม่ทั้งหมดเลยแล้วกันนะครับ Step By Step ซึ่งอาจจะแตกต่างกันบ้างในขั้นตอนการติดตั้ง Ajax ลงใน Visual Studio ก็ลองทำความเข้าใจและประยุกต์ใช้ดูแล้วกันนะครับ ในกรณีตัวอย่างของผมได้ทำการ Extract ZIP File และตั้งชื่อใหม่ว่า AjaxControlToolkit3.5 แล้ว Copy ไปวางไว้ที่ C:\Program Files\Microsoft.NETดังตัวอย่างรูปที่ 1

รูปที่ 1

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 1 เสร็จเรียบร้อยแล้ว ให้เปิดโปรแกรม Microsoft Visual Studio ขึ้นมา ซึ่งในที่นี้ผมใช้ Microsoft Visual Studio2008 Team Suiteและ Windows Server 2003 R2 ซึ่งถ้าใครใช้ Version อื่นก็ไม่เป็นไร เพราะไม่ได้มีอะไรแตกต่างกันมากนัก เมื่อเปิดโปรแกรมขึ้นมาแล้ว ให้คลิกที่เมนู File --> Open --> Project/Solution… ดังตัวอย่างรูปที่ 2

รูปที่ 2

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 2 แล้ว Windows จะแสดงหน้าต่าง Open Project ขึ้นมา ให้ทำการเลือกไฟล์ Project โดยเข้าไปที่ Path ตามที่เราได้ทำตามตัวอย่างรูปที่ 1 C:\Program Files\Microsoft.NET\ AjaxControlToolkit3.5ดังตัวอย่างรูปที่ 3

รูปที่ 3

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 3 แล้วจะปรากฎรายชื่อไฟล์ และ โฟลเดอร์ ในโฟลเดอร์ AjaxControlToolkit3.5ให้ทำการเลือก Open File ที่ชื่อ AjaxControlToolkit.sln ดังตัวอย่างรูปที่ 4

รูปที่ 4

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 4 แล้วจะกลับเข้าสู่หน้าหลักของโปรแกรม Microsoft visual studio ให้ทำการเปิดไฟล์ที่เราต้องการแก้ไข Code เพื่อให้ Ajax Calendar แสดงผลในรูปแบบไทยขึ้นมา โดยการ Double Clickที่ไฟล์ชื่อ CalendarBehavior.js ดังตัวอย่างรูปที่ 5

รูปที่ 5

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 5แล้วโปรแกรมจะแสดง Code ของ File CalendarBehavior.js ขึ้นมา ดังตัวอย่างรูปที่ 6

รูปที่ 6

เมื่อเสร็จสิ้นขั้นตอนตามรูปที่ 6 แล้ว ต่อไปก็จะเป็นการแก้ไข Code Java Script เพื่อให้ Ajax Calendar สามารถแสดงผลในรูปแบบไทย โดยมีการแก้ไข Code ดังต่อไปนี้

1. ให้ไปที่ Function _performLayout ประมาณบรรทัดที่ 1018 หรือจะใช้ คำสั่งให้โปรแกรมค้นหาก็ได้ โดยกดปุ่ม Ctrl+f แล้วพิมพ์ _performLayout: function() ลงไปแล้ว Click ที่ปุ่ม Find Next เมื่อเจอแล้วให้เลื่อน Cursor ลงมาหาช่วงข้อความ Code ให้เหมือนกับ Code ดังตัวอย่างรูปที่ 7

รูปที่ 7

เมื่อพบ Code ตามตัวอย่างรูปที่ 7 แล้วให้พิมพ์ Code เพิ่มลงไป ดังตัวอย่างรูปที่ 8

รูปที่ 8

2. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 8 แล้วให้เลื่อน Cursor ลงมาอีกประมาณ 20 - 25 บรรทัด หาข้อความ Code ตามตัวอย่างรูปที่ 9

รูปที่ 9

เมื่อพบ Code ตามตัวอย่างรูปที่ 9 แล้วให้พิมพ์ Code เพิ่มลงไป ดังตัวอย่างรูปที่ 10

รูปที่ 10

3. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 10 แล้วให้เลื่อน Cursor ลงมาอีกหาข้อความ Code ตามตัวอย่างรูปที่ 11

รูปที่ 11

เมื่อพบ Code ตามตัวอย่างรูปที่ 11 แล้วให้พิมพ์ Code เพิ่มลงไป ดังตัวอย่างรูปที่ 12

รูปที่ 12

4. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 12 แล้วให้เลื่อน Cursor ลงมาอีกหาข้อความ Code ตามตัวอย่างรูปที่ 13

รูปที่ 13

เมื่อพบ Code ตามตัวอย่างรูปที่ 13 แล้วให้พิมพ์ Code เพิ่มลงไป ดังตัวอย่างรูปที่ 14

รูปที่ 14

5. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 14 แล้วให้เลื่อน Cursor ลงมาอีกหาข้อความ Code ตามตัวอย่างรูปที่ 15

รูปที่ 15

เมื่อพบ Code ตามตัวอย่างรูปที่ 15 แล้วให้พิมพ์ Code เพิ่มลงไป ดังตัวอย่างรูปที่ 16

รูปที่ 16

6. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 16 แล้วให้ค้นหา Function set_selectedDate แล้วพิมพ์ Code เพิ่มลงไป ตามตัวอย่างรูปที่ 17

รูปที่ 17

7. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 17 แล้วให้ค้นหา Function _element_onchange แล้วพิมพ์ Code เพิ่มลงไป ตามตัวอย่างรูปที่ 18

รูปที่18

8. เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 18 แล้วให้ค้นหา Function get_selectedDate แล้วพิมพ์ Code เพิ่มลงไป ตามตัวอย่างรูปที่ 19

รูปที่ 19

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 19 แล้วก็เป็นอันเสร็จสิ้นขั้นตอนการแก้ไขปรับปรุง Code Java Script ขั้นตอนต่อไปก็จะเป็นการทำให้ Ajax Calendar ในส่วนของวันที่ปัจจุบันจากที่แสดงคำว่า “Today” เปลี่ยนเป็นคำว่า “วันนี้”ให้ไปที่ Folder ScriptResources แล้วหาไฟล์ที่ชื่อ ScriptResources.resxแล้วทำการคลิกเมาส์ขวาที่ไฟล์ ScriptResources.resxเลือกคำสั่ง Copy เสร็จแล้วให้ทำการคลิกเมาส์ขวาที่ Folder ScriptResourcesเลือกคำสั่ง Past เสร็จแล้วจะเห็นไฟล์ชื่อ Copy of ScriptResources.resxเพิ่มเข้ามาใน Folder ScriptResourcesให้เปลี่ยนชื่อเป็น ScriptResources.th-TH.resxดังตัวอย่างตามรูปที่ 20

รูปที่ 20

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 20 เสร็จแล้วให้ Double Click ที่ไฟล์ ScriptResources.th-TH.resxเพื่อเปิดไฟล์ขึ้นมาแก้ไขข้อความ เสร็จแล้วให้พิมพ์เปลี่ยนข้อความจากคำว่า “Today” เปลี่ยนเป็นคำว่า “วันนี้”ลงไป ดังตัวอย่างตามรูปที่ 21

รูปที่ 21

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 21แล้วก็เป็นอันเสร็จสิ้นขั้นตอนการแก้ไขปรับปรุง Code การแสดงผลต่างๆ ทั้งหมดแล้ว ขั้นตอนต่อไปก็จะเป็นการ Compile Code เพื่อนำไปใช้โดยการ คลิกเมาส์ขวาที่ AjaxControlToolkit แล้วเลือกคำสั่ง Build แล้วรอจนกระทั้งโปรแกรมทำการ Build เสร็จ แล้วให้คลิกเมาส์ขวาที่ Solution ‘AjaxControlToolkit’ แล้วเลือกคำสั่ง Build แล้วรอจนกระทั้งโปรแกรมทำการ Build เสร็จ ดังตัวอย่างตามรูปที่ 22

รูปที่ 22

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 22 แล้วต่อไปก็จะเป็นขั้นตอนการนำไปใช้ ในส่วนนี้จะขอเริ่มจากการติดตั้ง Ajax Control Toolkitลงใน MS Visual Studio 2008 เลยแล้วกันนะครับ โดยเริ่มจากการเข้าไปที่ Folder Debug ของ Ajax ControlToolkit ตาม Path ที่ได้ทำไว้ในขั้นตอนแรกตามตัวอย่างรูปที่ 1 ในที่นี้จะเป็น C:\Program Files\Microsoft.NET\AjaxControlToolkit3.5\AjaxControlToolkit\bin\Debugแล้วจะเห็น File ต่างๆ ดังตัวอย่างรูปที่ 23

รูปที่ 23

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 23แล้วให้ทำการ Copy File ทั้งหมดไปไว้ที่ Folder Binariesดังตัวอย่างรูปที่ 24

รูปที่ 24

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 24 แล้วให้เปิดโปรแกรม MS Visual Studio ขึ้นมา แล้วสร้าง ProjectWeb Application ใหม่ขึ้นมาโดยไปที่เมนู File --> New --> Project… ให้ตั้งชื่อ Project แล้วคลิกปุ่ม OK ดังตัวอย่างรูปที่ 25

รูปที่ 25

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 25 แล้วให้ทำการติดตั้ง Ajax ControlToolkit โดยไปที่หน้า Design แล้วคลิกเมาส์ขวาที่กลุ่ม ToolBoxแล้วเลือกคำสั่ง Add Tab เสร็จแล้วโปรแกรมจะให้ตั้งชื่อ Tab ที่สร้างขึ้นใหม่โดยการพิมพ์ข้อความลงไป ในที่นี้ผมตั้งชื่อเป็น AJAX Control ToolKit 3.5 ตามตัวอย่างรูปที่ 26

รูปที่ 26

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 26 แล้วให้คลิกเมาส์ขวา Tabที่สร้างขึ้นมาใหม่ในขั้นตอนตามตัวอย่างรูปที่ 26 แล้วเลือกคำสั่ง Choose Items…ดังตัวอย่างตามรูปที่ 27

รูปที่ 27

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 27 แล้วโปรแกรมจะให้เลือก Items ที่จะนำเข้ามาวางใน Tab ที่ได้เลือกไว้ในขณะนี้ โดยคลิกที่ปุ่ม Browse… แล้วเข้าไปที่ Folder Binaries ตาม Path ที่ได้ทำในขั้นตอนตามรูปตัวอย่างที่ 24 แล้วให้เลือกไฟล์ AjaxControlToolkit.dllต่อจากนั้นให้คลิกที่ปุ่ม Open ดังตัวอย่างตามรูปที่ 28

รูปที่ 28

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 28 แล้วให้คลิกเลือก Items ของ Ajax Control Toolkit แล้วคลิกปุ่ม OK ดังตัวอย่างรูปที่ 29

รูปที่ 29

เมื่อทำขั้นตอนตามตัวอย่างรูปที่ 29 เสร็จแล้วที่ ToolBox ใน Tab ที่เราได้สร้างขึ้นมาใหม่จะมี Control ต่างๆ ของ Ajax ControlToolkit เพิ่มเข้ามา ดังตัวอย่างรูปที่ 30

รูปที่ 30

ขั้นตอนต่อไปก็จะเป็นการทดสอบใช้ Control Ajax Calendar โดยวิธีการดังต่อไปนี้

1. คลิกเมาส์ซ้ายที่ Control ScriptManager ค้างไว้ แล้วลากมาวางลงบน Form ตามตัวอย่างรูปที่ 31

รูปที่ 31

2. ไปที่ Properties ของ Control ScriptManager เปลี่ยนค่า EnableScriptGlobalization ให้เป็น True ตามตัวอย่างรูปที่ 32

รูปที่ 32

3. ลาก Control TextBoxและ Control ImageButtonมาวางลงบน Form ตามตัวอย่างรูปที่ 31

รูปที่ 33

4. นำรูปภาพ Calendar Include เข้า Project แล้วไปที่ Properties ของ Control ImageButton เลือก Properties ImageUrl เลือกรูปภาพ Calendar ที่นำเข้ามาเพื่อให้แสดงที่ ImageButton ดังตัวอย่างรูปที่ 34

รูปที่ 34

5. คลิกเมาส์ขวาที่ Control TextBoxเลือกคำสั่ง Add Extender… แล้วเลือก Calendar Extender หากต้องการเปลี่ยนชื่อก็ให้พิมพ์ชื่อใหม่เข้าไปที่กล่องข้อความ จากนั้นให้คลิกปุ่ม OKดังตัวอย่างรูปที่ 35

รูปที่ 35

6. ไปที่ Properties ของ Control TextBoxเลือก TextBox1_CalendarExtender (ตามชื่อที่ตั้งในขั้นตอนตามรูปที่ 35)แล้วเลือก Properties PopupButtonID ให้พิมพ์ชื่อ (ID) ของ Control ImageButton ลงไป ดังตัวอย่างรูปที่ 36

รูปที่ 36

7. เปิดไฟล์ web.config ขึ้นมา แล้วพิมพ์ข้อความ Code เพิ่มเข้าไปใต้ Tag <system.web> ตามตัวอย่างรูปที่ 37

รูปที่ 37

8. ให้ Copy Folder th-TH จาก Path ตามตัวอย่างรูปที่ 24 นำไปวางไว้ใน Folder bin อยู่ใน Project ที่สร้างขึ้นมานี้ ซึ่ง Path จะเป็นที่เดียวกับตอนสร้าง Projectในช่อง Location ตามขั้นตอนตัวอย่างรูปที่ 25 เมื่อวาง Folder เรียบร้อยแล้ว ก็ทำการ Run Project เพื่อดูการแสดงผล เป็นอันเสร็จสิ้น ตามตัวอย่างรูปที่ 38