[ASP.NET Web Forms Workshop#03] การทำ Form และการ Insert ข้อมูลลง Database
เราจะสร้าง Form ขึ้นสำหรับกรอกข้อมูล และ Insert ลง Database นะครับ รวมไปถึงการทำ Validation Form, การใช้ Control ต่าง ๆ ในหน้า Form, การ Save รูปภาพ รวมไปถึงการใช้ JavaScript(jQuery) เข้ามาด้วย โดยจะใช้ Project เดิมจากบทความ [ASP.NET Web Forms Workshop#02] การ Select ข้อมูลจาก Database แสดงตารางด้วย GridView หรือจะ Download มาใหม่ได้ครับที่ github ครับ
จากนั้นให้เราเปิด Project ขึ้นมาและสร้างไฟล์ Web Form with MasterPage ขึ้นมาชื่อว่า MovieAdd.aspx (สำหรับชื่อไฟล์ ส่วนตัวแล้วผู้เขียนชอบให้เรื่องเดียวกัน มีชื่อต้นเหมือนกันเพื่อสะดวกในการเช็คและค้นหาในเรื่องเดียวกัน)
เพื่อความสะดวกในการเข้าถึง มาแก้ไข NavBar (Navigation Bar) ที่ไฟล์ Site.Master ดังภาพครับ
สร้าง Form และ Insert ข้อมูลลง Database
ต่อไปให้สร้าง Form ที่หน้า MovieAdd.aspx ให้พิมพ์ Code ภายใต้ <asp:Content /> และเราจะใช้ DatePicker ด้วย โดยตัวที่จะใช้ แนะนำให้ใช้เป็นตัวที่ทำงานด้วย JavaScript ซึ่งต้องติดตั้งเพิ่มเติมผ่าน NuGet Package Manager ดังนี้
คลิกขาวที่ Project และเลือก Manage NuGet Packages…
จะพบกับหน้าต่าง NuGet Package Manager ให้ไปที่ Tab: Browse และค้นหาโดยพิมพ์ว่า “Datetimepicker” และเลือกรายการ “Bootstrap.v3.Datetimepicker” จากนั้นคลิกที่ Install ดังภาพ
จะพบหน้าต่างรายละเอียดของ Version ให้คลิกที่ OK
หากพบกล่องข้อความลักษณะนี้ หมายความว่าตัวติดตั้งตรวจพบไฟล์ที่มีชื่อเดียวกันอยู่ จะให้ทำการ overwrite หรือไม่ ให้เราตอบที่ Yes to All (หากไม่ทำการเขียนไฟล์ทับ หรือ overwrite ไฟล์เดิมของเรานั้นอาจจะไม่มี code ในส่วนของ DatePicker และจะทำให้ไม่สามารถใช้งานได้ครับ)
หากพบกล่องข้อความลักษณะนี้อีก ให้คลิกที่ Yes to All ได้เลยครับ
เมื่อมีติดตั้งเสร็จแล้วให้ท่านผู้อ่านติดตั้งตัว Bootstrap.v3.Datetimepicker.CSS ต่อได้เลยครับ เมื่อเสร็จแล้วให้ลองทดสอบ Run Project ดูครับ
Booooom !! กลายเป็นโกโก้ครั้น
สาเหตุที่ Error เพราะเจ้าตัวนี้ที่หน้า Site.Master ครับ
ซึ่งมันเป็นตัวที่จัดการจะเรียกใช้ CSS ครับ แต่ว่าเท่าที่ผู้เขียนได้หา issue ดูจากเว็บต่าง ๆ แล้ว มีผู้ให้คำตอบว่าตามปกติแล้วจะไม่พบ Error แบบนี้ครับ แต่ไม่ได้ระบุวิธีแก้แต่อย่างใด ผู้เขียนจึงใช้วิธีลบมันออกและระบุ Path ของไฟล์ CSS แบบทั่วไปครับ และให้เพิ่ม Path ของ JavaScript เพิ่มที่เกี่ยวกับ DatePicker ด้วยดังภาพด้านล่าง
จากนั้นให้ไปที่หน้า MovieAdd.aspx ครับ เราจะเพิ่ม Code ที่เป็นส่วนของ Form ดังภาพด้านล่าง
ในส่วนของการตั้งชื่อ Method ของ OnClick ของ Button นั้น ขออธิบายเล็กน้อยว่า สำหรับ Attribute ที่เป็น Event ของ Tag ของ .NET เมื่อพิมพ์ไปแล้ว จะมี AutoComplete ขึ้นมาให้เราเลือก <Create New Event> ตัว Method นี้จะถูกสร้างขึ้นอัตโนมัติที่หน้า Behind code ดังภาพ
จากนั้นให้เรา Save และ Run Project เพื่อดูหน้าตา Form ของเรา
ต่อไปให้เราเปิดหน้า MovieRepository.cs ขึ้นมา เราจะสร้าง Method สำหรับการ Insert ข้อมูลลง Database และให้เพิ่ม Class สำหรับ get, set ข้อมูลของ Movie ดังนี้
เราจะทำการเรียกใช้ Method นี้โดยให้ไปที่หน้า MovieAdd.aspx พิมพ์ Code ในส่วนของ btnSubmit_Click และ Page_Load ดังนี้
จากนั้น Run Project เพื่อทำการทดสอบ ให้ท่านผู้อ่านกรอกข้อมูลให้ครบถ้วน และคลิกที่ปุ่ม Submit จะได้ผลลัพธ์ดังนี้
ให้เราลองไปที่หน้า MovieList เพื่อเช็คว่าข้อมูลได้ถูกเพิ่มเข้ามาจริง
ทีนี้เรามาลองใส่ ข้อมูลแบบไม่ครบบ้าง โดยไม่ระบุความยาวของภาพยนต์ เมื่อเราคลิกที่ Submit จะพบว่า Error !!
เนื่องจากว่าข้อมูลที่เราคาดหวังไว้ตามที่เรา Design Database ไม่ถูกต้อง นั่นคือ 1 ในหลายเหตุผลที่เราต้องทำ Validate Form
การ Validation Form
ในที่นี้ ถ้าพูดอย่างง่ายก็คือ การป้องกันและดักจับค่าที่ไม่ถูกต้องและแจ้งกับ User ให้ทราบเพื่อ User จะได้กรอกข้อมูลได้ถูกต้องนั่นเอง
ซึ่งเราสามารถทำได้ทั้ง
- Code C# (ทำงานฝั่ง Server)
- JavaScript (ทำงานฝั่ง Client)
แต่ก่อนอื่นเราจะทำ Alert สำหรับโชว์เมื่อทำงาน Success และโชว์เมื่อ Error ก่อน ซึ่งจะทำโดยการสร้าง Function ของ JavaScript ทำงานโดย Set ค่าและสั่งโชว์ให้กับ Alert ให้ท่านผู้อ่านไปที่ไฟล์ Site.Master และพิมพ์ Code ตามแต่ละส่วน ดังนี้
ส่วนของ style สำหรับ alert message
ส่วนของ JavaScript Function สำหรับ Alert (เรียกใช้ jQuery)
ส่วนของ div สำหรับเป็นกล่องข้อความ
เพื่อความสวยงาม ให้ท่านผู้อ่านเพิ่ม Code style เข้าไปที่ส่วนนี้ด้วยครับ
ท้ายที่สุดจะได้ Code สำหรับหน้า Site.Master ดังนี้ครับ
จากนั้น ให้เปิดไฟล์ MovieAdd.aspx.cs เพิ่มส่วนของ try catch และการเรียกใช้ Alert เข้ามา ดังนี้
ลองดูสอบการทำงานกรณีที่เป็น Success และ Error
เอาล่ะ มาทำ Validate Forms กันจริง ๆ ซักที
เริ่มกันที่ C# ให้เปิดไฟล์ MovieAdd.cs ขึ้นมา ขอทำการ Refactor Code ซักเล็กน้อย เพื่อสะดวกในการเรียกใช้ด้วย ให้พิมพ์ดังนี้
ส่วนของ Refactor Code ให้แยกมาเป็น Method เป็นดังนี้
และให้พิมพ์ Code เกี่ยวกับ Validate ในส่วนของ btnSubmit_Click โดยทั้งหมดจะเป็นดังนี้ครับ
ท้ายที่สุดจะได้ Code สำหรับหน้า MovieAdd.aspx.cs ตามด้านล่างครับ
ให้ลองทดสอบการทำงานดูครับ
ต่อไปลองทำด้วย JavaScript ให้เปิดไฟล์ MovieAdd.aspx จะต้องเพิ่ม Code สำหรับ Button ให้เรียกใช้ OnClientClick และ เพิ่ม Function ในส่วนของ JavaScript ดังนี้
ส่วนของ Button ให้พิมพ์เป็น
ส่วนของ Function สำหรับ JavaScript ให้พิมพ์ดังนี้
ท้ายที่สุดจะได้ Code สำหรับหน้า MovieAdd.aspx ตามด้านล่างครับ
มาถึงตอนสุดท้ายแล้วครับ ให้ลองทดสอบการทำงานดูเช่นเดียวกับตอนทดสอบแบบ C# ว่าจะเหมือนกันมั้ย ต่างกันอย่างไร
สำหรับบทความนี้ก็จบเรียบร้อยครับ ตั้งใจว่าจะเขียนให้กระชับโดยเน้นเรื่องการ Insert เท่านั้น แต่อยากจะสื่อให้เห็นถึงการทำ Form และการทำ Validate ทั้งฝั่ง Client และ ฝั่ง Server ไปด้วยเลย เพราะท่านผู้อ่านจะได้เข้าใจหลากการทำงานของหลาย ๆ ส่วน บอกตามตรงว่ากลัวท่านผู้อ่านจะเบื่อ แต่ด้วยความคิดที่ผมเคยหาบทความในสมัยเริ่มต้นที่อ่านจบแล้ว มีสกิลพอตัวเลย และเข้าใจเพิ่มขึ้น โดยลดเวลาของตัวเองน้อยลง มันมีอยู่ไม่มาก ทำให้ต้องเปิดหลาย ๆ บทความ ก็อดไม่ได้จริง ๆ ที่จะต้องแชร์ให้กับท่านผู้อ่านได้รับรู้ครับ ขอบคุณท่านผู้อ่านทุกท่านที่อ่านจนจบเช่นเดิมครับ แล้วพบกันในบทความหน้าครับ
หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ คำติ สามารถติดต่อผู้เขียนได้เลยครับ
