Bagian 2: Pengontrol

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas ke cart belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 2 mencakup Pengontrol.

Dengan kerangka kerja web tradisional, URL masuk biasanya dipetakan ke file pada disk. Misalnya: permintaan URL seperti "/Products.aspx" atau "/Products.php" mungkin diproses oleh file "Products.aspx" atau "Products.php".

Kerangka kerja MVC berbasis web memetakan URL ke kode server dengan cara yang sedikit berbeda. Alih-alih memetakan URL masuk ke file, mereka malah memetakan URL ke metode pada kelas. Kelas-kelas ini disebut "Pengontrol" dan bertanggung jawab untuk memproses permintaan HTTP masuk, menangani input pengguna, mengambil dan menyimpan data, dan menentukan respons untuk dikirim kembali ke klien (menampilkan HTML, mengunduh file, mengalihkan ke URL yang berbeda, dll.).

Menambahkan HomeController

Kami akan memulai aplikasi MVC Music Store kami dengan menambahkan kelas Pengontrol yang akan menangani URL ke halaman Beranda situs kami. Kita akan mengikuti konvensi penamaan default ASP.NET MVC dan menyebutnya HomeController.

Klik kanan folder "Pengontrol" di dalam Penjelajah Solusi dan pilih "Tambahkan", lalu "Pengontrol..." Perintah:

Ini akan memunculkan dialog "Tambahkan Pengontrol". Beri nama pengontrol "HomeController" dan tekan tombol Tambahkan.

Ini akan membuat file baru, HomeController.cs, dengan kode berikut:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

Untuk memulai sesingkat mungkin, mari kita ganti metode Indeks dengan metode sederhana yang hanya mengembalikan string. Kami akan membuat dua perubahan:

• Mengubah metode untuk mengembalikan string alih-alih ActionResult
• Ubah pernyataan pengembalian untuk mengembalikan "Halo dari Rumah"

Metode sekarang akan terlihat seperti ini:

public string Index()
{
    return "Hello from Home";
}

Menjalankan Aplikasi

Sekarang mari kita jalankan situs. Kita dapat memulai server web kita dan mencoba situs menggunakan salah satu hal berikut:

• Pilih item menu Debug ⇨ Mulai Debugging
• Klik tombol Panah hijau di toolbar
• Gunakan pintasan keyboard, F5.

Menggunakan salah satu langkah di atas akan mengkompilasi proyek kami, lalu menyebabkan ASP.NET Development Server yang dibangun ke dalam Visual Web Developer dimulai. Pemberitahuan akan muncul di sudut bawah layar untuk menunjukkan bahwa ASP.NET Development Server telah dimulai, dan akan menampilkan nomor port yang dijalankannya.

Pengembang Web Visual kemudian akan secara otomatis membuka jendela browser yang URL-nya menunjuk ke server web kami. Ini akan memungkinkan kami untuk dengan cepat mencoba aplikasi web kami:

Oke, itu cukup cepat - kami membuat situs web baru, menambahkan fungsi tiga baris, dan kami memiliki teks di browser. Bukan ilmu roket, tapi ini awalnya.

Catatan: Pengembang Web Visual menyertakan ASP.NET Development Server, yang akan menjalankan situs web Anda pada nomor "port" gratis acak. Pada cuplikan layar di atas, situs berjalan di http://localhost:26641/, sehingga menggunakan port 26641. Nomor port Anda akan berbeda. Ketika kita berbicara tentang URL seperti /Store/Browse dalam tutorial ini, yang akan pergi setelah nomor port. Dengan asumsi nomor port 26641, menelusuri ke /Store/Browse berarti menelusuri ke http://localhost:26641/Store/Browse.

Menambahkan StoreController

Kami menambahkan HomeController sederhana yang mengimplementasikan Halaman Beranda situs kami. Sekarang mari kita tambahkan pengontrol lain yang akan kita gunakan untuk mengimplementasikan fungsionalitas penjelajahan toko musik kita. Pengontrol toko kami akan mendukung tiga skenario:

• Halaman daftar genre musik di toko musik kami
• Halaman telusuri yang mencantumkan semua album musik dalam genre tertentu
• Halaman detail yang memperlihatkan informasi tentang album musik tertentu

