ModalPopupExtender of AjaxControl Toolkit

posted on 18 Mar 2009 17:48 by ouilek in PROGRAMMING

วันนี้ออกตัว (ล้อฟรี) ไว้ก่อนเลยว่า.. จะอัพแนววิชาการงาน (วิชาการงาน แปลว่า "งานที่ตรูอยู่ตอนนี้" - - แล้วตอนนี้เมิงทำไรอยู่ฟร่ะ??) ตอนนี้ทำระบบ (เวอร์ไปเอาใหม่) ตอนนี้ทำ Application อยู่ app นึง ซึ่งเป็น Internal Application โดยที่ Application นี้จะเอาไว้ใช้ Support การทำงานร่วมกันระหว่าง Developer | QA Quality Assurance | Coordinator

 

ต้องเล่ายาวแค่ไหนฟร่ะ.. ไม่เล่าแล้ว.. หยุดมันไว้แค่นั้นแหละ วันนี้จะเอา code VB.NET ที่เขียนด้วย Visual Studio.NET 2008 ใช้ .NET Framework 3.5 (จริงๆ แม่มแทบไม่ได้ใช้ แค่เขียน code ให้เป็นไปตาม standard ของ .Net Framework 3.5 ส่วน code เก่าที่มันสามารถ run บน Framework ต่ำกว่านี้คือ 2.0 และ 3.0 นั่นก็สามารถ run ได้ แต่พอ Build Solution แล้วตรง Error List หรือตรงที่มันไม่ได้เป็นไปตาม Standard 3.5 มันจะขึ้นที่ error list เป็น warning และที่ code จะเป็นเส้นยึกๆ สีเหลือง ไม่แก้ก็ run ได้ แต่กุรำคาญก็เลยแก้ -*-

 

เริ่มเลย.. อย่าบ่นนานไปยายแก่ พูดเยอะไปก็เท่านั้นหลักการไม่มี ที่ทำได้ก็ copy code ชาวบ้านเค้ามา apply ที่บ่นๆ ข้างบนก็ตามความเข้าใจ ใครเข้ามาอ่านแล้วจะมาร้อง "เฮ้ย!! อีนี่โง่จริงๆ ไม่รู้เรื่อง" จะบอกว่าแค่คิดเมิงคิดได้ แต่ถ้าเมิง comment ด่ากุ เมิงโดนตบ ก๊ากกกกกกกกกก

 

ก็กุออกตัวไว้แล้วว่ามันตามความเข้าใจ.. อ่อไม่ต้องมาหวังดีมาเจือกเปลี่ยนความคิดกุ.. กุไม่ชอบ กุคิดแบบนี้กุก็ทำงานได้ (เรื่องของเรื่องขี้เกียจ..) จะได้เริ่มยังฟร่ะ..

 

ModalPopupExtender (AjaxControlToolkit Framework 3.5 SP1)
ก่อนใช้ต้อง install ก่อน.. หลังจาก install แล้วจะได้ dll ที่ชื่อว่า AjaxControlToolkit.dll เปิดโปรเจคแล้ว add file .dll เข้ามาไว้ในโปรเจคเลย ตรง toolbox จะเห็นว่าจะมีแถบเครื่องมือมากมาย เราก็คลิกขวาที่แถบเครื่องมือ แล้วเลือก Add Tool ตามภาพเรียงลงไปเลยนะ.. ตรงนี้อุ้ยไม่อยากลงลึกมาก.. (ขี้เกียจทำรูป) 555+

 

 

 

พอคลิกอะไรเรียบร้อยแล้ว.. เราจะได้ Tool ของ AjaxControlToolkit มาเพียบเลย.. แต่สำหรับ Entry นี้เราจะ Focus ไปที่ Control ModalPopupExtender หลายคนที่ไม่รู้อาจจะสงสัย ModalPopup เป็นไง เป็นแบบนี้

เป็น Tool ที่ใช้ในการ Popup Page ในหน้าเดียวกันจากการคลิก Control Event นึงๆ และเมื่อ Popup ขึ้นมาแล้วเราจะไม่สามารถไปทำอะไรที่หน้าหลักได้เลย นอกจากเราจะคลิก Button ที่หน้า Child ก่อน จริงๆ มันมี tools ที่ง่ายกว่านี้และสวยกว่านี้นะ ก็คือ Telerik Ajax แต่อันนั้นมันเสียเงิน และที่สวยกว่านั้นอีกบน .Net Framwork 3.5 คือ Telerik Silverlight อ่ะเรากลับมาดู code กัน

 

เริ่มด้วยการเขียน Code Control Button ที่เราต้องการคลิกแล้วให้ show ModalPopup อันนี้อุ้ยทำแบบง่ายๆ เลยนะ เอาหลักการก็พอ ที่เหลือเอาไป adapt ของนะจ้า อ่อลืมบอก ทุกอย่างทำอยู่ในหน้าหลักทั้งหมดเลยนะ ตรง popup อ่ะ เราจะ popup ในส่วนของที่เป็น panel เด่วจะให้ดู code อีกทีจ้า..  

ตรง OnClientclick เป็นการใส่ JavaScript ให้กับ Event ของปุ่ม คือเมื่อมีการ Click ที่ปุ่มแล้วให้ไปเรียก function ของ JavaScript (เอาชื่อ Function ของ JavaScript ที่เขียนไว้มาใส่แล้วตามด้วย ( วงเล็บเปิดและ ) วงเล็บปิด) ซึ่ง JavaScript จะเขียน Code แบบนี้งับ

จาก code อาจจะดูงงๆ หน่อยนะ เพราะอาจจะมีบางชื่อที่อุ้ยตั้งไม่ตรงกัน พอดีรีบๆ ก็เลยลืมแก้ชื่อก่อน Capture ภาพมาให้ แต่เด่วอุ้ยจะอธิบายในส่วนที่ต้องเปลี่ยนตามนี้นะคะ เวลาเอาไปใช้จะได้ไม่งง

1. ModalPopupEx2 - เปลี่ยนตามชื่อของ Control ModalPopupExtender
2. btnFileOK_Click - เปลี่ยนตามชื่อ Event ในหน้าที่ต้องการให้ Popup อ่ะค่ะ เช่นพอเรา Browse File แล้วก็จะมีปุ่ม OK นั่นล่ะเอา Event ของปุ่มนั่นมาใส่
3. FileUpload - ตรงนี้เปลี่ยนตาม id ของ Tag Div คะ

 

ในส่วนต่อไปจะเป็น Control ModalPopupExtender สังเกตุว่าจะมี style sheet อยู่ที่ชื่อว่า BackgroundCssClass="modalBackground" ตรงนี้เป็นส่วนที่ Set Background เวลา Popup เด่วอุ้ยอนุญาติมาลง style sheet ให้ในวันหลังนะคะ ยังไงอยากได้ style sheet ก็กลับมาดูนะคะ

 

ส่วนนี้จะเป็นการเขียน code สำหรับ Popup คะ ซึ่งเราจะเขียนไว้ใน Panel ซึ่งจริงๆ แล้วควรจะต้องมี Tag Div ครอบก่อน Panel ด้วย แบบนี้ <div id="ชื่อของ Tag ที่บอกว่าต้องเอาไปใส่ใน JavaScript"></div> อย่าลืมใส่นะคะ พอดีอุ้ยไม่ได้ capture มาด้วย ขออภัยค่ะ

มีอะไรสงสัยสอบถามเพิ่มเติมได้นะคะ ส่วนอุ้ยจะขอติด style sheet ไว้ก่อนคะ เด่วเอามาแปะให้ตอนหลัง ^^ สนุกกับการเขียน code นะคะ

 

Comment

Comment:

Tweet

โห สาว ป.โท คนนี้ เป็นวิชาการมั่ก มาก ผิดกับเมื่อก่อนลิบลับเลยนะเนี่ย หุ หุ หุ
สงสัยต้องย้ยายมาทำที่นี่ด้วยซะแร้วพี่อุ้ย

ไดเยนขยันล่ม

เบื๊อเบื่อ
คิดอยู๋ว่าจะทำไดอิสดีมั้ย

เทคแคร์ค่ะพี่ออย เอ๊ย พี่อุ๊ย อิอิ

#14 By มะยม (119.31.80.232) on 2009-04-21 10:17

แวะมาเยี่ยมเยียน

สบายดีป่าวค๊า เป็นไงบ้าง ไม่ได้แวะมานาน

เอ่อ.. ขออนุญาต ไม่ได้อ่านเลย

แบบว่า ไม่รู้เรื่องเลย 55

ป.ล. แล้วเจอกันนะ อิอิ

#13 By bpotter (58.10.9.160) on 2009-04-20 17:10

แวะมาสาดน้ำจ้า ขันน้ำ ขันน้ำ ดอกมะลิ big smile
ขันน้ำ ปืนฉีดน้ำ แวะมาเติมหยดน้ำ

#11 By subsub on 2009-04-07 13:24

โอ๊ะ!สมองบวมเลยอ่ะconfused smile๕๕๕
เก่งอ่ะอุ้ย...จริงๆถ้าคนที่เค้าอยากได้ข้อมูลมีประโยชน์มากเลยนะ เพราะบางทีเรื่อง code อ่านหนังอย่างเดียวไม่พอต้องให้ผู้รู้ช่วยแบบนี้แหละbig smile

#10 By A girl living on the island on 2009-04-01 00:51

กลับมาแล้วหลัีงเก็บตัว

สรุปก็คือ LAN Onboard ของ Mainboard เสีย

เลยถอด Mainboard ไปเคลมเอง

ส่วน Router นั่น Port 1 เสีย อีก 3 Port ใช้ได้ (มี 4 Port)

เลยโทรให้ช่างทรูเอา Router มาเปลี่ยนให้

เรื่องใช้ได้ไม่นานเน่าอันนี้ไม่รู้เหมือนกันบอกได้อย่างเดียวว่าซวย

แม่ด่าอีก - -* ว่าทำไมของซื้อมาไม่ถึงปีเสียแล้ว

(พอเิกินปีก็ด่าอยู่ดี ไมุ่ถึง 2 ปีก็เสียแล้ว sad smile )

#9 By Maxtrix™ on 2009-03-30 13:34

ไม่เข้าใจเลยขอบอกๆ


แต่เคยแอบก๊อปโค้ดหน้าเวบไดอารี่ของชาวบ้านมาอะแด๊บ ตอนทำไดอารี่ที่ผ่านๆมา หุๆ ซึ่งมันก้อพอได้แบบเด็กๆอะนะ


แต่ถึงอย่างไรต้องขอคารวะพวกโปรแกรมเม่อร์นะ
ที่ออกแบบเวบ ได้ไฉไลโดนจาย..

#8 By ewweew (124.121.156.57) on 2009-03-27 17:31

เห็นรูปหัวบล๊อกแล้วคิดว่า เขากรมหลวงนี่มันสูงจริง ๆ เนอะ วิ่งขึ้นไปได้งัยเนี่ย (ปีนี้วิ่งขึ้นเขาโคตรบ่อยเลย เหนื่อย)

#7 By เจ้าชายน้อย on 2009-03-26 22:27

อ่านสองย่อหน้าแรก แล้วเลื่อนลงมาเม้นต์ให้ไว เอนทรี่นี้ไม่เหมาะกับพี่จริง ๆ ขอโต้ดด้วยครับ ที่อ่านไม่หมด

#6 By เจ้าชายน้อย on 2009-03-26 22:26

เราทำไม่เป็นแฮะ big smile

มาอรุณสวัสดิ์ ค่ะ

#5 By ~ N ~ on 2009-03-25 07:29

กลายเป็น blog สอนเขียน code ไปซะแล้ว

confused smile confused smile confused smile

#4 By riddler on 2009-03-25 07:12

Ajax!!!

มันก็สะดวกดีนะสวยดีด้วย

แต่ไม่รู้พื้นฐานเลยนี่สิปัญหา

ส่วนมากเอามาใช้แต่ลูกเล่นนิดหน่อยๆ

ใช้ความสามารถหางอึ่งของ Ajax ไม่ถึง 1%

แต่ช่้วงนี้ Ajax กำลังดังเลยนะเนี่ย

#3 By Maxtrix™ on 2009-03-24 16:58

big smile big smile big smile

#2 By Meowzilla Zilla on 2009-03-24 15:01

ไม่รู้เรื่อง ทำไม่เปน สอนมั่งดิ!!

#1 By subsub on 2009-03-24 10:45