Bagikan melalui

Tampilan di ASP.NET Core MVC

  • Artikel

Oleh Steve Smith dan Dave Brock

Dokumen ini menjelaskan tampilan yang digunakan dalam aplikasi MVC Inti ASP.NET. Untuk informasi tentang Razor Halaman, lihat Pengantar Razor Halaman di ASP.NET Core.

Dalam pola Model-View-Controller (MVC), tampilan menangani presentasi data aplikasi dan interaksi pengguna. Tampilan adalah templat HTML dengan markup yang disematkanRazor. Razor markup adalah kode yang berinteraksi dengan markup HTML untuk menghasilkan halaman web yang dikirim ke klien.

Dalam ASP.NET Core MVC, tampilan adalah .cshtml file yang menggunakan bahasa pemrograman C# dalam Razor markup. Biasanya, file tampilan dikelompokkan ke dalam folder bernama untuk setiap pengontrol aplikasi. Folder disimpan dalam Views folder di akar aplikasi:

Folder tampilan di Penjelajah Solusi Visual Studio terbuka dengan Home folder terbuka untuk menampilkan file About.cshtml, Contact.cshtml, dan Index.cshtml

Home Pengontrol diwakili oleh Home folder di Views dalam folder. Folder Home berisi tampilan untuk Abouthalaman web , , Contactdan Index (beranda). Ketika pengguna meminta salah satu dari tiga halaman web ini, tindakan pengontrol di Home pengontrol menentukan mana dari tiga tampilan yang digunakan untuk membangun dan mengembalikan halaman web kepada pengguna.

Gunakan tata letak untuk menyediakan bagian halaman web yang konsisten dan mengurangi pengulangan kode. Tata letak sering berisi header, navigasi dan elemen menu, dan footer. Header dan footer biasanya berisi markup boilerplate untuk banyak elemen metadata dan tautan ke aset skrip dan gaya. Tata letak membantu Anda menghindari markup boilerplate ini dalam tampilan Anda.

Tampilan parsial mengurangi duplikasi kode dengan mengelola bagian tampilan yang dapat digunakan kembali. Misalnya, tampilan parsial berguna untuk biografi penulis di situs web blog yang muncul dalam beberapa tampilan. Biografi penulis adalah konten tampilan biasa dan tidak memerlukan kode untuk dijalankan untuk menghasilkan konten untuk halaman web. Konten biografi penulis tersedia untuk tampilan berdasarkan pengikatan model saja, jadi menggunakan tampilan parsial untuk jenis konten ini sangat ideal.

Komponen tampilan mirip dengan tampilan parsial yang memungkinkan Anda mengurangi kode berulang, tetapi sesuai untuk melihat konten yang memerlukan kode untuk dijalankan di server untuk merender halaman web. Komponen tampilan berguna ketika konten yang dirender memerlukan interaksi database, seperti untuk ke cart belanja situs web. Komponen tampilan tidak terbatas pada pengikatan model untuk menghasilkan output halaman web.

Manfaat menggunakan tampilan

Tampilan membantu menetapkan pemisahan kekhawatiran dalam aplikasi MVC dengan memisahkan markup antarmuka pengguna dari bagian lain aplikasi. Desain SoC berikut membuat modular aplikasi Anda, yang memberikan beberapa manfaat:

  • Aplikasi ini lebih mudah dipertahankan karena lebih terorganisir. Tampilan umumnya dikelompokkan menurut fitur aplikasi. Ini memudahkan untuk menemukan tampilan terkait saat mengerjakan fitur.
  • Bagian aplikasi digabungkan secara longgar. Anda dapat membuat dan memperbarui tampilan aplikasi secara terpisah dari logika bisnis dan komponen akses data. Anda dapat memodifikasi tampilan aplikasi tanpa harus memperbarui bagian lain dari aplikasi.
  • Lebih mudah untuk menguji bagian antarmuka pengguna aplikasi karena tampilannya adalah unit terpisah.
  • Karena organisasi yang lebih baik, kecil kemungkinan Anda akan secara tidak sengaja mengulangi bagian antarmuka pengguna.

