ASP.Net MVC 3 – Over View

ก่อนจะไป ASP.Net MVC ขอพูดถึง ASP.Net Web Form ก่อนสักนิด เพื่อให้เห็นความแตกต่าง

ASP.Net Web Form

เขียน Code ในแบบของ Event Driven

ข้อดี

1. Rapid Application Development สร้าง Web App. ได้เร็ว
2. ถ้าเคยเขียน Windows Form มาก่อน จะเรียนรู้ได้ทันที
3. Designer เป็น WYSIWYG
4. มี Server Side Controls ให้ใช้ในแบบ Drag and Drop

ข้อเสีย

1. เกิด network traffic มากจาก Viewstate และ Postback
2. Page Life Cycle ซับซ้อน
3. Control Client Script ได้ไม่สะดวก

ASP.Net ก็มีทั้งข้อดีและข้อเสียอยู่ แต่แล้วด้วยกระแส MVC จาก Ruby On Rails, Struts, JSF, etc. ทาง Microsoft จึงออก ASP.Net MVC ขึ้นมาเป็นทางเลือกเพื่อให้ Developer เลือกใช้ตามความเหมาะสมของ Project

ASP.Net MVC

เขียนในแบบ MVC

ข้อดี

1. แบ่งส่วนการทำงานอย่างชัดเจน เป็น Model, View และ Controller
2. ควบคุม
3. เรียบง่าย

MVC คืออะไร

Model – “Data” ที่วิ่งผ่านไปมาใน Application ทั้งที่เป็นการ View และInput รวมถึง Database และ Data Rules, Business Logic View – ส่วนของการแสดงผลติดต่อกับ User Controller – ส่วนของการควบคุม Flow การทำงานระหว่าง View และ Model

Asp.Net MVC 3 Pattern

View Engine, Controller, Model

 

First Asp.Net MVC 3 Project

สิ่งที่่ต้องมี

1. Visual Studio 2010 หรือ Visual Studio 2010 Express Web Development
   http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express-iso
2. Asp.Net MVC 3
   http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491

ตอนนี้เราจะมาเริ่มสร้าง Project แรกกัน

1. ไปที่เมนู File –> New Project ที่ Dialog New Project เลือก Visual C# –> ASP.Net MVC 3 Web Application (ใส่ชื่อและเลือก Location ตามต้องการ) แล้ว OK
   
2. เลือก Project Template เป็น Internet Application และ View Engine เป็น Razor แล้ว OK
   

   

3. ที่ขั้นตอนนี้เราจะได้ Project Asp.Net MVC 3 โดยที่ Solution Explorer จะเห็น Structure ของ Project ดังนี้

• App_Data เหมาะสำหรับใส่ Physical Data เช่น MDB, SDF, SQL Lite, etc.
• Content สำหรับพวก CSS, Image อะไรๆที่เป็น static
• Controllers เป็นที่เก็บ code ในส่วน Controller โดยปกติ Class ที่ทำหน้าที่เป็น Controller จะลงท้ายด้วย Controller ใน Template Project จะมีตัวอย่างมาให้คือ AccountController.cs กับ HomeController.cs
• Models เป็นที่เก็บ code ที่เกี่ยวก้องกับ Model เช่น Entity Class, Data Access
• Scripts เป็นส่วนของ Client Scripts จาก Template จะใส่ jQuery 1.5.1 และ jQuery UI 1.8.11 และ scripts อื่นๆของทาง MS มา
• Views เก็บส่วน View การแสดงผล ถ้า View Engine เป็น Razor จะเป็น .cshtml ส่วน ASPX ก็จะเป็น .aspx
  • View จะแยก Folder ตาม Controller
  • Shared จะเก็บสิ่งที่ View ใช้ร่วมกันอย่าง Master Page (_Layout.cshtml), Partial Page
  • _ViewStart.cshtml จะเป็น

กด F5 เพื่อ Run ก็จะเห็น Default Project ของ Asp.Net MVC ตามรูป

ใน Part ต่อไปและอธิบายการทำงานของ Controller

Advertisement