การพัฒนา ASP.NET Web Application – Page 4

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView จาก Code Behind

May 19, 2021 15:58

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C# ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้ 1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox OnCheckedChanged=”chkCallNo_CheckedChanged” คือ event ที่อยู่ใน code behind ที่จะถูกเรียกใช้เมื่อมีการคลิก 2. โค้ดในส่วนของการจำลองข้อมูล สามารถใช้โค้ดเดิมจากบทความเก่าได้เลย 3. เพิ่มโค้ดใน chkCallNo_CheckedChanged เพื่อควบคุมการซ่อน/แสดงคอลัมน์ที่ต้องการ โดย gvBib.Columns[3].Visible จะเป็นการกำหนดให้คอลัมน์ที่ 3 ของ Gridview แสดงผลหรือไม่ ซึ่งก็คือคอลัมน์ CallNo นั่นเอง (จะเริ่มนับตั้งแต่ 0) 4. ทดสอบการใช้งาน 5. จะเห็นว่าระบบสามารถทำงานได้ตามความต้องการ คอลัมน์จะซ่อน/แสดงได้ตามเงื่อนไขที่เราเลือกจาก checkbox แต่จะสังเกตเห็นว่า ทุกครั้งที่มีการเลือก checkbox ระบบจะ refresh หน้าจอใหม่ทุกครั้ง ซึ่งถ้าในหน้าจอที่เรากำลังทำงานมีข้อมูลอื่นๆ อีกหลายอย่าง ก็จะถูกโหลดซ้ำโดยไม่จำเป็น เพื่อแก้ไขปัญหานี้ ASP.NET จะมีเครื่องมือที่เรียกว่า UpdatePanel ซึ่งจะทำงานในแบบ Partial Load ได้ตามตามเงื่อนไขที่เรากำหนด โดยเราจะต้องปรับแก้โค้ด HTML เพิ่มเติมดังนี้ สิ่งที่เพิ่มเติมเข้ามาคือ ScriptManager สำหรับใช้ควบคุมการทำงาน UpdatePanel UpdatePanel ใช้ครอบ component หรือพื้นที่ที่เราต้องให้สามารถทำ Partial Load ได้ ในที่นี่คือเราครอบ Gridview นั่นเอง Triggers จะเป็นการกำหนดเพื่อให้เกิด Partial Load ตาม control และ event ที่ได้ระบุเอาไว้ ในที่นี้คือ จะโหลดเมื่อ chkCallNo เกิด event CheckdChanged ซึ่งก็คือเหตุการณ์คลิกนั่นเอง ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง จะเห็นว่าหลังจากมีการปรับแก้โค้ดไปแล้ว ทุกครั้งที่มีการคลิก CheckBox และมีการซ่อน/แสดงคอลัมน์ จะไม่มีการ refresh หน้าจออีกแล้ว เพราะ UpdatePanel ที่เราได้เพิ่มเข้าไปจะควบคุมให้มีการโหลดข้อมูลใหม่เฉพาะ component ที่อยู่ภายใน UpdatePanel เท่านั้น จากบทความนี้ก็จะเป็นวิธีการซ่อน/แสดงคอลัมน์ใน Gridview อีกทางเลือกหนึ่ง ที่ผู้อ่านสามารถนำไปประยุกต์ใช้กับงานของตัวเองได้ ในกรณีที่เราไม่อยากเพิ่ม jQuery เข้ามาในโครงการที่กำลังทำ หรือเห็นว่าไม่ถนัดในการใช้งาน jQuery ก็ตามแต่ ซึ่งผู้อ่านสามารถเลือกแนวทางได้เองตามอัธยาศัย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx http://theheing.blogspot.com/2012/04/ajax-updatepanel-control.html

ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery

