ASP.NET MVC Music Store Series 3

สร้าง 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=<script>window.location=’http://hackersite.com’</script> 
เมื่อแก้ไขเสร็จแล้วให้ทดลอง 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
อ้างอิง
ผู้เขียน: procodeblog
Advertisements

ใส่ความเห็น

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