Membuat tampilan

Tampilan yang khusus untuk pengontrol dibuat dalam Views/[ControllerName] folder. Tampilan yang dibagikan di antara pengontrol ditempatkan di folder Views/Shared . Untuk membuat tampilan, tambahkan file baru dan beri nama yang sama dengan tindakan pengontrol terkait dengan .cshtml ekstensi file. Untuk membuat tampilan yang sesuai dengan About tindakan di Home pengontrol, buat About.cshtml file di Views/Home folder :

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Razor markup dimulai dengan @ simbol . Jalankan pernyataan C# dengan menempatkan kode C# dalam Razor blok kode yang dimatikan oleh kurung kurawal ({ ... }). Misalnya, lihat penetapan "Tentang" untuk ViewData["Title"] ditunjukkan di atas. Anda dapat menampilkan nilai dalam HTML hanya dengan mereferensikan nilai dengan @ simbol . Lihat konten elemen dan <h3> di <h2> atas.

Konten tampilan yang ditunjukkan di atas hanyalah bagian dari seluruh halaman web yang dirender kepada pengguna. Tata rest letak halaman dan aspek umum tampilan lainnya ditentukan dalam file tampilan lainnya. Untuk mempelajari selengkapnya, lihat topik Tata Letak.

Bagaimana pengontrol menentukan tampilan

Tampilan biasanya dikembalikan dari tindakan sebagai ViewResult, yang merupakan jenis ActionResult. Metode tindakan Anda dapat membuat dan mengembalikan secara ViewResult langsung, tetapi itu tidak umum dilakukan. Karena sebagian besar pengontrol mewarisi dari Controller, Anda cukup menggunakan metode pembantu View ViewResultuntuk mengembalikan :

HomeController.cs:

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Saat tindakan ini kembali, tampilan yang About.cshtml diperlihatkan di bagian terakhir dirender sebagai halaman web berikut:

Tentang halaman yang dirender di browser Edge

Metode pembantu View memiliki beberapa kelebihan beban. Anda dapat secara opsional menentukan:

  • Tampilan eksplisit untuk dikembalikan:

    return View("Orders");

  • Model untuk diteruskan ke tampilan:

    return View(Orders);

  • Tampilan dan model:

    return View("Orders", Orders);

Lihat penemuan

Saat tindakan mengembalikan tampilan, proses yang disebut penemuan tampilan terjadi. Proses ini menentukan file tampilan mana yang digunakan berdasarkan nama tampilan.

Perilaku View default metode (return View();) adalah mengembalikan tampilan dengan nama yang sama dengan metode tindakan tempat metode tersebut dipanggil. Misalnya, About ActionResult nama metode pengontrol digunakan untuk mencari file tampilan bernama About.cshtml. Pertama, runtime terlihat di Views/[ControllerName] folder untuk tampilan. Jika tidak menemukan tampilan yang cocok di sana, tampilan akan mencari Shared folder untuk tampilan tersebut.

Tidak masalah jika Anda secara implisit mengembalikan ViewResult dengan return View(); atau secara eksplisit meneruskan nama tampilan ke View metode dengan return View("<ViewName>");. Dalam kedua kasus, lihat pencarian penemuan untuk file tampilan yang cocok dalam urutan ini:

  1. Views/\[ControllerName]/\[ViewName].cshtml
  2. Views/Shared/\[ViewName].cshtml

Jalur file tampilan dapat disediakan alih-alih nama tampilan. Jika menggunakan jalur absolut yang dimulai di akar aplikasi (secara opsional dimulai dengan "/" atau "~/"), .cshtml ekstensi harus ditentukan:

return View("Views/Home/About.cshtml");

Anda juga dapat menggunakan jalur relatif untuk menentukan tampilan di direktori yang berbeda tanpa .cshtml ekstensi. HomeControllerDi dalam , Anda dapat mengembalikan Index tampilan tampilan Anda Manage dengan jalur relatif:

