เขียน ASP.NET ด้วย MVC เบื้องต้น

เขียน ASP.NET  ด้วย MVC เบื้องต้น

ต้องยอมรับว่าการพัฒนา web application ในสมัยนี้ MVC Pattern ได้รับความนิยมกันมาก เท่าที่ผมรู้ MVC Pattern ถูกคิดค้นออกแบบมาในสมัย xerox คิดค้น GUI แรก แล้วใช้ concept mvc เพื่อรับคำสั่งและประมวลผลจากผู้ใช้ เมื่อเวลาผ่านไปก็ถูกนำมาใช้กับ web application ในตอนนี้ ซึ่งทาง asp.net ของ microsoft เองก็มีการออกรูปแบบ .net ให้รองรับ mvc แล้วซึ่งหลักการนั้นก็จะคล้ายๆๆกัน โดยมี Model ที่จะออกมาในแนว ORM (Object-relational mapping) ซึงทำให้เขียนโปรแกรมเชื่อมต่อ database ง่ายขึ้น ส่วนของ controller นั้นก็จะมีเหมือนกันเกือบทุกค่ายคือการ route เพื่อจัดการ url ที่เรียกเข้ามาและดุรูปแบบของการส่งข้อมูลว่าเป็น GET หรือ POST ส่วนในด้านของ View นั้น ASP.NET MVC จะใช้ Template Engine Razor ซึ่งก็ถือว่าใช้งานง่ายสะดวกและประหยัดเวลาในการพัฒนา web application ได้

เริ่มแรกผมนั้นจะใช้โปรแกรม Visual Studio Express 2013 แล้วทำการ new projection เป็น Web ในส่วนของ c# และเลือก .Net Framework 4.5 ตั้งชื่อตามรูปคือ mvcbasic

 

ASP.NET MVC

 

 

2

หลังจากนั้นก็เลือกเป็น Empty เลือกรูปแบบ MVC ถ้าหากต้องการ test ด้วยก็ check add unit test ไปเพื่ออนาคตอยากลอง test program ของเรา

3

 

เมื่อสร้าง project เสร็จแล้วก็ทำการสร้าง Controller โดย click ขวาที่ folder  Controllers แล้วเลือก add controller โดยตั้งชื่อว่า HomeController เลือกเป็น MVC 5 Controller Empty ดังรูป

เมื่อสร้าง Controller Home เสร็จแล้วก็ลองกด ปุ่มรันตามรูป โดยเราสามารถเลือก browser ที่ต้องการได้ด้วย

เขียน ASP.NET ด้วย MVC เบื้องต้น

จะได้ผลลัพธ์ตามรูปครับ ที่เป็นแบบนี้เพราะเรา ไม่ได้สามารถ View เนื่องจาก method Index ใน HomeController นั้น return  View();

4

จากนั้นกดปุ่ม stop ก่อนแล้วทำการแก้ไข้ method Index ใน HomeController โดยเป็นจาก return View(); เป็น return “Thaicoding ASP.NET MVC”; จากนั้นกดปุ่มรันอีกครั้งจะไดผลตามรูปครับ

เป็นการ return ผลมาจาก Controller เลย

4.1

ที่นี้ก็กดปุ่ม stop เพื่อหยุดรันแล้วมาสร้างไฟล์ View ได้โดยการ click ขวาที่ method ต้องการจะ add view แล้วเลือก Add View.. ตามรูปครับ

5

ตั้งชื่อไฟล์ View เป็น Index เลือกแบบ Empty (without model)

6

เมื่อสร้างแล้วจะได้ไฟล์ Index.cshtml ที่อยู่ใน Views/Home ซึ่งเจ้า asp.net นั้นจะใช้หลักการ name notation ในการค้นหา view และจัดเก็บ view จากก็ทำการพิพม์ข้อความในไฟล์ view คือ Index.cshtml

[sourcecode language=”html”]

Thaicoding.net (View)

[/sourcecode]

จากนั้นก็ทำการแก้ไข HomeController ให้ return View(); เหมือนเดิมแล้วลอง run ดูจะได้ดังรูปครับ

7

ที่นี้ในส่วนต่อมาก็จะเป็น model ซึ่งเป็นส่วนที่เก็บ Business Logic หรือหลักการทำงานของ Program นั้นเองโดยทำการ click ขวาที่ folder Models แล้วเลือก add class ก็จะขึ้นตามรูปด้านล่างครับ

 

8

โดยผมตั้งชื่อว่า Member.cs ครับเมื่อสร้างเสร็จผมก็ทำการเขียนโค้ดเพื่อกำหนด attribute ของ model Member ดังนี้

[sourcecode language=”c#”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace mvcbasic.Models
{
public class Member
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
}
}

[/sourcecode]

 

ต่อจากนั้นผมข้ามไปแก้ไขไฟล์ view Index.cshtml โดยใช้ helper ในการสร้าง link มี code ดังนี้

[sourcecode language=”html”]

Thaicoding.net (View)
@Html.ActionLink(“Signup”,”SignupForm”)

[/sourcecode]

