ASP.NET MVC 4 CRUD Entity Framework


การเริ่มต้น พัฒนาโปรแกรม
ASP.NET MVC 4 เพื่อจัดการข้อมูล
ผ่าน EF(Entity Framework)

ทำได้ได้ง่ายมาก
ด้วย 3 ขั้นตอน

  1. สร้าง โปรเจ็กต์
  2. สร้าง Model
  3. สร้าง Controller

ดังนี้

 

1. สร้างโปรเจ็กต์


1. สร้างโปรเจ็กต์ ด้วย ASP.NET MVC 4 Web Application

image

 

2. เลือกเทมเพลต Internet Allication กด OK
image

…แล้วรอสักครู่
image

 

3. คุณจะเจอหน้าจอแรก HomeController.cs (ซึ่งไม่กล่าวถึง)

image

 

2. สร้าง Model


4.สร้าง EF ชี้ไปยังฐานข้อมูล ของคุณ
โดยคลิก ขวา บนโฟลเดอร์ Model => Add = >New Item…

image

 

5. พิมพ์ Entity ในช่อง Search…
   เลือก…
   พิมพ์ชื่อ ….
   แล้วกด Add

image

 

6. เลือกสร้าง Model จากฐานข้อมุล …
   สร้าง Connection คลิก New Connection…

image  image

7. …

image  image

 

8. เลือกตาราง…
   กด Finish …
   คุณจะได้ Model ดังรูป

image  image

 

3. สร้าง Controllers


9. คลิกขวา บนโฟลเดอร์ Controller =>  Add = > Controller…

image

 

10.
ตั้งชื่อ Controller เป็น ProductController
เลือก Template…
เลือก Model class…
เลือก Data context class…
แล้วกดปุ่ม Add
image

 

11. เมื่อสร้าง ProductController เรียบร้อย
มันจะสร้าง View ให้ทันที
พร้อมโค้ดในการจัดการข้อมูล ให้พร้อม
…ลืมการเขียนโค้ด ไปเลย…

image

… … …

image

 

4. เพิ่มเมนู


12. ไปที่โฟลเดอร์ Shared…
เปิดไฟล์ _Layout.cshtml

แล้วเพิ่มบรรทัดนี้…
<li>@Html.ActionLink(“Product”, “Index”, “Product”)</li>

image

 

 

5. ทดสอบโปรแกรม


13. คลิกเมนู Product
คุณจะเห็นรายการ ข้อมูล Product…

image

 

14.
เมื่อกด Edit สามารถแก้ไขข้อมูลทันที…
เมื่อกด Detail จะแสดงรายการ ของแถวนั้น ในหน้า Detail… 

image  image

 

15.
คุณสามารถเพิ่ม Style Sheet
เพื่อจัดรูปแบบ แสดงข้อมูล
ให้ดู สวยงามขึ้น ได้…

โดยไปที่โฟลเดอร์ Content แล้วเปิดไฟล์ Site.css
คุณจะแก้ไข ของเดิม หรือแปะ เข้าไปใหม่ ได้

ผมแปะเข้าไปใหม่
ในบรรทัดสุดท้าย ด้วย css นี้


/*gridtable*/
table.gridtable {
            font-family: Tahoma,verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
/*gridtable*/ ปล. ลืมไปแล้วว่า เคย Copy มาจากที่ใหน สักแห่งบน Google


 

แล้ววางลงไปดังรูป….

image

 

ไปที่ View … Index.cshtml… แล้วกำหนด Style ลงไป

image

 

รันโปรแกรม ใหม่อีกครั้ง
หน้าจอ จากแตกต่างไป….

image

 

จบบริบูรญ์

 

แหล่งข้อมูลเพิ่มเติม:

 


ผู้เขียน

clip_image019

นุชิต อรรจนวรรจน์
Software Development Section Manager
บ.โฟลว์โก้ จำกัด

Microsoft MVP: https://mvp.support.microsoft.com/profile/nuchit,
GF Community Leader(nano): http://greatfriends.biz/,
Blog: http://bit.ly/JANAWAT,
Facebook: nuchit, Twitter: @janawat

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

Tagged with:
เขียนใน ASP.NET MVC

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: