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

Jedsada Saengow
Aug 31, 2018 · 3 min read

มาถึงบทความสุดท้ายแล้วสำหรับ 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 นะครับ

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



JED-NG

Like reading | Like sharing | Like blogging

Jedsada Saengow

Written by

I am JE(D)

JED-NG

JED-NG

Like reading | Like sharing | Like blogging

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade