สร้าง StoreController
จาก
series 2 เราได้สร้างหน้า home กันแล้ว ต่อไปเราจะสร้าง controller สำหรับการทำงานกับ music store กันซึ่งมี 3 ฟังชั่นดังนี้
- หน้าแสดงรายการเพลงแบ่งตามประเภทที่มีอยู่ใน music store ของเรา
- หน้าแสดงรายการเพลงที่ระบุประเภทของเพลง
- หน้าแสดงรายละเอียดข้อมูลของแต่ละอัลบั้ม
เริ่มจากสร้าง StoreController ขึ้นมาทำแบบเดียวกันกับหน้า HomeController ใน
series 2 โดยคลิกเมาส์ขวาที่โฟลเดอร์ "Controllers" และเลือกเมนู Add->Controller ตามรูปที่ 1
รูปที่ 1
จะปรากฏตามรูปที่ 2 ให้ตั้งชื่อ "StoreController" แล้วกดปุ่ม Add
รูปที่ 2
จากรูปที่ 3 เราจะได้เมธอด "Index" เป็น default เลยเราจะใช้เมธอดนี้เพื่อ implement ฟังชั่นที่ 1 คือหน้าแสดงรายการเพลงแบ่งตามประเภทที่มีอยู่ใน music store ของเราและเราจะทำการเพิ่มอีก 2 เมธอดเพื่อ implement ฟังชั่นที่เหลือคือหน้า Browse (หน้าแสดงรายการเพลงที่ระบุประเภทของเพลง) และ หน้าแสดง Details (หน้าแสดงรายละเอียดข้อมูลของแต่ละอัลบั้ม)
เราจะได้ 3 เมธอดคือ Index, Browse และ Details ซึ่งจะเรียกว่า "Controller Actions" เช่นเดียวกับ
series 2 คือ HomeController.Index() ก็คือ "Controller Actions" ซึ่งทำหน้าที่ตอบกลับไปยัง URL request
ให้เราแก้ StoreController เมธอด Index, Browse และ Details เพื่อตอบกลับเป็นข้อความง่ายๆ ตามตัวอย่างที่ 1
รูปที่ 3
ตัวอย่างที่ 1
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class StoreController : Controller
{
//
// GET: /Store/
public string Index()
{
return "Hello from Store.Index()" ;
}
//
// GET: /Store/Browse
public string Browse()
{
return "Hello from Store.Browse()" ;
}
//
// GET: /Store/Details
public string Details()
{
return "Hello from Store.Details()" ;
}
}
}
ทดลอง run โปรเจคและทดสอบไปยัง URLs ต่างๆ:
- /Store
- /Store/Browse
- /Store/Details
ซึ่งการเรียก URLs เหล่านี้เป็นการเรียกใช้ action methods ที่อยู่ใน controller ของเรานั่นเองครับและผลที่ได้จะตอบกลับมาเป็นข้อความตามที่เราได้เขียนไว้ดังรูปที่ 4
รูปที่ 4
ต่อไปเราจะทำให้มัน dynamic ขึ้น ให้แก้ไขที่เมธอด Browse เพื่อรับ querystring ที่ส่งมาพร้อม URL โดยการเพิ่มพารามิเตอร์ "genre" ที่ action method ซึ่งการทำแบบนี้ ASP.NET MVC จะรับค่า querystring มาอัตโนมัติ แก้ไขไฟล์ StoreController ตามตัวอย่างที่ 2 (ก่อนแก้ให้ stop การรันก่อน)
ตัวอย่างที่ 2
//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
{
string message = HttpUtility .HtmlEncode(
new System.Text.StringBuilder ("Store.Browse, Genre = ")
.Append(genre).ToString());
return message;
}
แนะนำ: จะเห็นว่าในตัวอย่างที่ 2 แทนที่จะรับค่ามาแล้วใช้ + เพื่อต่อข้อความ string แต่จะใช้ StringBuilder แทนอันนี้ควรจะใช้ให้ติดเป็นนิสัยเพราะการต่อข้อความตัวแปร string ด้วยเครื่องหมาย + นั่นถ้าเป็นระบบใหญ่ๆ จะมีผลถ้าหากการต่อข้อความนั้นทำอยู่หลายที่ซึ่งถ้าให้ดีควรใช้ StringBuilder ไปเลยจะได้ไม่ต้องมาตามแก้กันทีหลัง
และการใช้ HttpUtility.HtmlEncode เป็นเมธอด utility ซึ่งช่วยป้องกันจากการส่ง script บางอย่างเพื่อโจมตีระบบ เป็นการป้องกันการ injection Javascript เช่น
/Store/Browse?Genre=
เมื่อแก้ไขเสร็จแล้วให้ทดลอง run เลยครับตามรูปที่ 5
รูปที่ 5
ต่อไปเราจะแก้ไขเมธอด Details ส่วนของ Details จะรับ ID เป็นพารามิเตอร์ เช่น
/Store/Details/5 สังเกตเห็นว่าจะต่างกับแบบแรกที่ซึ่ง ASP.NET จะสามารถรับค่าได้เลยแบบอัตโนมัติ ให้แก้ไขตามตัวอย่างที่ 3
ตัวอย่างที่ 3
//
// GET: /Store/Details/5
public string Details(int id)
{
string message = new System.Text.StringBuilder(
"Store.Details, ID = ").Append(id).ToString();
return message;
}
ทดลอง run ตามรูปที่ 6
รูปที่ 6
ทบทวนสิ่งที่ได้ทำไป
- เราได้สร้าง ASP.NET MVC ด้วย Visual Web Developer
- ได้เรียนรู้โครงสร้างโฟลเดอร์ของ ASP.NET MVC เบื้องต้น
- ได้ทดสอบรัน website ด้วย ASP.NET Developer Server
- ได้สร้างคลาส Controller 2 คลาส: HomeController และ StoreController
- ได้สร้าง Action Method (ได้แก่ Index, Browse, Details) ที่อยู่ใน Controller และ return ข้อความกลับไปยัง browser
ติดตามต่อ
ASP.NET MVC Music Store Series 4
อ้างอิง
ฝากข้อความหลังไมค์
Rss Feed
ผู้ติดตามบล็อก : 1 คน [