return View("../Manage/Index");

Demikian pula, Anda dapat menunjukkan direktori khusus pengontrol saat ini dengan awalan "./":

return View("./About");

Komponen tampilan dan tampilan parsial menggunakan mekanisme penemuan serupa (tetapi tidak identik).

Anda dapat menyesuaikan konvensi default tentang bagaimana tampilan terletak di dalam aplikasi dengan menggunakan kustom IViewLocationExpander.

Lihat penemuan bergantung pada menemukan file tampilan menurut nama file. Jika sistem file yang mendasar peka huruf besar/kecil, nama tampilan mungkin peka huruf besar/kecil. Untuk kompatibilitas di seluruh sistem operasi, cocokkan kasus antara pengontrol dan nama tindakan dan folder tampilan terkait dan nama file. Jika Anda mengalami kesalahan bahwa file tampilan tidak dapat ditemukan saat bekerja dengan sistem file peka huruf besar/kecil, konfirmasikan bahwa casing cocok antara file tampilan yang diminta dan nama file tampilan aktual.

Ikuti praktik terbaik mengatur struktur file untuk tampilan Anda untuk mencerminkan hubungan antara pengontrol, tindakan, dan tampilan untuk keberlanjutan dan kejelasan.

Meneruskan data ke tampilan

Teruskan data ke tampilan menggunakan beberapa pendekatan:

  • Data yang di ketik dengan kuat: viewmodel
  • Data yang dijenis lemah
    • ViewDataAku akan menemuinya.ViewDataAttribute
    • ViewBag

Data dengan jenis kuat (viewmodel)

Pendekatan yang paling kuat adalah menentukan jenis model dalam tampilan. Model ini biasanya disebut sebagai viewmodel. Anda meneruskan instans jenis viewmodel ke tampilan dari tindakan.

Menggunakan viewmodel untuk meneruskan data ke tampilan memungkinkan tampilan memanfaatkan pemeriksaan jenis yang kuat . Pengetikan yang kuat (atau ditik dengan kuat) berarti bahwa setiap variabel dan konstanta memiliki jenis yang ditentukan secara eksplisit (misalnya, string, int, atau DateTime). Validitas jenis yang digunakan dalam tampilan dicentang pada waktu kompilasi.

Visual Studio dan Visual Studio Code mencantumkan anggota kelas yang sangat ditik menggunakan fitur yang disebut IntelliSense. Saat Anda ingin melihat properti viewmodel, ketik nama variabel untuk viewmodel diikuti dengan titik (.). Ini membantu Anda menulis kode lebih cepat dengan lebih sedikit kesalahan.

Tentukan model menggunakan direktif @model . Gunakan model dengan @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Untuk memberikan model ke tampilan, pengontrol meneruskannya sebagai parameter:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

Tidak ada batasan pada jenis model yang dapat Anda berikan ke tampilan. Sebaiknya gunakan viewmodel Plain Old CLR Object (POCO) dengan sedikit atau tanpa perilaku (metode) yang ditentukan. Biasanya, kelas viewmodel disimpan di Models folder atau folder terpisah ViewModels di akar aplikasi. Viewmodel Address yang digunakan dalam contoh di atas adalah viewmodel POCO yang disimpan dalam file bernama Address.cs:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Tidak ada yang mencegah Anda menggunakan kelas yang sama untuk jenis viewmodel dan jenis model bisnis Anda. Namun, menggunakan model terpisah memungkinkan tampilan Anda bervariasi secara independen dari logika bisnis dan bagian akses data aplikasi Anda. Pemisahan model dan viewmodel juga menawarkan manfaat keamanan saat model menggunakan pengikatan dan validasi model untuk data yang dikirim ke aplikasi oleh pengguna.

Data yang di ketik dengan lemah (ViewData, [ViewData] atribut, dan ViewBag)