Kita akan mulai dengan menambahkan kelas StoreController baru.. Jika Anda belum melakukannya, berhenti jalankan aplikasi baik dengan menutup browser atau pilih item menu Debug ⇨ Hentikan Penelusuran Kesalahan.

Sekarang tambahkan StoreController baru. Sama seperti yang kami lakukan dengan HomeController, kami akan melakukan ini dengan mengklik kanan folder "Pengontrol" dalam Penjelajah Solusi dan memilih item menu Add-Controller>

StoreController baru kami sudah memiliki metode "Indeks". Kami akan menggunakan metode "Indeks" ini untuk mengimplementasikan halaman daftar kami yang mencantumkan semua genre di toko musik kami. Kami juga akan menambahkan dua metode tambahan untuk mengimplementasikan dua skenario lain yang ingin ditangani storecontroller kami: Telusuri dan Detail.

Metode ini (Indeks, Telusuri, dan Detail) dalam Pengontrol kami disebut "Tindakan Pengontrol", dan seperti yang telah Anda lihat dengan metode tindakan HomeController.Index(),tugas mereka adalah menanggapi permintaan URL dan (umumnya berbicara) menentukan konten apa yang harus dikirim kembali ke browser atau pengguna yang memanggil URL.

Kita akan memulai implementasi StoreController dengan mengubah metodeIndex() untuk mengembalikan string "Hello from Store.Index()" dan kita akan menambahkan metode serupa untuk Browse() dan Details():

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()";
        }
    }
}

Jalankan proyek lagi dan telusuri URL berikut:

• /Toko
• /Store/Browse
• /Store/Details

Mengakses URL ini akan memanggil metode tindakan dalam Pengontrol kami dan mengembalikan respons string:

Itu bagus, tetapi ini hanya string konstan. Mari kita membuatnya dinamis, sehingga mereka mengambil informasi dari URL dan menampilkannya di output halaman.

Pertama, kita akan mengubah metode tindakan Telusuri untuk mengambil nilai querystring dari URL. Kita dapat melakukan ini dengan menambahkan parameter "genre" ke metode tindakan kita. Ketika kita melakukan ini ASP.NET MVC akan secara otomatis meneruskan parameter querystring atau form post bernama "genre" ke metode tindakan kita ketika dipanggil.

//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
 {
    string message = HttpUtility.HtmlEncode("Store.Browse, Genre = "
+ genre);
 
    return message;
 }

Catatan: Kami menggunakan metode utilitas HttpUtility.HtmlEncode untuk membersihkan input pengguna. Ini mencegah pengguna menyuntikkan Javascript ke Tampilan kami dengan tautan seperti /Store/Browse? Genre=<script>window.location='http://hackersite.com'</script>.

Sekarang mari kita telusuri ke /Store/Browse? Genre=Disko

Mari kita ubah tindakan Detail berikutnya untuk membaca dan menampilkan parameter input bernama ID. Tidak seperti metode kami sebelumnya, kami tidak akan menyematkan nilai ID sebagai parameter querystring. Sebagai gantinya, kita akan menyematkannya langsung di dalam URL itu sendiri. Misalnya: /Store/Details/5.

ASP.NET MVC memungkinkan kita melakukan ini dengan mudah tanpa harus mengonfigurasi apa pun. ASP.NET konvensi perutean default MVC adalah memperlakukan segmen URL setelah nama metode tindakan sebagai parameter bernama "ID". Jika metode tindakan Anda memiliki parameter bernama ID, ASP.NET MVC akan secara otomatis meneruskan segmen URL kepada Anda sebagai parameter.

//
// GET: /Store/Details/5
public string Details(int id)
 {
    string message = "Store.Details, ID = " + id;
 
    return message;
 }

Jalankan aplikasi dan telusuri ke /Store/Details/5:

Mari kita rekap apa yang telah kita lakukan sejauh ini:

• Kami telah membuat proyek MVC ASP.NET baru di Visual Web Developer
• Kami telah membahas struktur folder dasar aplikasi MVC ASP.NET
• Kami telah mempelajari cara menjalankan situs web kami menggunakan server pengembangan ASP.NET
• Kami telah membuat dua kelas Pengontrol: HomeController dan StoreController
• Kami telah menambahkan Metode Tindakan ke pengontrol kami yang merespons permintaan URL dan mengembalikan teks ke browser

SebelumnyaBerikutnya