Meawznoy

หลังจากคราวที่แล้ว ได้ทำการสร้าง CheckBox ใน GridView เพื่อแสดงข้อมูลจากฐานข้อมูลแล้ว

[ASP.net+VB] สร้าง CheckBox ใน GridView

มาคราวนี้ ก็จะมาเพิ่มเติมลูกเล่นให้กับ GridView

โดยที่ Header ของ GridView นี้ จะให้สามารถ Select All และ Unselect All ได้

แบบนี้

1. เลือก Edit Header Template เพื่อไปสร้าง Event ให้กับ CheckBox ที่ Header ของ GridView



2. เลือก Event CheckedChange ของ CheckBox ที่เป็น Header Template



3. พิมพ์โค้ดตามนี้้

If CType(GridView1.HeaderRow.FindControl("chkHeader"), CheckBox).Checked Then
Dim i As Integer
For i = 0 To GridView1.Rows.Count - 1
Dim gvRow As GridViewRow = gvTransfer.Rows(i)
CType(gvRow.FindControl("chkItem"), CheckBox).Checked = True
Next
Else
Dim i As Integer
For i = 0 To GridView1.Rows.Count - 1
Dim gvRow As GridViewRow = GridView1.Rows(i)
CType(gvRow.FindControl("chkItem"), CheckBox).Checked = False
Next
End If

4. ลองรันดู จะพบว่า ยังไม่สามารถทำได้



5. แต่อย่าเพิ่งตกใจไป เนื่องจาก CheckBox นั้น AutoPostBack มันจะมีค่า Default เป็น False ซึ่งทำให้ เมื่อเราคลิกแล้ว โค้ดที่เขียนจะยังไม่ทำงาน ดังนั้นจึงต้องเปลี่ยน จาก False เป็น True ซะ เพื่อให้การคลิก CheckBox นั้น เกิดการ PostBack (ถ้างงว่า PostBack คืออะไร ให้อ่านที่นี่)

รายละเอียดเพิ่มเติม เกี่ยวกับโค้ดตัวอย่าง

เนื่องจากการสร้าง CheckBox ในครั้งนี้เป็นการสร้างใน GridView ดังนั้นจึงไม่สามารถเรียกใช้งานได้โดยตรง
จึงต้องเรียกผ่านทางฟังก์ชัน FindControl
ซึ่งเริ่มต้น เราต้องหา CheckBox ตัวที่เป็น Header ก่อน โดยใช้คำสั่งว่า
ชื่อGridView.HeaderRow.FindControl[ชื่อ ID ของ control ที่ต้องการค้นหา]
ถ้าพิมพ์แค่นี้จะเป็นแค่ expression ต้องทำการ Convert เป็นประเภทเดียวกับ Control ที่เราหา โดยใช้ฟังก์ชัน CType
เช่น CType(GridView1.HeaderRow.FindControl(“chkHeader”), CheckBox)

สำหรับ CheckBox ที่เป็น Item Template นั้น ใช้คำสั่งว่า
ชื่อGridView.Row(i).FindControl[ชื่อIDของcontrol]

[23.04.2009]

วันนี้ก็ยังทำอะไรมากไม่ได้ เนื่องจากข้อมูลต่างๆ ยังไม่ลงตัวดี

สิ่งที่ทำในวันนี้ก็คือ

• ทำ Select All / Unselect All
• ลอง Connect Database ที่เป็น MS Access

ตอนเย็น ช่วง Meeting รายงาน Progress

ได้รู้จัก PostBack

PostBack คือ การส่งค่ากลับคืนมาของหน้าเว็บเพจ
IsPostBack เป็นคุณสมบัติของ Page ซึ่งทำหน้าที่บอกว่า หน้าเว็บปัจจุบันนี้มีการส่งค่ากลับคืนมาหรือไม่ ซึ่งมันจะ return ค่าเป็น True/False โดยที่การโหลดหน้าเว็บครั้งแรกจะไม่มีการคืนค่า

ดังนั้น Page Load ครั้งแรกสุด IsPostBack จะมีค่า False

อ่านเพิ่มเติมเกี่ยวกับ PostBack (มีตัวอย่างให้ดูด้วย)  คลิก

ข้อแตกต่างระหว่าง HTML กับ Javascript

HTML เป็น server site ส่วน JavaScript เป็น client site

ความรู้ที่ได้ในวันนี้

• การทำ Select All / Un Select All  ที่หัวตารางของ GridView (ต่อจากคราวที่แล้ว)

วิธีทำ คลิกเลย

วันนี้จะมาทำ CheckBox ให้อยู่ใน GridView แบบนี้

1. เตรียม Database ให้พร้อม (ในที่นี้ใช้ Nwind.mdb)



2. เลือก control ที่ชื่อ GridView



3. จะได้แบบนี้



4. เลือก New data source