ViewBagtidak tersedia secara default untuk digunakan di Razor Kelas Halaman PageModel .

Selain tampilan yang ditik dengan kuat, tampilan memiliki akses ke pengumpulan data yang ditik dengan lemah (juga disebut dengan jenis longgar). Tidak seperti jenis yang kuat, jenis lemah (atau jenis longgar) berarti Anda tidak secara eksplisit menyatakan jenis data yang Anda gunakan. Anda dapat menggunakan pengumpulan data yang diketik dengan lemah untuk meneruskan sejumlah kecil data masuk dan keluar dari pengontrol dan tampilan.

Meneruskan data antara ... Contoh
Pengontrol dan tampilan Mengisi daftar dropdown dengan data.
Tampilan dan tampilan tata letak <title> Mengatur konten elemen dalam tampilan tata letak dari file tampilan.
Tampilan parsial dan tampilan Widget yang menampilkan data berdasarkan halaman web yang diminta pengguna.

Koleksi ini dapat dirujuk melalui ViewData properti atau ViewBag pada pengontrol dan tampilan. Properti ViewData adalah kamus objek yang ditik lemah. Properti ViewBag adalah pembungkus ViewData yang menyediakan properti dinamis untuk koleksi yang mendasar ViewData . Catatan: Pencarian kunci tidak peka huruf besar/kecil untuk ViewData dan ViewBag.

ViewData dan ViewBag diselesaikan secara dinamis saat runtime. Karena mereka tidak menawarkan pemeriksaan jenis waktu kompilasi, keduanya umumnya lebih rentan kesalahan daripada menggunakan viewmodel. Untuk alasan itu, beberapa pengembang lebih suka minimal atau tidak pernah menggunakan ViewData dan ViewBag.

ViewData

ViewData adalah objek yang ViewDataDictionary diakses melalui string kunci. Data string dapat disimpan dan digunakan secara langsung tanpa perlu cast, tetapi Anda harus mentransmisikan nilai objek lain ViewData ke jenis tertentu saat Anda mengekstraknya. Anda dapat menggunakan ViewData untuk meneruskan data dari pengontrol ke tampilan dan dalam tampilan, termasuk tampilan dan tata letak parsial.

Berikut ini adalah contoh yang menetapkan nilai untuk salam dan alamat yang digunakan ViewData dalam tindakan:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Bekerja dengan data dalam tampilan:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

atribut [ViewData]

Pendekatan lain yang menggunakan ViewDataDictionary adalah ViewDataAttribute. Properti pada pengontrol atau Razor model Halaman yang ditandai dengan [ViewData] atribut memiliki nilainya yang disimpan dan dimuat dari kamus.

Dalam contoh berikut, Home pengontrol berisi properti yang Title ditandai dengan [ViewData]. Metode About mengatur judul untuk tampilan Tentang:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

Dalam tata letak, judul dibaca dari kamus ViewData:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBag

ViewBagtidak tersedia secara default untuk digunakan di Razor Kelas Halaman PageModel .

ViewBag adalah Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData objek yang menyediakan akses dinamis ke objek yang disimpan di ViewData. ViewBag bisa lebih nyaman untuk dikerjakan, karena tidak memerlukan transmisi. Contoh berikut menunjukkan cara menggunakan ViewBag dengan hasil yang sama seperti menggunakan ViewData di atas:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Menggunakan ViewData dan ViewBag secara bersamaan

ViewBagtidak tersedia secara default untuk digunakan di Razor Kelas Halaman PageModel .

Karena ViewData dan ViewBag merujuk ke koleksi yang mendasar ViewData yang sama, Anda dapat menggunakan ViewData dan ViewBag mencampur dan mencocokkannya saat membaca dan menulis nilai.

Atur judul menggunakan ViewBag dan deskripsi menggunakan ViewData di bagian About.cshtml atas tampilan:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Baca properti tetapi balikkan penggunaan ViewData dan ViewBag. _Layout.cshtml Dalam file, dapatkan judul menggunakan ViewData dan dapatkan deskripsi menggunakan ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Ingat bahwa string tidak memerlukan pemeran untuk ViewData. Anda dapat menggunakan @ViewData["Title"] tanpa transmisi.

