ASP.NET MVC 3: Code-First Development และ Scaffolding CRUD interface

ตอนสุดท้าย …

บทความนี้ต่อเนื่องจากบทความ ASP.NET MVC 3: โครงสร้างของ MVC โดยใช้ Razor

เรามาพัฒนา projects CustomersManagmentApplication กันต่อเลยดีกว่าครับ

วิเคราะห์ ออกแบบ และลงมือสร้าง Domain Model …

Web Application นี้มีขอบเขตทำงานง่ายๆ เป็น Simple CRM ที่เพิ่ม ค้นหา แก้ไข และลบ(CRUD) ข้อมูลลูกค้าได้เท่านี้พอละ ทำไปตามขั้นตอน ดังนี้

1. เพิ่ม model Customer ไปที่ folder Models click ขวา -> Add -> Class… ตามภาพ

2. ตั้งชื่อ class Customer แล้วกด Add

3. File class Customer.cs เข้าไปอยู่ใน folder Models แล้วตามภาพ

4. เข้าไปที่ file Customer.cs เพิ่ม code Propertiesให้ Customer ตามภาพครับ


5. เพิ่ม class CrmContext เข้าไปใน folder Models โดยทำเหมือนขั้นตอนเพิ่ม Customer class แล้วเขียน code ตามภาพข้างล่างนี้

จบขั้นตอนทั้ง 5 แล้วเราก็มี Models ตาม Business Domain ของเราเรียบร้อยแล้วครับ โดยขอบเขตของตัวอย่างนี้ คือสร้าง แสดง แก้ไข และลบ(เรียกย่อๆว่า CRUD) Customer เท่านั้นครับ

ขั้นตอนต่อไปผมจะสร้าง Controller จากขั้นตอนนี้ผมจะได้ class Controller และ Action CURD พร้อมกับ View CURD Customer

สร้าง Controller และ View ด้วย ASP.NET MVC Scaffold …

1. เพิ่ม CustomerController class โดย click ขวา ที่ folder Controllers -> Add -> Controllers

2. จะมี dialog AddController เด้งขึ้นมา ตั้งชื่อ Controller name เป็น CustomerController แล้วเลือก Scaffolding option ตามภาพ

3. กด Add เป็นอันเสร็จพิธี สรุปโครงสร้าง folder Controllers, Models, Views และ Class Diagram ได้ดังนี้

Simple CRM Class Diagram(เขียนลวกๆนะครับ เอาให้ดูพอเข้าใจ)

ทดสอบ ทดสอบ …

1. กด run web application ขึ้นมา พอหน้าจอขึ้นมาแล้วพิมพ์ /Customer ต่อท้ายที่ URL ดูภาพ

2. กด Create New แล้วจะไปที่หน้า Create Customer นี้

3. ใส่ข้อมูลตามภาพข้างบน แล้วกด Create เมื่อสำเร็จแล้วจะขึ้นหน้านี้

เห็นข้อมูลแล้ว 1 record เป็นอันว่าเราสร้างข้อมูล Customer ได้สำเร็จแล้ว แล้วเจ้า CrmContext มันเอาข้อมูลเราไปเก็บไว้ที่ไหนละ

แน่นอนครับ Code-First Development ได้สร้างฐานข้อมูล พร้อมกับเพิ่มข้อมูล 1 record ที่เพิ่งจะเพิ่มไปตะกี้นี้ เป็นที่เรียบร้อยแล้ว ไปเปิดดูกันดีกว่าว่าข้อมูลเราอยู่ไหน (ข้อมูลเพิ่มเติม Code-First Development ด้วย Entity Framework)

1. ไปที่ Server Explorer กด Connect to Database จะเด้ง form Add Connection ขึ้นมาก แล้วเลือกข้อมูลตามภาพข้างล่างนี้เลย

2. กด Test Connection ดูครับถ้าขึ้นเหมือนหน้าจอของผม ข้างล่างนี้ก็เป็นอันใช้ได้(ถ้าไม่ได้ก็ comment หรือ mail มาถามได้ครับ)

3. พอกด OK แล้วลอง click ดูโครงสร้างฐานข้อมูล CustomersManagmentApplication.Models.CrmContext ก็จะเห็น table Customers ตามภาพ

ก็เห็นฐานข้อมูล และ table เก็บ Customer เป็นที่เรียบร้อยแล้ว เราไปทดสอบการ Edit Customer อีกเรื่องหนึ่งก่อนที่จะจบบทความนี้

1. เริ่มจากหน้าจอ Index ที่มี 1 record อยู่กดที่ Edit แล้วแก้ไขข้อมูล ชื่อ และนามสกุลตามภาพ

2. เมื่อกด Save แล้วมันจะกลับไปที่หน้าจอ Index ซึ่งจะเห็นว่าข้อมูลได้ถูกแก้ไขเป็นที่เรียบร้อย

3. โอ้ง่ายมากๆ เพื่อให้มั่นใจว่า แก้ไขลงฐานข้อมูลจริง กลับไปที่ Server Explorer แล้ว click ขวาที่ tabel Customers เลือก Show Table Data

จะขึ้นข้อมูลใน table ที่หน้าตาเหมือนที่เราได้แก้ไขไปแล้วเป๊ะ

จบครับสั้นๆ เทคนิคอื่นๆที่เกียวกับหัวข้อนี้ ก็คอยมา update ที่ blog ของผมนี้บ่อยๆนะครับ

ขอบคุณครับ 🙂

Advertisements

#net, #asp-net, #design, #pattenrs