5. เลือก ประเภทของฐานข้อมูล ในที่นี้ใช้ Access



6. เลือกไฟล์ฐานข้อมูลที่ต้องการผูกติดกับ GridView



7. จากนั้นกด Next



8. เลือก Column, Table ที่ต้องการ



9. ลอง Test Query ดู เพื่อความมั่นใจ



10. เมื่อติดต่อกับฐานข้อมูลเรียบร้อยแล้ว ลองรันดูจะได้ผลลัพธ์แบบนี้



11. เริ่มขั้นตอนการสร้าง CheckBox ด้านหน้า โดยการคลิก Edit column



12. เลือก Add TemplateField



13. เลือก Edit Template



14. เลือก Item Template ของ Column[0]



15. ลาก CheckBox มา ( Item Template เป็นส่วนที่แสดงข้อมูล)



16. เลือก Header Template ของ Column[0]



17. ลาก CheckBox มาใส่ (ส่วน Header คือส่วนหัวของตาราง GridView)



18. เสร็จแล้วก็กด End Template Editing



19. ลองรันดู จะได้ผลลัพธ์ ตามต้องการ คือมี CheckBox อยู่ด้านหน้าของแต่ละแถว

วิธีทำวันนี้ ต้องขอบคุณ พี่ดิวและพี่มิซซู (-/|\-) อิอิ

อ่านเพิ่มเติม (มีตัวอย่างเป็น c# อย่างละเอียดด้วย)  คลิก

วันนี้จะทำ Pop Up Calendar แบบนี้

เมื่อคลิกที่ปุ่ม ก็จะโชว์ปฏิทิน แบบนี้

เตรียมพร้อมก่อนใช้งาน

1. ก่อนอื่น ต้องดาวโหลด Control Set จากเว็บนี้  eworldui.net เมื่อดาวโหลดมาเสร็จแล้วก็ install โลดดดดดดด



2. เมื่อ install เสร็จแล้วก็เปิด Visual Studio ขึ้นมา มองไปที่ toolbox แล้ว คลิกขวา เลือก Add Tab เพื่อสร้าง Tab สำหรับเก็บ Control ของ eWorldUI (จะไม่ Add Tab ก็ได้นะ แต่ทำไว้เพื่อความสะดวกในการใช้งานในครั้งต่อๆ ไป)



3. พิมพ์ชื่อ Tab ว่า  eWorldUI



4. เลือก Tab eWorldUI แล้วคลิกขวา Choose Items



5. เลือก Items ที่มี Namespac ว่า eWorld.UI ทั้งหมด (คลิก Namespace ก็ได้เพื่อให้เรียงตามตัวอักษร) จากนั้นกด OK



6. จะเห็นว่าที่ Toolbox ของเราจะมีเพิ่มขึ้นมามากมาย (แต่ในที่นี้จะแนะนำแค่ CalendarPopup อย่างเดียว อิอิ)



7. ต่อมา ไปที่ Solution Explorer คลิกขวาที่ชื่อ Project จากนั้นเลือก Add Reference



8. เลือก Excentrics World Controls



9. แค่นี้ก็พร้อมใช้งานแล้ว

ใช้งาน CalendarPopup (Design)

1. ลาก CalendarPopup มาจาก Toolbox จะได้ดังนี้



2. ลอง Run ดูจะได้แบบนี้



3. ลองคลิกที่ปุ่ม … จะได้แบบนี้



4. โอ้ววว เสร็จแล้ว pop up calendar ที่ต้องการ

(ไม่ต้องเขียนเองให้เมื่อยตุ้ม…)

ใช้งาน CalendarPopup (Coding)

หลังจากมี Design ของ CalendarPopup แล้ว ต่อมาเราก็จะมาเขียนโค้ดเพื่อนำไปใช้งาน

เป้าหมายคือ เมื่อเลือกวันที่เสร็จแล้ว กด OK ให้โชว์วันที่ที่เลือกไว้ (ง่ายๆ ก่อน)

1. หน้า Design เพิ่มเติมนิดหน่อยแบบนี้



2. Double Click ที่ปุ่ม OK เพื่อเขียนโค้ด

Dim myDate As Date
myDate = CalendarPopup1.SelectedDate
lblDate.Text = myDate.ToString()

3. ลอง Run ดู จะได้แบบนี้

ไม่เพียงแค่โชว์ Date ได้เท่านั้น ลอง CalendarPopup1.SelectedDate แล้วจุด ดูจะขึ้น Property มา สามารถเลือกได้ทั้ง Day, Month, Year, DayOfWeak เป็นต้น

ลองเล่นดูเพิ่มเติม และแล้ววันนี้ก็สร้าง Pop Up Calendar ได้ตามความต้องการ

ต้องขอบคุณพี่ดิว สำหรับคำแนะนำ ^^”