Bagikan melalui

Tata letak di ASP.NET Core

Oleh Steve Smith dan Dave Brock

Halaman dan tampilan sering berbagi elemen visual dan terprogram. Artikel ini menunjukkan cara untuk:

  • Gunakan tata letak umum.
  • Bagikan arahan.
  • Jalankan kode umum sebelum merender halaman atau tampilan.

Dokumen ini membahas tata letak untuk dua pendekatan berbeda untuk ASP.NET Core MVC: Razor Halaman dan pengontrol dengan tampilan. Untuk topik ini, perbedaannya minimal:

  • Razor Halaman berada di folder Halaman .
  • Pengontrol dengan tampilan menggunakan folder Tampilan untuk tampilan.

Apa itu Tata Letak

Sebagian besar aplikasi web memiliki tata letak umum yang memberi pengguna pengalaman yang konsisten saat mereka menavigasi dari halaman ke halaman. Tata letak biasanya mencakup elemen antarmuka pengguna umum seperti header aplikasi, navigasi atau elemen menu, dan footer.

Contoh Tata Letak Halaman

Struktur HTML umum seperti skrip dan lembar gaya juga sering digunakan oleh banyak halaman dalam aplikasi. Semua elemen bersama ini dapat ditentukan dalam file tata letak , yang kemudian dapat dirujuk oleh tampilan apa pun yang digunakan dalam aplikasi. Tata letak mengurangi kode duplikat dalam tampilan.

Menurut konvensi, tata letak default untuk aplikasi ASP.NET Core diberi nama _Layout.cshtml. File tata letak untuk proyek ASP.NET Core baru yang dibuat dengan templat adalah:

  • Razor Halaman: Pages/Shared/_Layout.cshtml

    Folder Halaman di Penjelajah Solusi

  • Pengontrol dengan tampilan: Views/Shared/_Layout.cshtml

    Folder Tampilan di Eksplorer Solusi

Tata letak menentukan templat tingkat atas untuk tampilan di aplikasi. Aplikasi tidak memerlukan tata letak. Aplikasi dapat menentukan lebih dari satu tata letak, dengan tampilan yang berbeda yang menentukan tata letak yang berbeda.

Kode berikut menunjukkan file tata letak untuk proyek yang dibuat menggunakan templat dengan pengontrol dan tampilan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">WebApplication1</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2018 - WebApplication1</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Menentukan Tata Letak

Razor tampilan memiliki Layout properti. Tampilan individual menentukan tata letak dengan mengatur properti ini:

@{
    Layout = "_Layout";
}

Tata letak yang ditentukan dapat menggunakan jalur lengkap (misalnya, /Pages/Shared/_Layout.cshtml atau /Views/Shared/_Layout.cshtml) atau nama parsial (misalnya: _Layout). Ketika nama parsial disediakan, Razor mesin tampilan mencari file tata letak menggunakan proses penemuan standarnya. Folder tempat metode handler (atau pengontrol) ada dicari terlebih dahulu, diikuti oleh folder Bersama . Proses penemuan ini identik dengan proses yang digunakan untuk menemukan tampilan parsial.

Secara default, setiap tata letak harus memanggil RenderBody. Di mana saja panggilan ke RenderBody ditempatkan, konten tampilan akan direnderkan.

Bagian-bagian

Tata letak dapat secara opsional mereferensikan satu atau beberapa bagian, dengan memanggil RenderSection. Bagian menyediakan cara untuk mengatur tempat elemen halaman tertentu harus ditempatkan. Setiap panggilan untuk RenderSection dapat menentukan apakah bagian tersebut diperlukan atau opsional:

<script type="text/javascript" src="~/scripts/global.js"></script>

@RenderSection("Scripts", required: false)

Jika bagian yang diperlukan tidak ditemukan, pengecualian akan terjadi. Tampilan individual menentukan konten yang akan dirender dalam bagian menggunakan @sectionRazor sintaks. Jika halaman atau tampilan menentukan bagian, bagian tersebut harus dirender (atau kesalahan akan terjadi).

Contoh @section definisi dalam Razor tampilan Halaman:

@section Scripts {
     <script type="text/javascript" src="~/scripts/main.js"></script>
}

Dalam kode sebelumnya, scripts/main.js ditambahkan ke bagian scripts pada halaman atau tampilan. Halaman atau tampilan lain di aplikasi yang sama mungkin tidak memerlukan skrip ini dan tidak akan menentukan bagian skrip.