Menggunakan keduanya ViewData dan ViewBag pada saat yang sama berfungsi, seperti halnya mencampur dan mencocokkan membaca dan menulis properti. Markup berikut dirender:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

Ringkasan perbedaan antara ViewData dan ViewBag

ViewBagtidak tersedia secara default untuk digunakan di Razor Kelas Halaman PageModel .

  • ViewData
    • Berasal dari ViewDataDictionary, sehingga memiliki sifat kamus yang dapat berguna, seperti ContainsKey, , AddRemove, dan Clear.
    • Kunci dalam kamus adalah string, sehingga spasi kosong diizinkan. Contoh: ViewData["Some Key With Whitespace"]
    • Jenis apa pun selain harus string dilemparkan dalam tampilan untuk menggunakan ViewData.
  • ViewBag
    • Berasal dari Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData, sehingga memungkinkan pembuatan properti dinamis menggunakan notasi titik (@ViewBag.SomeKey = <value or object>), dan tidak ada transmisi yang diperlukan. Sintaks ViewBag membuatnya lebih cepat untuk ditambahkan ke pengontrol dan tampilan.
    • Lebih sederhana untuk memeriksa nilai null. Contoh: @ViewBag.Person?.Name

Kapan harus menggunakan ViewData atau ViewBag

Keduanya ViewData dan ViewBag merupakan pendekatan yang sama validnya untuk meneruskan sejumlah kecil data di antara pengontrol dan tampilan. Pilihan mana yang akan digunakan didasarkan pada preferensi. Namun, Anda dapat mencampur dan mencocokkan ViewData dan ViewBag objek, kode lebih mudah dibaca dan dikelola dengan satu pendekatan yang digunakan secara konsisten. Kedua pendekatan diselesaikan secara dinamis pada runtime dan dengan demikian rentan menyebabkan kesalahan runtime. Beberapa tim pengembangan menghindarinya.

Tampilan dinamis

Tampilan yang tidak mendeklarasikan jenis model menggunakan @model tetapi memiliki instans model yang diteruskan kepada mereka (misalnya, return View(Address);) dapat mereferensikan properti instans secara dinamis:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Fitur ini menawarkan fleksibilitas tetapi tidak menawarkan perlindungan kompilasi atau IntelliSense. Jika properti tidak ada, pembuatan halaman web gagal pada runtime.

Fitur tampilan lainnya

Pembantu Tag memudahkan untuk menambahkan perilaku sisi server ke tag HTML yang ada. Menggunakan Pembantu Tag menghindari kebutuhan untuk menulis kode kustom atau pembantu dalam tampilan Anda. Pembantu tag diterapkan sebagai atribut ke elemen HTML dan diabaikan oleh editor yang tidak dapat memprosesnya. Ini memungkinkan Anda mengedit dan merender markup tampilan dalam berbagai alat.

Menghasilkan markup HTML kustom dapat dicapai dengan banyak Pembantu HTML bawaan. Logika antarmuka pengguna yang lebih kompleks dapat ditangani oleh Lihat Komponen. Komponen tampilan menyediakan SoC yang sama dengan yang ditawarkan pengontrol dan tampilan. Mereka dapat menghilangkan kebutuhan akan tindakan dan tampilan yang menangani data yang digunakan oleh elemen antarmuka pengguna umum.

Seperti banyak aspek lain dari ASP.NET Core, tampilan mendukung injeksi dependensi, memungkinkan layanan untuk disuntikkan ke dalam tampilan.

Isolasi CSS

Isolasi gaya CSS ke halaman, tampilan, dan komponen individual untuk mengurangi atau menghindari:

  • Dependensi pada gaya global yang sulit dipertahankan.
  • Konflik gaya dalam konten yang disarangkan.

