Bagian 2, tambahkan pengontrol ke aplikasi MVC Inti ASP.NET

Oleh Rick Anderson

Pola arsitektur Model-View-Controller (MVC) memisahkan aplikasi menjadi tiga komponen utama: Model, View, dan Controller. Pola MVC membantu Anda membuat aplikasi yang lebih dapat diuji dan lebih mudah diperbarui daripada aplikasi monolitik tradisional.

Aplikasi berbasis MVC berisi:

• Models: Kelas yang mewakili data aplikasi. Kelas model menggunakan logika validasi untuk menerapkan aturan bisnis untuk data tersebut. Biasanya, objek model mengambil dan menyimpan status model dalam database. Dalam tutorial ini, model Movie mengambil data film dari database, menyediakannya untuk tampilan, atau memperbarui data tersebut. Data yang diperbarui ditulis ke database.
• Views: Tampilan adalah komponen yang menampilkan antarmuka pengguna (UI) aplikasi. Umumnya, UI ini menampilkan data model.
• Ontroller C: Kelas yang:
  • Menangani permintaan peramban.
  • Mengambil data model.
  • Templat tampilan panggilan yang mengembalikan respons.

Di aplikasi MVC, tampilan hanya menampilkan informasi. Pengontrol menangani dan merespons input dan interaksi pengguna. Misalnya, pengontrol menangani segmen URL dan nilai string kueri, dan meneruskan nilai-nilai ini ke model. Model mungkin menggunakan nilai-nilai ini untuk mengkueri database. Contohnya:

• https://localhost:5001/Home/Privacy: menentukan Home pengontrol dan Privacy tindakan.
• https://localhost:5001/Movies/Edit/5: adalah permintaan untuk mengedit film dengan ID=5 menggunakan kontroler Movies dan tindakan Edit, yang akan dirinci nanti dalam tutorial.

Data rute dijelaskan nanti dalam tutorial.

Pola arsitektur MVC memisahkan aplikasi menjadi tiga grup komponen utama: Model, Tampilan, dan Pengontrol. Pola ini membantu mencapai pemisahan kekhawatiran: Logika UI berada dalam tampilan. Logika masukan adalah bagian dari pengendali. Logika bisnis termasuk dalam model. Pemisahan ini membantu mengelola kompleksitas saat membangun aplikasi, karena memungkinkan pekerjaan pada satu aspek implementasi pada satu waktu tanpa memengaruhi kode yang lain. Misalnya, Anda dapat mengerjakan kode tampilan tanpa bergantung pada kode logika bisnis.

Konsep-konsep ini diperkenalkan dan ditunjukkan dalam seri tutorial ini saat membangun aplikasi film. Proyek MVC berisi folder untuk Pengontrol dan Tampilan.

Menambahkan pengontrol

Visual Studio

Di Penjelajah Solusi, klik kanan Pengendali > Tambahkan > Pengendali.

Dalam kotak dialog Tambahkan Item Perancah Baru, pilih Pengontrol MVC - Kosong>Tambahkan.

Dalam dialog Tambahkan Item Baru - MvcMovie, masukkan HelloWorldController.cs dan pilih Tambahkan.

Visual Studio Code

Pilih ikon EXPLORER lalu klik kontrol (klik kanan) Pengontrol > File Baru dan beri nama file HelloWorldController.csbaru .

Ganti isi Controllers/HelloWorldController.cs dengan kode berikut:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

Setiap public metode dalam pengontrol dapat dipanggil sebagai titik akhir HTTP. Dalam sampel di atas, kedua metode mengembalikan string. Perhatikan komentar yang mendahului setiap metode.

Titik akhir HTTP:

• Adalah URL yang dapat ditargetkan dalam aplikasi web, seperti https://localhost:5001/HelloWorld.
• Menggabungkan:
  • Protokol yang digunakan: HTTPS.
  • Lokasi jaringan server web, termasuk port TCP: localhost:5001.
  • URI sasaran: HelloWorld.

Komentar pertama menyatakan ini adalah metode HTTP GET yang dipanggil dengan menambahkan /HelloWorld/ ke URL dasar.

Komentar kedua menentukan metode HTTP GET yang dipanggil dengan menambahkan /HelloWorld/Welcome/ ke URL. Kemudian dalam tutorial, mesin scaffolding digunakan untuk menghasilkan metode HTTP POST yang memperbarui data.

