[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 ได้ที่ลิงค์ด้านล่างครับ
สรุป 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