Area di ASP.NET Core

Oleh Dhananjay Kumar dan Rick Anderson

Area adalah fitur ASP.NET yang digunakan untuk mengatur fungsionalitas terkait ke dalam grup sebagai terpisah:

• Namespace untuk perutean.
• Struktur folder untuk tampilan dan Razor Halaman.

Menggunakan area membuat hierarki untuk tujuan perutean dengan menambahkan parameter rute lain, area, ke controller dan action atau Razor Halaman page.

Area menyediakan cara untuk mempartisi aplikasi Web ASP.NET Core ke dalam grup fungsional yang lebih kecil, masing-masing dengan sekumpulan Razor Halaman, pengontrol, tampilan, dan modelnya sendiri. Area secara efektif merupakan struktur di dalam aplikasi. Dalam proyek web ASP.NET Core, komponen logis seperti Pages, Model, Controller, dan View disimpan di folder yang berbeda. Runtime ASP.NET Core menggunakan konvensi penamaan untuk membuat hubungan antara komponen-komponen ini. Untuk aplikasi besar, mungkin menguntungkan untuk mempartisi aplikasi ke dalam area fungsionalitas tingkat tinggi yang terpisah. Misalnya, aplikasi e-niaga dengan beberapa unit bisnis, seperti pembayaran, penagihan, dan pencarian. Masing-masing unit ini memiliki areanya sendiri untuk berisi tampilan, pengontrol, Razor Halaman, dan model.

Pertimbangkan untuk menggunakan Area dalam proyek saat:

• Aplikasi ini terbuat dari beberapa komponen fungsi tingkat tinggi yang dapat dipisahkan secara logis.
• Anda ingin mempartisi aplikasi sehingga setiap area fungsional dapat dikerjakan secara independen.

Jika Anda menggunakan Razor Halaman, lihat Area dengan Razor Halaman dalam dokumen ini.

Area untuk pengontrol dengan tampilan

Aplikasi web ASP.NET Core yang khas menggunakan area, pengontrol, dan tampilan berisi hal berikut:

• Struktur folder Area.