May 19, 2021 12:56

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์ 2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn ซึ่งอยู่ใน namespace System.Data เพราะฉะนั้นจะต้อง Import namespace นี้ด้วย 3. เพิ่มโค้ด jQuery เพื่อควบคุมการแสดง/ซ่อน คอลัมน์ เมื่อมีการคลิก เลือก/ยกเลิก เช็คบ๊อก (โดยในบทความนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการติดตั้ง jQuery ออกไป) ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง และเมื่อคลิกเช็คบ๊อก Show CallNo ออก คอลัมน์ CallNo ใน Gridview ก็จะหายไป จากตัวอย่างโค้ดในบทความนี้ จะเห็นว่าการซ่อนหรือแสดงคอลัมน์ด้วย jQuery ไม่ได้มีความยุ่งยาก สามารถนำไปประยุกต์ใช้กับงานของท่านได้ ซึ่งผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์กับท่านผู้อ่านไม่มากก็น้อย สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx

จะทำอย่างไรให้สามารถดึงข้อมูลมาแสดงผลด้วย Progress bar โดยใช้ .Net (C#)

May 17, 2021 12:55

จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ แบบแถบละสี ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์ จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % ตัวอย่างการเรียกใช้งาน ผลลัพธ์ แบบหลายสีในแถบเดียวกัน(แบบที่ 1) โดยในตัวอย่างนี้ จะเป็นการแสดงข้อมูลจำนวนผลไม้เป็น % รวมในแถบ Progress bar เดียวกัน ซึ่งจะแยกตามสี และมีบอกจำนวนรวมถึงชื่อผลไม้ให้ทราบ อีกทั้งยังแสดงจำนวนรวมของผลไม้ทุกชนิดด้วย โดยมีวิธีการทำ ดังนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง ผลลัพธ์ แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2) ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้ สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % หากข้อมูลที่ต้องการแสดงผลตกอยู่ในช่วงใดก็จะมีการแสดงแถบสีนั้นขึ้นมาให้เห็นตามลำดับ โดยมีวิธีการทำต่อไปนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ ผลลัพธ์ หมายเหตุ : จากตัวอย่างข้างต้น เป็นเพียงการยกตัวอย่างเพื่อให้ผู้อ่านเข้าใจการประยุกต์ใช้งาน และการทำงานร่วมกับ Progress bar เพิ่มมากขึ้นเท่านั้น ซึ่งผู้อ่านสามารถดัดแปลง และมีวิธีการรวมถึงเทคนิคที่แตกต่างออกไปที่จะนำมาใช้ในการพัฒนาเพื่อแสดงผลข้อมูล ขึ้นกับอัลกอริธึมของแต่ละท่าน จากบทความนี้จะเห็นได้ว่า วิธีการดึงข้อมูลมาแสดงผลด้วย Progress bar แบบนี้ จะมีความยืดหยุ่นกว่าแบบที่มีการกำหนดค่าตายตัวในบทความก่อนหน้า อีกทั้งยังสามารถแสดงจำนวนแถบ Progress bar และสีได้ไม่จำกัด ขึ้นอยู่กับข้อมูล การกำหนดเงื่อนไขในการแสดงผล และความต้องการของผู้พัฒนาที่จะดึงข้อมูลมาแสดงผลนั่นเอง และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้ จะพอเป็นแนวทางในการนำไปใช้งานจริงให้กับทุกท่านได้นะคะ ขอบคุณค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

มาทำความรู้จักและเรียนรู้การใช้งาน Progress bar ในเบื้องต้นกันเถอะ

May 17, 2021 12:53

