[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]

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# อย่างละเอียดด้วย)  คลิก

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

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

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 ได้ตามความต้องการ

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

(vb = visual basic)

หมายความว่า แถวว่างเปล่าที่ต่อท้ายทุกๆ string พูดง่ายๆ ก็คือ

เป็นตัวเก็บว่า string นั้นได้ขึ้นบรรทัดใหม่แล้ว

เป็น Function การตัด string

ตัวอย่างเช่น

มี textbox ที่เป็น multiline (หรือ textarea ใน html) ก็เป็นช่องสำหรับใส่ Description (txtDescription)
และก็มีส่วนที่แสดง Description ที่เป็น label ธรรมดา (lblDescription)
ต้องการให้ lblDescription แสดงการขึ้นบันทัดใหม่เหมือนตอนใส่ใน txtDescription

1. สร้าง Design Page ดังนี้ (Propeties ของ Textbox) อย่าลืมปรับ
textmode เป็น multiline   

2. เมื่อของ Build ดู ก็จะได้แบบนี้

3. ลองใส่โค้ด แบบธรรมดา ตามนี้

lblDescription.Text = txtDescription.Text

4. จะได้ผลลัพธ์แบบนี้ (อยู่บรรทัดเดียวกัน)

5. ลองเปลี่ยนโค้ดเป็นแบบนี้ดู

lblDescription.Text = Replace(txtDescription.Text, vbCrLf, "<br>")

6. ว๊าว… ได้ผลลัพธ์อย่างที่ต้องการแล้ว (อยู่คนละบรรทัด)

ง่ายนิดเดียว~

Function การตัด String

ตัวอย่าง

Dim ReplaceTxt as String
ReplaceTxt = "บรรทัดแรก
บรรทัดสอง
บรรทัดสาม"
replace(ReplaceTxt,vbcrlf,"")


ก็จะได้ค่า คือ “บรรทัดแรกบรรทัดสองบรรทัดสาม”