Markup berikut menggunakan Pembantu Tag Parsial untuk merender _ValidationScriptsPartial.cshtml:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Markup sebelumnya dihasilkan oleh perancah Identity.

Bagian yang ditentukan dalam halaman atau tampilan hanya tersedia di halaman tata letak langsungnya. Mereka tidak dapat dirujuk dari parsial, komponen tampilan, atau bagian lain dari sistem tampilan.

Mengabaikan bagian

Secara default, isi dan semua bagian di halaman konten semuanya harus dirender oleh halaman tata letak. Mesin tampilan Razor menerapkan ini dengan melacak apakah tubuh dan setiap bagian telah dirender.

Untuk menginstruksikan mesin tampilan untuk mengabaikan badan atau bagian, panggil metode IgnoreBody dan IgnoreSection.

Isi dan setiap bagian dari halaman Razor harus dirender atau diabaikan.

Mengimpor Direktif Bersama

Tampilan dan halaman dapat menggunakan Razor direktif untuk mengimpor namespace dan menggunakan penyuntikan dependensi. Arahan yang dibagikan oleh banyak pandangan dapat ditentukan dalam berkas umum _ViewImports.cshtml. File _ViewImports mendukung arahan berikut:

  • @addTagHelper
  • @removeTagHelper
  • @tagHelperPrefix
  • @using
  • @model
  • @inherits
  • @inject
  • @namespace

File tidak mendukung fitur lain Razor , seperti fungsi dan definisi bagian.

File sampel _ViewImports.cshtml :

@using WebApplication1
@using WebApplication1.Models
@using WebApplication1.Models.AccountViewModels
@using WebApplication1.Models.ManageViewModels
@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

File _ViewImports.cshtml untuk aplikasi ASP.NET Core MVC biasanya ditempatkan di folder Pages (atau Views). File _ViewImports.cshtml dapat ditempatkan dalam folder apa pun, dalam hal ini hanya akan diterapkan ke halaman atau tampilan dalam folder tersebut dan subfoldernya. _ViewImports file-file diproses mulai dari level akar dan kemudian untuk setiap folder hingga lokasi halaman atau tampilan itu sendiri. _ViewImports pengaturan yang ditentukan pada level akar mungkin di-override pada level folder.

Misalnya, misalkan:

  • File akar tingkat _ViewImports.cshtml memuat @model MyModel1 dan @addTagHelper *, MyTagHelper1.
  • File subfolder _ViewImports.cshtml menyertakan @model MyModel2 dan @addTagHelper *, MyTagHelper2.

Halaman dan tampilan di subfolder akan memiliki akses ke Pembantu Tag dan MyModel2 model.

Jika beberapa _ViewImports.cshtml file ditemukan dalam hierarki file, perilaku gabungan dari arahan adalah:

  • @addTagHelper, @removeTagHelper: semua dijalankan, secara berurutan
  • @tagHelperPrefix: yang paling dekat dengan tampilan mengungguli yang lainnya
  • @model: yang paling dekat dengan tampilan mengambil alih tampilan lainnya
  • @inherits: yang paling dekat dengan tampilan menggantikan pengaturan lain yang ada
  • @using: semua disertakan; duplikat diabaikan
  • @inject: untuk setiap properti, yang paling dekat dengan tampilan akan mengambil alih dari properti lain yang memiliki nama yang sama

Menjalankan kode sebelum setiap tampilan

Kode yang perlu dijalankan sebelum setiap tampilan atau halaman harus ditempatkan dalam _ViewStart.cshtml file. Menurut konvensi, _ViewStart.cshtml file terletak di folder Halaman (atau Tampilan). Pernyataan yang tercantum di _ViewStart.cshtml dijalankan sebelum setiap tampilan penuh (bukan tata letak, dan bukan tampilan parsial). Seperti ViewImports.cshtml, _ViewStart.cshtml bersifat hierarkis. _ViewStart.cshtml Jika file didefinisikan dalam folder tampilan atau halaman, file tersebut akan dijalankan setelah yang ditentukan di akar folder Halaman (atau Tampilan) (jika ada).

File sampel _ViewStart.cshtml :

@{
    Layout = "_Layout";
}

File di atas menentukan bahwa semua tampilan akan menggunakan _Layout.cshtml tata letak.

_ViewStart.cshtml dan _ViewImports.cshtml biasanya tidak ditempatkan di folder /Pages/Shared (atau /Views/Shared). Versi tingkat aplikasi dari file-file ini harus ditempatkan langsung di folder /Pages (atau /Views).

  • Last updated on