โดยปกติแล้วในการพัฒนาเว็บไซต์ของเรา คงมีบางเวลาที่เราอาจจะอยากแสดงผลข้อมูลของเราในรูปแบบของ Progress bar ซึ่งเป็นแถบของข้อมูล เพื่อเพิ่มมุมมองให้กับการแสดงผลให้ไม่น่าเบื่อจำเจแทนที่จะเป็นเพียงการแสดงผลตัวเลขเฉยๆ โดยเจ้า Progress bar นี้จะทำให้เราเห็นภาพได้ว่า ข้อมูลของเราได้ดำเนินการใกล้ถึงเป้าหมายแล้วหรือยัง ซึ่งขึ้นอยู่กับวัตถุประสงค์ในการนำไปใช้ ดังนั้นในบทความนี้ ผู้เขียนจึงขอแนะนำวิธีการใช้งาน Progress bar แบบเบื้องต้น โดยจะมีขั้นตอนง่ายๆ 3 ขั้นตอน ดังนี้ การกำหนสไตล์ชีท โดยเราจะใช้สไตล์ชีทเหล่านี้ เพื่อช่วยให้การแสดงผลของ Progress bar ของเราสวยงามมากยิ่งขึ้น ซึ่งการกำหนดสไตล์ชีทสามารถทำได้ 2 วิธี คือแบบที่กำหนดในไฟล์เลย หรือแยกเป็นไฟล์สไตล์ชีทต่างหากได้ ซึ่งโดยส่วนตัวผู้เขียนขอแนะนำให้ทำเป็นแบบแยกไฟล์สไตล์ชีทออกมาต่างหากแล้วอ้างถึงจากไฟล์ที่เรียกใช้แทน เพื่อง่ายต่อการปรับปรุง และใช้งานในครั้งต่อไปค่ะ ไฟล์ Progress.css เพิ่มเติม : การอ้างอิงไฟล์สไตล์ชีทจากภายนอก โดยที่อยู่ของไฟล์ก็ขึ้นกับการระบุของแต่ละท่าน 2. การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html คำอธิบาย : จากตัวอย่าง จะเห็นว่าเราสามารถปรับแต่งและใส่ข้อมูลให้กับ Progress bar 3 ส่วนคือ ข้อความบนแถบ Progress bar ได้ในส่วนของ Progress-title คือ <h3 class=”progress-title”>Basic Progress</h3> กำหนดความกว้างของ Progress bar ได้ผ่านทาง style-inline คือ style=”width:85%;” แสดงข้อความจำนวนของข้อมูลบนแถบ Progress bar คือ <div class=”progress-value“><span>85</span>%</div> นั่นเอง 3. การเรียกใช้งาน jQuery เพื่อการแสดงผล Progress bar ของเราให้มีการเพิ่มขึ้นของจำนวนเลขที่แสดงตั้งแต่ 0 จนถึงจำนวนเลขนั้น เช่น หากเลขที่ต้องการแสดงคือ 60% ตัวเลขแสดงจำนวนดังกล่าวจะค่อยๆเปลี่ยนแปลงเพิ่มขึ้นโดยเริ่มจาก 0 จนถึง 60 นั่นเอง ผลลัพธ์ เพิ่มเติม จากตัวอย่างข้างต้น จะเป็นการแสดงผล Progress bar แบบพื้นฐานอย่างง่าย เพียงเท่านี้ท่านก็จะสร้าง Progress bar ได้ด้วยตนเองแล้ว แต่หากท่านใดที่อยากเพิ่มสีสันและความสวยงามให้กับ Progress bar ของท่าน ก็สามารถทำได้ดังตัวอย่างนี้ค่ะ1. ปรับแก้เพิ่มเติมในส่วนของการกำหนดพื้นที่ในการแสดงผล 2. เพิ่มสไตล์ชีทที่ใช้สำหรับเพิ่มสีสันให้กับ Progress bar ของเรา ผลลัพธ์ จากตัวอย่างข้างต้น จะเป็นวิธีการสร้าง Progress bar ที่มีการใส่สีสันให้กับแต่ละแถบเส้น แต่ลูกเล่นของการแสดงผล Progress bar ยังสามารถทำได้หลายแบบ ซึ่งผู้เขียนจะขอแนะนำอีกวิธี ซึ่งเป็นการสร้าง Progress bar แบบหลายสีในแถบเดียวกันโดยมีวิธีการเพิ่มเติม ดังนี้ค่ะ การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html จากโค้ดตัวอย่างข้างต้น จะสังเกตเห็นว่าการกำหนดค่าต่างๆจะมีลักษณะกับหลักการที่กล่าวไว้แล้วข้างต้น แต่จะแตกต่างกันตรงที่การแสดงผลหลายแถบสีในแถบเดียวกันจะมีการกำหนด progress bar ภายใต้แท็ก <div class=”progress”> เดียวกัน และหากต้องการกำหนดให้มีกี่แถบสีก็สามารถเพิ่มสี และกำหนดขนาดของแต่ละแถบสีได้ตามต้องการ ผลลัพธ์ โดยบทความนี้ก็ถือเป็นเพียงส่วนหนึ่งของการแนะนำการใช้งาน รวมถึงลูกเล่นของ Progress bar ในเบื้องต้นเท่านั้น เนื่องจากรูปแบบและการใช้งานของ Progress bar ยังมีให้เลือกใช้ เลือกลองกันอีกมากมายหลายแบบเลยนะคะ ผู้เขียนหวังว่าความรู้จากบทความนี้จะเป็นพื้นฐานและตัวช่วยให้กับนักพัฒนาสามารถนำไปประยุกต์ใช้ในงานของตนได้ไม่มากก็น้อยค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

