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, Movie model mengambil data film dari database, menyediakannya ke tampilan atau memperbaruinya. 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 browser.
  • 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 Movies pengontrol dan Edit tindakan, yang 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 input termasuk dalam pengontrol. 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 Pengontrol > Tambahkan > Pengontrol.

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

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 .

Visual Studio untuk Mac

Di Penjelajah Solusi, klik kontrol Pengontrol dan pilih Tambahkan > File Baru.

Pilih ASP.NET Kelas Inti dan Pengontrol.

Beri nama pengontrol HelloWorldController.

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.
  • Target URI: 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 perancah digunakan untuk menghasilkan HTTP POST metode, yang memperbarui data.

Jalankan aplikasi tanpa debugger dengan menekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS).

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, itu default ke pengontrol "Home" dan metode "Indeks" 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 peta ke kelas HelloWorld Controller.
• Bagian kedua dari segmen URL menentukan metode tindakan pada kelas . Jadi localhost:5001/HelloWorld/Index menyebabkan Index metode HelloWorldController kelas berjalan. Perhatikan bahwa Anda hanya perlu menelusuri localhost:5001/HelloWorld dan metode dipanggil Index 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 default ke 1 jika tidak ada nilai yang diteruskan untuk parameter tersebut numTimes .
• HtmlEncoder.Default.Encode Menggunakan untuk melindungi aplikasi dari input berbahaya, seperti melalui JavaScript.
• Menggunakan String Terinterpolasi 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 Pengikatan Model 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 idrute .
• Metode Welcome berisi parameter id yang cocok dengan templat URL dalam MapControllerRoute metode .
• Trailing ? memulai string kueri.

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

Dalam contoh sebelumnya:

• Segmen URL ketiga cocok dengan parameter idrute .
• 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