Guna menambahkan file CSS cakupan untuk halaman atau tampilan, tempatkan gaya CSS di file .cshtml.css pengiring yang cocok dengan nama file .cshtml. Dalam contoh berikut, file Index.cshtml.css menyediakan gaya CSS yang hanya diterapkan pada halaman atau tampilan Index.cshtml.

Pages/Index.cshtml.css (Razor Pages) atau Views/Index.cshtml.css (MVC):

h1 {
    color: red;
}

Isolasi CSS terjadi pada waktu pembuatan. Kerangka kerja menulis ulang pemilih CSS agar sesuai dengan markup yang dirender oleh halaman atau tampilan aplikasi. Gaya CSS yang ditulis kembali dibundel dan diproduksi sebagai aset statis, {APP ASSEMBLY}.styles.css. Tempat penampung {APP ASSEMBLY} adalah nama rakitan proyek. Tautan ke gaya CSS yang dibundel ditempatkan di tata letak aplikasi.

Di konten <head> dari Pages/Shared/_Layout.cshtml aplikasi (Razor Pages) atau Views/Shared/_Layout.cshtml (MVC), tambahkan atau konfirmasi keberadaan tautan ke gaya CSS yang dibundel:

<link rel="stylesheet" href="~/{APP ASSEMBLY}.styles.css" />

Dalam contoh berikut, nama rakitan aplikasi adalah WebApp:

<link rel="stylesheet" href="WebApp.styles.css" />

Gaya yang ditentukan dalam file CSS cakupan hanya diterapkan pada output yang dirender dari file yang cocok. Dalam contoh sebelumnya, semua deklarasi CSS h1 yang ditentukan di tempat lain dalam aplikasi tidak bertentangan dengan gaya judul Index. Aturan kaskading dan pewarisan gaya CSS tetap berlaku untuk file CSS cakupan. Misalnya, gaya yang diterapkan langsung ke elemen <h1> dalam file Index.cshtml menimpa gaya file CSS cakupan di Index.cshtml.css.

Catatan

Untuk menjamin isolasi gaya CSS saat terjadi bundling, mengimpor CSS dalam blok kode Razor tidak didukung.

Isolasi CSS hanya berlaku untuk elemen HTML. Isolasi CSS tidak didukung untuk Pembantu Tag.

Dalam file CSS yang dibundel, setiap halaman, tampilan, atau komponen Razor dikaitkan dengan pengidentifikasi cakupan dalam b-{STRING} format, di mana tempat penampung {STRING} adalah string dengan sepuluh karakter yang dihasilkan oleh kerangka kerja. Contoh berikut memberikan gaya untuk elemen <h1> sebelumnya di halaman Index aplikasi Razor Pages:

/* /Pages/Index.cshtml.rz.scp.css */
h1[b-3xxtam6d07] {
    color: red;
}

Di halaman Index tempat gaya CSS diterapkan dari file yang dibundel, pengidentifikasi cakupan ditambahkan sebagai atribut HTML:

<h1 b-3xxtam6d07>

Pengidentifikasi sifatnya unik untuk suatu aplikasi. Pada waktu pembuatan, bundel proyek dibuat dengan konvensi {STATIC WEB ASSETS BASE PATH}/Project.lib.scp.css, di mana tempat penampung {STATIC WEB ASSETS BASE PATH} adalah jalur dasar aset web statis.

Jika proyek lain digunakan, seperti paket NuGet atau pustaka kelas Razor, file yang dibundel:

  • Mereferensikan gaya menggunakan impor CSS.
  • Tidak diterbitkan sebagai aset web statis aplikasi yang menggunakan gaya.

Dukungan praprosesor CSS

Praprosesor CSS berguna untuk meningkatkan pengembangan CSS dengan memanfaatkan fitur seperti variabel, bersarang, modul, mixin, dan pewarisan. Meskipun isolasi CSS tidak secara native mendukung praprosesor CSS seperti Sass atau Less, integrasi praprosesor CSS berjalan mulus selama kompilasi praprosesor terjadi sebelum kerangka kerja menulis kembali pemilih CSS selama proses pembuatan. Menggunakan Visual Studio sebagai contoh, konfigurasikan kompilasi praprosesor yang ada sebagai tugas Sebelum Build di Visual Studio Task Runner Explorer.