เมื่อลอง run จะเห็นมามันมีการสร้าง link มาให้แล้วซึ่ง link นี้จะเรียกใช้งาน HomeController แต่จะเป็น method ที่ชื่อว่า SignupForm

9

 

จากนั้นกด stop แล้วมาเพิ่ม method SignupForm โดยมีไม่เยอะโค้ดดังนี้

[sourcecode language=”c#”]

public ViewResult SignupForm()
{
return View();
}

[/sourcecode]

จากนั้น click ขวาที่ method SignupForm เพื่อ add view โดยตั้งชื่อ view ว่า SignupForm แล้วเลือก เป็น Empty แต่เลือก model เป็น Member ที่เราได้ทำการสร้างขึ้นก่อนหน้านี้ ซึ่งเป็นไปตามรูปด้านล่างครับ

 

10

จากนั้นทำการสร้างแบบฟอรม์สำหรับ key ข้อมูลโดยมี code ดังนี้

[sourcecode language=”html”]

@model mvcbasic.Models.Member

@{
Layout = null;
}




SignupForm

@using (Html.BeginForm()){

FirstName: @Html.TextBoxFor(x => x.FirstName)

LastName: @Html.TextBoxFor(x => x.LastName)

Email: @Html.TextBoxFor(x => x.Email)

Phone: @Html.TextBoxFor(x => x.Phone)


}


[/sourcecode]

จะสังเกตว่ามี การกำหนดชื่อ model ไว้ได้บนสุดด้วย @model จากนั้นในส่วนของ form นั้นจะใช้ Html Helper จาก form โดย view นี้จะเป็น textbox ซะส่วนใหญ่ แต่ก็มี helper ในการช่วยสร้างมันสามารถใช้คำสั่ง @Html.TextBoxFor ได้ เพื่อกำหนด attribute ที่จะนำค่าไปใช้ซึ่งมันจะทำการกำหนด name, id, maxlengh ใน html ให้เลยถือว่าสะดวกสบายเลยที่เดียว

เขียน ASP.NET ด้วย MVC เบื้องต้น

เมื่อลองรันก็จะได้ดังรูป

 

11

 

ที่นี้สังเกตว่า form นั้น action ไปยัง Home/SignupForm โดย method post ซึ่งใน asp.net mvc นั้นสามารถระบุได้ว่า method แต่ละอันนั้นจะทำการก็ต่อเมื่อส่งข้อมูล request มาเป็นแบบใดได้

ซึ่งผมได้ทำการสร้าง method SignupForm เพื่อขึ้นอีกอันมีโค้ดด้งนี้

[sourcecode language=”c#”]

[HttpGet]
public ViewResult SignupForm()
{
return View();
}

[HttpPost]
public ViewResult SignupForm(Member member)
{
return View(“SignupComplete”,member);
}

[/sourcecode]

จาก code เห็นว่าเราสามารถกำหนดได้ว่า method จะทำการเมื่อ request แบบใดด้วยการระบุ [ชื่อรูป] ไว้บนชื่อ method เลย ที่นี้เมื่อชื่อ method เหมือนกันเวลาเรียก view มันใช้    name notation ทำให้อาจสับสนได้เราสามารถระบุชื่อ ไฟล์ view ไปตรงๆได้ด้วยครับ โดยใน code จะเห็นว่าระบุเป็น SignupComplete ซึ่งนั้นหมายความว่าผมต้อง click ขวา add view ที่ชื่อว่า SignupComplete นั้นเอง โดยเลือกเป็น Empty และใช้ model Member เหมือนเดิมหลังจากสร้าง view SignupComplete เสร็จแล้วก็เขียนโค้ดตัวอย่างแบบนี้ครับ

[sourcecode language=”html”]

@model mvcbasic.Models.Member

@{
Layout = null;
}




SignupComplete

Signup Complete

Thankyou @Model.FirstName @Model.LastName


[/sourcecode]

ซึง่เมื่อลองรันดูแล้วก็ข้อมูลในหน้า form จากนั้นกดปุ่ม signup ก็จะได้ดังรูปและค่าก็ไปอยู่ใน model แล้วมาแสดงใน view SignupComplete  ก็เพราะในตอนสร้าง form นั้นเราใช้ คำสั่ง @Html.TextBoxFor  ทำให้ค่าที่กรอกใน textbox ถูกเก็บไว้ใน object ของ model ให้เลยเรียกว่าง่ายขึ้นเยอะเลยที่เดียว ซึ่ง method  ตอน Post นั้นคือ  SignupForm(Member member) ก็รับผลลัพธ์มาเป็น object Member แล้วทำการส่งไปยัง view ด้วยคำสั่ง return View(“SignupComplete”,member);

เขียน ASP.NET ด้วย MVC เบื้องต้น

จากตั้วอย่างจะเห็นว่า asp.net mvc มี tool ที่ช่วยลดงานในส่วนไม่สำคัญแต่ต้องทำประจำได้เยอะเลยที่เดียวครับ

 Download SouceCode

Leave a Reply

Your email address will not be published. Required fields are marked *