การทำ Partial Rendering สำหรับ User Controls

November 30, 2020 20:44

สำหรับท่านใดที่ยังใช้งาน ASP.NET Web From ในการพัฒนาเว็บไซต์อยู่ คงคุ้นเคยกับการใช้งาน User Controls เป็นอย่างดีเนื่องจากเป็นการสร้าง UI เพื่อใช้งานซ้ำในหลายๆ Page ซึ่งเป็นที่นิยม สำหรับบทความนี้จะแนะนำวิธีการ แยกเรนเดอร์ User Controls ที่มีปัญหาโหลดช้าอันเนื่องมาจากสาเหตุใดก็ตาม และเป็นข้อมูลเพิ่มเติมที่ผู้ใช้ไม่จำเป็นต้องเห็นเป็นอย่างแรก โดยมีขั้นตอนดังนี้ 1.เพิ่ม HTML Container element เช่น Div, Panel ในหน้าจอ ที่ต้องการใช้งาน เช่น 2.เพิ่ม Ajax Controls toolkit : Dynamic Populate ใช้เพื่อ Render HTML หลังจากที่ Page Load เสร็จเรียบร้อย TargetControlsID คือ ID ของ HTML Container element ที่เราต้องการแสดงผล HTML ของ User Controls ที่เราสร้างมาจาก Web Service ServicePath คือ Path ของ Web Service ที่เรียกใช้งาน ServiceMethod คือ Web Method ที่ใช้ Render User Controls UpdatingCssClass คือ CSS Class ที่ต้องการให้แสดงระหว่างรอ Load HTML 3.Java Script เรียกใช้งาน Ajax Controls toolkit : Dynamic Populate และเพิ่มเติมฟังก์ชันที่ต้องการขณะแสดงผล User Controls 4.สร้าง Web Method สำหรับสร้าง HTML ของ User Controls รูปแบบของ Web Service Method ซึ่งจะต้องมี Return Type เป็น string และรับ Parameter ชื่อ contextKey ซึ่งมี Type เป็น string เช่นกัน เรียก Method ชื่อ RenderUserControl โดยระบุ Path ของ User Control ที่ต้องการ และ List ของ Property ทั้งหมดของ User Control 5.Method ที่ใช้ในการสร้างเนื้อหา HTML จาก User Controls เพียงเท่านี้ เราก็สามารถเรียกใช้งาน User Control นี้ในหน้าจอต่างๆ ได้โดยไม่ต้องกังวลเรื่องเพิ่มเวลาโหลดให้กับหน้าจอแสดงผลนั้นๆแล้วครับ อย่างไรก็ดีบทความนี้ผมได้เขียนไว้นานมากแล้ว แต่ยังไม่ได้นำมาเผยแพร่ ในปัจจุบันอาจมีวิธีการอื่นๆ และ ASP.NET ที่เป็น Web Form อาจจะได้รับความนิยมน้อยลงไปแล้ว แต่สำหรับท่านที่ต้องดูแล และปรับปรุงระบบเก่าๆ ไม่สามารถเขียนขึ้นมาใหม่ทั้งหมดได้ ก็ยังสามารถนำเทคนิคนี้ไปปรับใช้กับระบบของตนเองได้ครับ