Banyak paket NuGet pihak ketiga, seperti AspNetCore.SassCompiler, yang dapat mengompilasi file SASS/SCSS di awal proses pembuatan sebelum isolasi CSS terjadi, dan tidak memerlukan konfigurasi tambahan.

Konfigurasi isolasi CSS

Isolasi CSS memungkinkan konfigurasi untuk beberapa skenario tingkat lanjut, seperti ketika ada dependensi pada alat atau alur kerja yang ada.

Mengkustomisasi format pengidentifikasi cakupan

Di bagian ini, tempat penampung {Pages|Views} adalah Pages untuk aplikasi Razor Pages atau Views untuk aplikasi MVC.

Secara default, pengidentifikasi cakupan menggunakan format b-{STRING}, di mana tempat penampung {STRING} adalah string sepuluh karakter yang dihasilkan oleh kerangka kerja. Untuk mengkustomisasi format pengidentifikasi cakupan, perbarui file proyek menjadi pola yang diinginkan:

<ItemGroup>
  <None Update="{Pages|Views}/Index.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Pada contoh sebelumnya, CSS yang dihasilkan untuk Index.cshtml.css mengubah pengidentifikasi cakupannya dari b-{STRING} menjadi custom-scope-identifier.

Gunakan pengidentifikasi cakupan untuk mencapai warisan dengan file CSS cakupan. Dalam contoh file proyek berikut, file BaseView.cshtml.css berisi gaya umum di seluruh tampilan. File DerivedView.cshtml.css mewarisi gaya ini.

<ItemGroup>
  <None Update="{Pages|Views}/BaseView.cshtml.css" CssScope="custom-scope-identifier" />
  <None Update="{Pages|Views}/DerivedView.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Gunakan operator wildcard (*) untuk berbagi pengidentifikasi cakupan di beberapa file:

<ItemGroup>
  <None Update="{Pages|Views}/*.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

Mengubah jalur dasar untuk aset web statis

File CSS cakupan dibuat di akar aplikasi. Dalam file proyek, gunakan properti StaticWebAssetBasePath untuk mengubah jalur default. Contoh berikut menempatkan file CSS terlingkup, dan rest aset aplikasi, di _content jalur:

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

Menonaktifkan bundling otomatis

Untuk menolak cara kerangka menerbitkan dan memuat file cakupan saat runtime bahasa umum, gunakan properti DisableScopedCssBundling. Saat menggunakan properti ini, alat atau proses lain bertanggung jawab untuk mengambil file CSS yang terisolasi dari direktori obj dan menerbitkan serta memuatnya pada runtime bahasa umum:

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

Dukungan pustaka kelas Razor (RCL)

Saat pustaka kelas Razor (RCL) menyediakan gaya terisolasi, atribut href tag <link> menunjuk ke {STATIC WEB ASSET BASE PATH}/{PACKAGE ID}.bundle.scp.css, dengan tempat penampung:

  • {STATIC WEB ASSET BASE PATH}: Jalur dasar aset web statis.
  • {PACKAGE ID}: pengidentifikasi paket pustaka. Pengidentifikasi paket diatur ke default, yakni nama rakitan proyek, jika pengidentifikasi paket tidak ditentukan dalam file proyek.

Dalam contoh berikut:

  • Jalur dasar aset web statis adalah _content/ClassLib.
  • Nama rakitan pustaka kelas adalah ClassLib.

Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/Shared/_Layout.cshtml (MVC):

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">

Untuk informasi lebih lanjut tentang RCL, lihat artikel berikut:

Untuk informasi tentang isolasi CSS Blazor, lihat Isolasi CSS Blazor ASP.NET Core.