[ASP.NET Core MVC Workshop#05(Last)] สร้างหน้า Edit Form และ Update ข้อมูลใน Database

มาถึงบทความสุดท้ายแล้วสำหรับ Workshop นี้ ต่อจากบทความที่แล้ว [ASP.NET Core MVC Workshop#04] การ Delete ข้อมูลใน Database เราจะนำ Source code มาทำต่อเช่นเดิม หรือจะ Download ได้ที่ Github ครับ

Flow การทำงานของการ Update ในบทความนี้

จากหน้า Index ไปหน้า Edit และ Update ข้อมูล ประมาณนี้

• คลิกที่ปุ่ม Edit ที่หน้า Index.cshtml
• แสดงหน้า Edit.cshtml พร้อมกับ Fill data
• แก้ไขที่หน้า Edit.cshtml เสร็จแล้ว Submit เพื่อ Save และกลับไปที่หน้า Index cshtml

สร้าง Form สำหรับ Edit

ให้สร้างไฟล์ root/Views/Movie/Edit.cshtml ขึ้นมา

และใส่ Code จากไฟล์ root/Views/Movie/Create.cshtml แต่จะเพิ่มส่วนของ <img /> และตัด javascript function สำหรับ validate ไฟล์ภาพออกนิดหน่อยตามภาพด้านล่าง

สุดท้ายเราจะได้ Code แบบนี้ในไฟล์ root/Views/Movie/Edit.cshtml

จากนั้นให้ไปที่ไฟล์ root/Controllers/MovieController.cs และเพิ่ม Method Edit() ซึ่งมันจะรับ id เข้ามาหา movie และ return กลับไปที่หน้า View ดังภาพ

จากนั้นให้เปิดไฟล์ root/Views/Movie/Index.cshtml เราจะทำการเพิ่มปุ่มเพื่อเปลี่ยนหน้ามาที่หน้า Edit

จากนั้นทำการ Run เพื่อทดสอบดูจะพบว่าไปที่หน้า Edit ได้ และมีข้อมูลแล้วนะ

สร้าง Method สำหรับ Update

ต่อไปให้เปิดไฟล์ root/Controllers/MovieController.cs และเพิ่ม Method Edit สำหรับ HttpPost เพื่อสำหรับรับค่าที่แก้ไข มาทำการ Update ข้อมูลลง Database

จากภาพจะเห็นว่ามีความคล้ายกับ Method Create เพียงแต่ต่างกันเล็กน้อย อธิบายแต่ละส่วนดังนี้

• oldMovie คือ Data ตัวเก่าที่จะนำมา Set ค่าเดิมให้กับ Movie ตัวใหม่
• ตัดการเช็คไฟล์ออกไป เพราะว่าการ Edit ข้อมูลไม่มีความจำเป็นว่าจะเปลี่ยนไฟล์ใหม่ทุกครั้ง แต่จะไปเช็คข้างในสำหรับการเปลี่ยนค่า model.coverImg
• Set old data หมายถึง การนำค่าเดิมมาใส่ model ตัวใหม่ เพราะว่าเมื่อใช้คำสั่ง newContext.Entry(model).State = EntityState.Modified จะทำให้ model นั้น ๆ เปลี่ยนค่าทั้งหมดใน Context

สุดท้ายจะได้ไฟล์ MovieController.cs หน้าตาแบบนี้ครับ

ทดสอบ

มาถึงบทความ Workshop สุดท้ายแล้ว ก็ลองทดสอบ Flow ทั้งหมดดีกว่าครับว่าจะเหมือนกับที่ตั้งเป้าไว้หรือไม่

ส่วน Source code ทั้งหมดสามารถ Download ได้ที่ลิงค์ด้านล่างครับ

jedsada-jed/training-dotnet-core-mvc

สรุป Workshop นี้

บทความนี้คือบทความสุดท้ายของชุด ASP.NET Core MVC Workshop จุดประสงค์นั้น อยากให้ผู้อ่านได้เข้าใจและลองทำตามไปพร้อมกันได้ แม้ว่าวิธีการเขียน Code หรือวิธีจัดการในส่วนต่าง ๆ ที่ได้นำเสนอไป ไม่ใช่วิธีการที่ดีที่สุด หรือใช้ได้ในทุกสถานการณ์ แต่ผู้เขียนหวังว่า จะเป็นประโยชน์และช่วยลดเวลาการเรียนรู้ให้ผู้ที่เริ่มต้น หรือผู้ที่มีภาษาอังกฤษเป็นอุปสรรค หรือผู้ที่มาใหม่จากสาย Win app นะครับ

อย่างไรก็ตามขอบคุณท่านผู้อ่านทุกท่านที่ได้อ่านจนจบ

บทความสำหรับ ASP.NET Core MVC Workshop ทั้งหมด

• การติดตั้ง Microsoft Visual Studio Community for Mac และทดสอบสร้าง Project
• การติดตั้ง DB Browser for SQLite และทดสอบสร้าง Database
• [ASP.NET Core MVC Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap
• [ASP.NET Core MVC Workshop#02] การ Select ข้อมูลจาก Database ด้วย Model และแสดงข้อมูลด้วย​ Table
• [ASP.NET Core MVC Workshop#03] การทำ Form พร้อม Validate และการ Insert ข้อมูลลง Database
• [ASP.NET Core MVC Workshop#04] การ Delete ข้อมูลใน Database
• [ASP.NET Core MVC Workshop#05(Last)] สร้างหน้า Edit Form และ Update ข้อมูลใน Database

หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ ติชม สามารถติดต่อผู้เขียนได้เลยครับ

Reference

• https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/nerddinner/provide-crud-create-read-update-delete-data-form-entry-support
• https://stackoverflow.com/questions/8821892/html-actionlink-with-an-id-for-the-link
• https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/examining-the-edit-methods-and-edit-view
• https://stackoverflow.com/questions/38372293/asp-net-mvc-entitystate-modified-crash