Bagikan melalui

Tata letak di ASP.NET Core

  • Artikel

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.

Page Layout example

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

    Pages folder in Solution Explorer

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

    Views folder in Solution Explorer

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 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 pun panggilan ke RenderBody ditempatkan, konten tampilan akan dirender.

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 dilemparkan. Tampilan individual menentukan konten yang akan dirender dalam bagian menggunakan @sectionRazor sintaks. Jika halaman atau tampilan menentukan bagian, halaman harus dirender (atau kesalahan akan terjadi).

Contoh @section definisi dalam Razor tampilan Pages:

@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. Komponen 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 Razor tampilan memberlakukan ini dengan melacak apakah isi dan setiap bagian telah dirender.

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

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

Mengimpor Direktif Bersama

Tampilan dan halaman dapat menggunakan Razor direktif untuk mengimpor namespace layanan dan menggunakan injeksi dependensi. Arahan yang dibagikan oleh banyak tampilan dapat ditentukan dalam file 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 diproses mulai dari tingkat akar dan kemudian untuk setiap folder yang mengarah ke lokasi halaman atau melihat sendiri. _ViewImports pengaturan yang ditentukan pada tingkat akar mungkin ditimpa pada tingkat folder.

Misalnya, misalkan:

  • File tingkat _ViewImports.cshtml akar mencakup @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 mengambil alih tampilan lainnya
  • @model: yang paling dekat dengan tampilan mengambil alih tampilan lainnya
  • @inherits: yang paling dekat dengan tampilan mengambil alih tampilan lainnya
  • @using: semua disertakan; duplikat diabaikan
  • @inject: untuk setiap properti, yang paling dekat dengan tampilan akan menimpa orang lain dengan nama properti 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 dijalankan _ViewStart.cshtml 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.cshtmldan _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).