Jalankan aplikasi tanpa debugger dengan menekan Ctrl+F5.

Tambahkan /HelloWorld ke jalur di bilah alamat. Metode Index mengembalikan string.

MVC memanggil kelas pengontrol, dan metode tindakan di dalamnya, tergantung pada URL masuk. Logika perutean URL default yang digunakan oleh MVC, menggunakan format seperti ini untuk menentukan kode apa yang akan dipanggil:

/[Controller]/[ActionName]/[Parameters]

Format perutean diatur dalam Program.cs file.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Saat Anda menelusuri ke aplikasi dan tidak menyediakan segmen URL apa pun, secara default akan menuju controller "Home" dan metode "Index" yang ditentukan dalam baris templat yang disorot di atas. Di segmen URL sebelumnya:

• Segmen URL pertama menentukan kelas pengontrol yang akan dijalankan. Jadi localhost:5001/HelloWorld berasosiasi dengan kelas HelloWorld Controller.
• Bagian kedua dari segmen URL menentukan metode tindakan pada kelas . Jadi localhost:5001/HelloWorld/Index menyebabkan metode Index dari kelas HelloWorldController tersebut berjalan. Perhatikan bahwa Anda hanya perlu menelusuri localhost:5001/HelloWorld dan metode Index dipanggil secara default. Index adalah metode default yang akan dipanggil pada pengontrol jika nama metode tidak ditentukan secara eksplisit.
• Bagian ketiga dari segmen URL ( id) adalah untuk data rute. Data rute dijelaskan nanti dalam tutorial.

Telusuri ke: https://localhost:{PORT}/HelloWorld/Welcome. Ganti {PORT} dengan nomor port Anda.

Metode Welcome ini menjalankan dan mengembalikan string This is the Welcome action method.... Untuk URL ini, pengontrol adalah HelloWorld dan Welcome merupakan metode tindakan. Anda belum menggunakan [Parameters] bagian URL.

Ubah kode untuk meneruskan beberapa informasi parameter dari URL ke pengontrol. Contohnya,/HelloWorld/Welcome?name=Rick&numtimes=4.

Welcome Ubah metode untuk menyertakan dua parameter seperti yang ditunjukkan dalam kode berikut.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

Kode sebelumnya:

• Menggunakan fitur parameter opsional C# untuk menunjukkan bahwa parameter numTimes memiliki nilai default 1 jika tidak ada nilai yang dimasukkan untuk parameter tersebut.
• HtmlEncoder.Default.Encode Menggunakan untuk melindungi aplikasi dari input berbahaya, seperti melalui JavaScript.
• Menggunakan Terinterpolasi String di $"Hello {name}, NumTimes is: {numTimes}".

Jalankan aplikasi dan telusuri ke: https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Ganti {PORT} dengan nomor port Anda.

Coba nilai yang berbeda untuk name dan numtimes di URL. Sistem pengikatan model MVC secara otomatis memetakan parameter bernama dari string kueri ke parameter dalam metode . Lihat Model Binding untuk informasi selengkapnya.

Pada gambar sebelumnya:

• Segmen Parameters URL tidak digunakan.
• Parameter name dan numTimes diteruskan dalam string kueri.
• ? (tanda tanya) di URL di atas adalah pemisah, dan string kueri mengikuti.
• Karakter & memisahkan pasangan nilai bidang.

Ganti metode Welcome dengan kode berikut:

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Jalankan aplikasi dan masukkan URL berikut: https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

Di URL sebelumnya:

• Segmen URL ketiga cocok dengan parameter rute id.
• Metode Welcome berisi parameter id yang cocok dengan templat URL dalam MapControllerRoute metode .
• Elemen akhir ? memulai string kueri.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Dalam contoh sebelumnya:

• Segmen URL ketiga cocok dengan parameter id rute seperti yang didefinisikan dalam templat perutean dalam file Program.cs.
• Metode Welcome berisi parameter id yang cocok dengan templat URL dalam MapControllerRoute metode .
• Trailing ? (dalam id?) menunjukkan id parameter bersifat opsional.

Sebelumnya: MemulaiBerikutnya: Menambahkan Tampilan