• Pengontrol dengan [Area] atribut untuk mengaitkan pengontrol dengan area :

  [Area("Products")]
  public class ManageController : Controller
  {
  

• Rute area ditambahkan ke Program.cs:

  var builder = WebApplication.CreateBuilder(args);
  
  builder.Services.AddControllersWithViews();
  
  var app = builder.Build();
  
  if (!app.Environment.IsDevelopment())
  {
      app.UseExceptionHandler("/Home/Error");
      app.UseHsts();
  }
  
  app.UseHttpsRedirection();
  app.UseStaticFiles();
  
  app.UseRouting();
  
  app.UseAuthorization();
  
  app.MapControllerRoute(
      name: "MyArea",
      pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
  
  app.MapControllerRoute(
      name: "default",
      pattern: "{controller=Home}/{action=Index}/{id?}");
  
  app.Run();
  

Struktur folder area

Pertimbangkan aplikasi yang memiliki dua grup logis, Produk dan Layanan. Menggunakan area, struktur folder akan mirip dengan yang berikut ini:

• Nama proyek
  • Daerah
    • Produk
      • Controller
        • HomeController.cs
        • KelolaController.cs
      • Pemandangan
        • Home
          • Index.cshtml
        • Mengelola
          • Index.cshtml
          • About.cshtml
    • Layanan
      • Controller
        • HomeController.cs
      • Pemandangan
        • Home
          • Index.cshtml

Meskipun tata letak sebelumnya biasanya saat menggunakan Area, hanya file tampilan yang diperlukan untuk menggunakan struktur folder ini. Lihat pencarian penemuan untuk file tampilan area yang cocok dalam urutan berikut:

/Areas/<Area-Name>/Views/<Controller-Name>/<Action-Name>.cshtml
/Areas/<Area-Name>/Views/Shared/<Action-Name>.cshtml
/Views/Shared/<Action-Name>.cshtml
/Pages/Shared/<Action-Name>.cshtml

Mengaitkan pengontrol dengan Area

Pengontrol area ditunjuk [Area] dengan atribut :

using Microsoft.AspNetCore.Mvc;
using Microsoft.Docs.Samples;

namespace MVCareas.Areas.Products.Controllers;

[Area("Products")]
public class ManageController : Controller
{
    public IActionResult Index()
    {
        ViewData["routeInfo"] = ControllerContext.MyDisplayRouteInfo();
        return View();
    }

    public IActionResult About()
    {
        ViewData["routeInfo"] = ControllerContext.MyDisplayRouteInfo();
        return View();
    }
}

Tambahkan rute Area

Rute area biasanya menggunakan perutean konvensional daripada perutean atribut. Perutean konvensional bergantung pada pesanan. Secara umum, rute dengan area harus ditempatkan sebelumnya di tabel rute karena lebih spesifik daripada rute tanpa area.

{area:...} dapat digunakan sebagai token dalam templat rute jika ruang url seragam di semua area:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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

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

app.Run();

Dalam kode sebelumnya, exists menerapkan batasan bahwa rute harus cocok dengan area. Menggunakan {area:...} dengan MapControllerRoute:

• Adalah mekanisme yang paling tidak rumit untuk menambahkan perutean ke area.
• Mencocokkan semua pengontrol dengan [Area("Area name")] atribut .

Kode berikut menggunakan MapAreaControllerRoute untuk membuat dua rute area bernama:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapAreaControllerRoute(
    name: "MyAreaProducts",
    areaName: "Products",
    pattern: "Products/{controller=Home}/{action=Index}/{id?}");

app.MapAreaControllerRoute(
    name: "MyAreaServices",
    areaName: "Services",
    pattern: "Services/{controller=Home}/{action=Index}/{id?}");

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

app.Run();

Untuk informasi selengkapnya, lihat Perutean area.

Pembuatan tautan dengan area MVC

Kode berikut dari unduhan sampel menunjukkan pembuatan tautan dengan area yang ditentukan:

<li>Anchor Tag Helper links</li>
<ul>
    <li>
        <a asp-area="Products" asp-controller="Home" asp-action="About">
            Products/Home/About
        </a>
    </li>
    <li>
        <a asp-area="Services" asp-controller="Home" asp-action="About">
            Services About
        </a>
    </li>
    <li>
        <a asp-area="" asp-controller="Home" asp-action="About">
            /Home/About
        </a>
    </li>
</ul>
<li>Html.ActionLink generated links</li>
<ul>
    <li>
        @Html.ActionLink("Product/Manage/About", "About", "Manage",
                                                new { area = "Products" })
    </li>
</ul>
<li>Url.Action generated links</li>
<ul>
    <li>
        <a href='@Url.Action("About", "Manage", new { area = "Products" })'>
            Products/Manage/About
        </a>
    </li>
</ul>

Unduhan sampel mencakup tampilan parsial yang berisi:

• Tautan sebelumnya.
• Tautan yang mirip dengan sebelumnya kecuali area tidak ditentukan.

Tampilan parsial dirujuk dalam file tata letak, sehingga setiap halaman dalam aplikasi menampilkan tautan yang dihasilkan. Tautan yang dihasilkan tanpa menentukan area hanya valid saat dirujuk dari halaman di area dan pengontrol yang sama.

Ketika area atau pengontrol tidak ditentukan, perutean tergantung pada nilai sekitar . Nilai rute saat ini dari permintaan saat ini dianggap sebagai nilai sekitar untuk pembuatan tautan. Dalam banyak kasus untuk aplikasi sampel, menggunakan nilai sekitar menghasilkan tautan yang salah dengan markup yang tidak menentukan area.

Untuk informasi selengkapnya, lihat Perutean ke tindakan pengontrol.

Tata letak bersama untuk Area menggunakan file _ViewStart.cshtml

Untuk berbagi tata letak umum untuk seluruh aplikasi, simpan _ViewStart.cshtml di folder akar aplikasi. Untuk informasi selengkapnya, lihat Tata Letak di ASP.NET Core

Folder akar aplikasi

Folder akar aplikasi adalah folder yang berisi Program.cs file dalam aplikasi web yang dibuat dengan templat ASP.NET Core.

_ViewImports.cshtml

/Views/_ViewImports.cshtml, untuk MVC, dan /Pages/_ViewImports.cshtml for Razor Pages, tidak diimpor ke tampilan di area. Gunakan salah satu pendekatan berikut untuk menyediakan impor tampilan ke semua tampilan:

• Tambahkan _ViewImports.cshtml ke folder akar aplikasi. _ViewImports.cshtml di folder akar aplikasi akan berlaku untuk semua tampilan di aplikasi.
• Salin file _ViewImports.cshtml ke folder tampilan yang sesuai di bawah area. Misalnya, aplikasi Pages yang Razor dibuat dengan akun pengguna individual memiliki file _ViewImports.cshtml di folder berikut:
  • /Area/Identity/Pages/_ViewImports.cshtml
  • /Pages/_ViewImports.cshtml

File _ViewImports.cshtml biasanya berisi impor Pembantu Tag, @using, dan @inject pernyataan. Untuk informasi selengkapnya, lihat Mengimpor Direktif Bersama.

Mengubah folder area default tempat tampilan disimpan

Kode berikut mengubah folder area default dari "Areas" menjadi "MyAreas":

using Microsoft.AspNetCore.Mvc.Razor;

var builder = WebApplication.CreateBuilder(args);

builder.Services.Configure<RazorViewEngineOptions>(options =>
{
    options.AreaViewLocationFormats.Clear();
    options.AreaViewLocationFormats.Add("/MyAreas/{2}/Views/{1}/{0}.cshtml");
    options.AreaViewLocationFormats.Add("/MyAreas/{2}/Views/Shared/{0}.cshtml");
    options.AreaViewLocationFormats.Add("/Views/Shared/{0}.cshtml");
});

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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

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

app.Run();

Area dengan Razor Halaman

Area dengan Razor Halaman memerlukan Areas/<area name>/Pages folder di akar aplikasi. Struktur folder berikut digunakan dengan aplikasi sampel:

• Nama proyek
  • Daerah
    • Produk
      • Halaman
        • _ViewImports
        • Tentang
        • Indeks
    • Layanan
      • Halaman
        • Mengelola
          • Tentang
          • Indeks

Pembuatan tautan dengan Razor Halaman dan area

Kode berikut dari unduhan sampel menunjukkan pembuatan tautan dengan area yang ditentukan (misalnya, asp-area="Products"):

<li>Anchor Tag Helper links</li>
<ul>
    <li>
        <a asp-area="Products" asp-page="/About">
            Products/About
        </a>
    </li>
    <li>
        <a asp-area="Services" asp-page="/Manage/About">
            Services/Manage/About
        </a>
    </li>
    <li>
        <a asp-area="" asp-page="/About">
            /About
        </a>
    </li>
</ul>
<li>Url.Page generated links</li>
<ul>
    <li>
        <a href='@Url.Page("/Manage/About", new { area = "Services" })'>
            Services/Manage/About
        </a>
    </li>
    <li>
        <a href='@Url.Page("/About", new { area = "Products" })'>
            Products/About
        </a>
    </li>
</ul>

Unduhan sampel mencakup tampilan parsial yang berisi tautan sebelumnya dan tautan yang sama tanpa menentukan area . Tampilan parsial dirujuk dalam file tata letak, sehingga setiap halaman dalam aplikasi menampilkan tautan yang dihasilkan. Tautan yang dihasilkan tanpa menentukan area hanya valid saat dirujuk dari halaman di area yang sama.

Ketika area tidak ditentukan, perutean tergantung pada nilai sekitar . Nilai rute saat ini dari permintaan saat ini dianggap sebagai nilai sekitar untuk pembuatan tautan. Dalam banyak kasus untuk aplikasi sampel, menggunakan nilai sekitar menghasilkan tautan yang salah. Misalnya, pertimbangkan tautan yang dihasilkan dari kode berikut:

<li>
    <a asp-page="/Manage/About">
        Services/Manage/About
    </a>
</li>
<li>
    <a asp-page="/About">
        /About
    </a>
</li>

Untuk kode sebelumnya:

• Tautan yang dihasilkan dari <a asp-page="/Manage/About"> hanya benar ketika permintaan terakhir adalah untuk halaman di Services area. Misalnya, /Services/Manage/, /Services/Manage/Index, atau /Services/Manage/About.
• Tautan yang dihasilkan dari <a asp-page="/About"> hanya benar ketika permintaan terakhir adalah untuk halaman di /Home.
• Kode berasal dari unduhan sampel.

Mengimpor namespace layanan dan Tag Helpers dengan file _ViewImports

File _ViewImports.cshtml dapat ditambahkan ke setiap folder Halaman area untuk mengimpor namespace layanan dan Pembantu Tag ke setiap Razor Halaman di folder.

Pertimbangkan area Layanan dari kode sampel, yang tidak berisi file _ViewImports.cshtml. Markup berikut menunjukkan Halaman /Services/Manage/AboutRazor :

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RPareas.Areas.Services.Pages.Manage.AboutModel
@{
    ViewData["Title"] = "Srv Mng About";
}

<div>
  ViewData["routeInfo"]:  @ViewData["routeInfo"]
</div>

<a asp-area="Products" asp-page="/Index">
    Products/Index
</a>

Dalam markup sebelumnya:

• Nama kelas yang sepenuhnya memenuhi syarat harus digunakan untuk menentukan model (@model RPareas.Areas.Services.Pages.Manage.AboutModel).
• Pembantu Tag diaktifkan oleh @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Dalam unduhan sampel, area Produk berisi file _ViewImports.cshtml berikut:

@namespace RPareas.Areas.Products.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Markup berikut menunjukkan Halaman /Products/AboutRazor :

@page
@model AboutModel
@{
    ViewData["Title"] = "Prod About";
}

Dalam file sebelumnya, namespace dan @addTagHelper direktif diimpor ke file oleh file Areas/Products/Pages/_ViewImports.cshtml .

Untuk informasi selengkapnya, lihat Mengelola cakupan Pembantu Tag dan Mengimpor Arahan Bersama.

Tata letak bersama untuk Razor Area Halaman

Untuk berbagi tata letak umum untuk seluruh aplikasi, pindahkan _ViewStart.cshtml ke folder akar aplikasi.

Area Penerbitan

Semua file dan file *.cshtml dalam direktori wwwroot diterbitkan ke output ketika <Project Sdk="Microsoft.NET.Sdk.Web"> disertakan dalam file *.csproj.

Menambahkan Area MVC dengan Visual Studio

Di Penjelajah Solusi, klik kanan proyek dan pilih TAMBAHKAN > Item Perancah Baru, lalu pilih Area MVC.

Sumber Daya Tambahan:

• Lihat atau unduh sampel kode (cara mengunduh). Sampel unduhan menyediakan aplikasi dasar untuk area pengujian.
• MyDisplayRouteInfo dan ToCtxString disediakan oleh paket NuGet Rick.Docs.Samples.RouteInfo. Metode menampilkan informasi rute Controller dan Razor Page.