ASP.NET Core Razor bileşenlerini ASP.NET Core uygulamalarıyla tümleştirme

Makale
09/23/2024

Bu makalede, ASP.NET Core uygulamaları için bileşen tümleştirme senaryoları açıklanmaktadır Razor .

Razor bileşen tümleştirmesi

Razor bileşenleri Pages, MVC ve diğer ASP.NET Core uygulamaları türleriyle Razor tümleştirilebilir. Razorbileşenleri, ASP.NET Core tabanlı olmayan uygulamalar da dahil olmak üzere herhangi bir web uygulamasıyla özel HTML öğeleri olarak tümleştirilebilir.

Uygulamanın gereksinimlerine bağlı olarak aşağıdaki bölümlerde yer alan yönergeleri kullanın:

Kullanıcı isteklerinden doğrudan yönlendirilemeyen bileşenleri tümleştirmek için Sayfalarda veya görünümlerde yönlendirilebilir olmayan bileşenleri kullanma bölümündeki yönergeleri izleyin. Uygulamanın bileşen etiketi yardımcısı ile yalnızca mevcut sayfalara ve görünümlere bileşen eklemesi gerektiğinde bu kılavuzu izleyin.
Bileşenleri tam Blazor destekle tümleştirmek için ASP.NET Core uygulamasına destek ekleme Blazor bölümündeki yönergeleri izleyin.

Sayfalarda veya görünümlerde yönlendirilemeyen bileşenleri kullanma

Bileşenleri, Bileşen Etiketi Yardımcısı ile var olan Razor bir Sayfaların veya MVC uygulamasının sayfalarına veya görünümlerine tümleştirmek Razor için aşağıdaki kılavuzu kullanın.

Not

Uygulamanız doğrudan yönlendirilebilir bileşenler gerektiriyorsa (sayfalara veya görünümlere eklenmez), bu bölümü atlayın ve ASP.NET Core uygulamasına destek ekleme Blazor bölümündeki yönergeleri kullanın.

Sunucu ön yenilemesi kullanıldığında ve sayfa veya görünüm işlendiğinde:

Bileşen, sayfa veya görünümle önceden oluşturulur.
Prerendering için kullanılan ilk bileşen durumu kaybolur.
Bağlantı kurulduğunda SignalR yeni bileşen durumu oluşturulur.

Etkileşimli olmayan statik bileşen işleme dahil olmak üzere işleme modları hakkında daha fazla bilgi için bkz . ASP.NET Core'da Bileşen Etiketi Yardımcısı. Önceden oluşturulmuş Razor bileşenlerin durumunu kaydetmek için bkz . ASP.NET Core'da Kalıcı Bileşen Durum Etiketi Yardımcısı.

Projenin kök klasörüne bir Components klasör ekleyin.

Aşağıdaki içeriğe sahip klasöre Components bir içeri aktarma dosyası ekleyin. Yer tutucuyu {APP NAMESPACE} projenin ad alanı olarak değiştirin.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Projenin düzen dosyasında (Pages/Shared/_Layout.cshtml Razor Sayfalar uygulamalarında veya Views/Shared/_Layout.cshtml MVC uygulamalarında):

İşaretlemeye bir HeadOutlet bileşen için aşağıdaki <base> etiketi ve Bileşen Etiketi Yardımcısı'nı <head> ekleyin:
```
<base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />
```
Önceki href örnekteki değer (uygulama temel yolu), uygulamanın kök URL yolunda (/) bulunduğunu varsayar. Uygulama bir alt uygulamaysa Konak ve ASP.NET Core'u Blazordağıtma makalesinin Uygulama temel yolu bölümündeki yönergeleri izleyin.

BileşenHeadOutlet, sayfa başlıkları (<head>PageTitlebileşen) ve bileşenler tarafından Razor ayarlanan diğer baş öğeleri (bileşen) için baş (HeadContent) içeriğini işlemek için kullanılır. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.
İşleme bölümünden hemen önce Scripts betik için bir <script> etiket ekleyin (@await RenderSectionAsync(...)):blazor.web.js
```
<script src="_framework/blazor.web.js"></script>
```
Çerçeve, Blazor betiği uygulamaya otomatik olarak ekler blazor.web.js .

Not

Genellikle düzen bir _ViewStart.cshtml dosya aracılığıyla yüklenir.

Projeye işlemsel olmayan (işlemsiz) App bir bileşen ekleyin.

Components/App.razor:

@* No-op App component *@

Hizmetlerin kayıtlı olduğu yerlerde, Etkileşimli Sunucu bileşenlerinin işlenmesini desteklemek üzere Razor bileşenlere ve hizmetlere yönelik hizmetler ekleyin.

Dosyanın en üstünde Program , projenin bileşenleri için dosyanın en üstüne bir using deyim ekleyin:

using {APP NAMESPACE}.Components;

Yukarıdaki satırda yer tutucuyu {APP NAMESPACE} uygulamanın ad alanı olarak değiştirin. Örneğin:

using BlazorSample.Components;

Program Uygulamayı oluşturan satırdan önceki dosyada (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Interactive Server ve WebAssembly bileşenleri için destek ekleme hakkında daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor işleme modları.

Program Bir Sayfalar uygulamasında Sayfaları (MapRazorPages) eşleme Razor veya bir Razor MVC uygulamasında varsayılan denetleyici yolunu (MapControllerRoute) eşleme çağrısından hemen sonra dosyada, kullanılabilir bileşenleri bulmak ve uygulamanın kök bileşenini (yüklenen ilk bileşen) belirtmek için çağrısında MapRazorComponents bulun. Varsayılan olarak, uygulamanın kök bileşeni bileşenidir App (App.razor). Uygulama için etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) yapılandırmak için çağrısı AddInteractiveServerRenderMode zincirleme:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Not

Uygulama, Antiforgery Ara Yazılımı'nı içerecek şekilde henüz güncelleştirilmediyse, çağrıldıktan sonra UseAuthorization aşağıdaki satırı ekleyin:

app.UseAntiforgery();

Bileşenleri herhangi bir sayfa veya görünümle tümleştirin. Örneğin, projenin Components klasörüne bir EmbeddedCounter bileşen ekleyin.

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor Sayfalar:

Index Projenin Pages uygulamasının Razor sayfasında, bileşenin EmbeddedCounter ad alanını ekleyin ve bileşeni sayfaya ekleyin. Index Sayfa yüklendiğinde, EmbeddedCounter bileşen sayfada önceden oluşturulur. Aşağıdaki örnekte, yer tutucuyu {APP NAMESPACE} projenin ad alanıyla değiştirin.

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC:

Projenin Index MVC uygulaması görünümünde bileşenin EmbeddedCounter ad alanını ekleyin ve bileşeni görünüme ekleyin. Index Görünüm yüklendiğinde, EmbeddedCounter bileşen sayfada önceden oluşturulur. Aşağıdaki örnekte, yer tutucuyu {APP NAMESPACE} projenin ad alanıyla değiştirin.

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

ASP.NET Core uygulamasına destek ekleme Blazor

Bu bölüm, ASP.NET Core uygulamasına destek eklemeyi Blazor kapsar:

Statik sunucu tarafı işleme (statik SSR) ekleme
Etkileşimli sunucu tarafı işlemeyi etkinleştirme (etkileşimli SSR)
Etkileşimli otomatik (Otomatik) veya istemci tarafı işlemeyi (CSR) etkinleştirme

Not

Bu bölümdeki örnekler için örnek uygulamanın adı ve ad alanı şeklindedir BlazorSample.

Statik sunucu tarafı işleme (statik SSR) ekleme

Uygulamaya bir Components klasör ekleyin.

Bileşenler tarafından Razor kullanılan ad alanları için aşağıdaki _Imports dosyayı ekleyin.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Ad alanı yer tutucusunu ({APP NAMESPACE}) uygulamanın ad alanıyla değiştirin. Örneğin:

@using BlazorSample
@using BlazorSample.Components

Yönlendiriciyi Blazor (<Router>, Router) uygulamanın klasörüne yerleştirilen bir Routes bileşende uygulamaya Components ekleyin.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Uygulamaya, uygulamanın yüklediği ilk bileşen olan kök bileşen olarak hizmet veren bir App bileşen ekleyin.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Yer {ASSEMBLY NAME} tutucu, uygulamanın derleme adıdır. Örneğin, derleme adı ContosoApp olan bir proje stil sayfası dosya adını kullanır ContosoApp.styles.css .

Yönlendirilebilir Razor bileşenleri tutmak için klasöre bir Pages Components klasör ekleyin.

Statik SSR'yi göstermek için aşağıdaki Welcome bileşeni ekleyin.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

ASP.NET Core projesinin Program dosyasında:

Projenin bileşenleri için dosyanın en üstüne bir using deyim ekleyin:
```
using {APP NAMESPACE}.Components;
```
Yukarıdaki satırda yer tutucuyu {APP NAMESPACE} uygulamanın ad alanı olarak değiştirin. Örneğin:
```
using BlazorSample.Components;
```
Otomatik olarak kötü amaçlı yazılımdan koruma hizmetleri (AddRazorComponents) ekleyen bileşen hizmetleri ()AddAntiforgery ekleyinRazor. çağıran builder.Build()satırın önüne aşağıdaki satırı ekleyin:
```
builder.Services.AddRazorComponents();
```
ile UseAntiforgeryistek işleme işlem hattına Antiforgery Ara Yazılımı ekleyin. UseAntiforgery çağrısından sonra çağrılır UseRouting. ve UseEndpointsçağrıları UseRouting varsa, çağrısı UseAntiforgery bunların arasına girmelidir. ve UseAuthorizationçağrılarının UseAntiforgery ardından için bir çağrı UseAuthentication yapılmalıdır.
```
app.UseAntiforgery();
```
Varsayılan kök bileşen (yüklenen ilk bileşen) olarak belirtilen bileşenle (App.razor) uygulamanın istek işleme işlem hattına App ekleyinMapRazorComponents. Aşağıdaki kodu çağıran app.Runsatırın önüne yerleştirin:
```
app.MapRazorComponents<App>();
```

Uygulama çalıştırıldığında, bileşene Welcome uç noktada /welcome erişilir.

Etkileşimli sunucu tarafı işlemeyi etkinleştirme (etkileşimli SSR)

Statik sunucu tarafı işleme (statik SSR) ekleme bölümündeki yönergeleri izleyin.

Uygulamanın Program dosyasında, bileşen hizmetlerinin ile AddRazorComponentseklendiği yere Razor bir çağrı AddInteractiveServerComponents ekleyin:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Bileşenlerin ile MapRazorComponentseşlendiği yere Razor bir çağrı AddInteractiveServerRenderMode ekleyin:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Aşağıdaki Counter bileşeni, etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) benimseyen uygulamaya ekleyin.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Uygulama çalıştırıldığında bileşenine Counter adresinden /countererişilir.

Etkileşimli otomatik (Otomatik) veya istemci tarafı işlemeyi (CSR) etkinleştirme

Statik sunucu tarafı işleme (statik SSR) ekleme bölümündeki yönergeleri izleyin.

Etkileşimli Otomatik işleme modunu kullanan bileşenler başlangıçta etkileşimli SSR kullanır. .NET çalışma zamanı ve uygulama paketi, istemciye arka planda indirilir ve gelecekteki ziyaretlerde kullanılabilmesi için önbelleğe alınır. Interactive WebAssembly işleme modunu kullanan bileşenler yalnızca paket indirildikten ve çalışma zamanı etkinleştirildikten sonra Blazor istemcide Blazor etkileşimli olarak işlenir. Etkileşimli Otomatik veya Etkileşimli WebAssembly işleme modlarını kullanırken istemciye indirilen bileşen kodunun özel olmadığını unutmayın. Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

Hangi işleme modunun benimseneceklerine karar vererek:

Etkileşimli Otomatik işleme modunu benimsemeyi planlıyorsanız, Etkileşimli sunucu tarafı işlemeyi etkinleştirme (etkileşimli SSR) bölümündeki yönergeleri izleyin.
Yalnızca Etkileşimli WebAssembly işlemeyi benimsemeyi planlıyorsanız, etkileşimli SSR eklemeden devam edin.

Uygulamaya NuGet paketi için Microsoft.AspNetCore.Components.WebAssembly.Server bir paket başvurusu ekleyin.

Not

.NET uygulamalarına paket ekleme hakkında yönergeler için, Paket tüketimi iş akışında (NuGet belgeleri) paketleri yüklemek ve yönetmek altındaki makalelere bakın. NuGet.org'da doğru paket sürümlerini onaylayın.

Uygulamaya varlık sağlamak için bir bağışçı Blazor Web App oluşturun. ASP.NET Core Blazor için Araçlar makalesindeki yönergeleri izleyin ve oluştururken Blazor Web Appaşağıdaki şablon özellikleri için destek seçin.

Uygulamanın adı için ASP.NET Core uygulamasıyla aynı adı kullanın; bu da bileşenlerde uygulama adı işaretlemesinin ve koddaki eşleşen ad alanlarının eşleşmesine neden olur. Varlıklar donör uygulamasından ASP.NET Core uygulamasına taşındıktan sonra ad alanları ayarlanabildiği için aynı adı/ad alanını kullanmak kesinlikle gerekli değildir. Ancak, başlangıçta ad alanları eşleştirilerek zaman kaydedilir.

Visual Studio:

Etkileşimli işleme modu için Otomatik 'i (Sunucu ve WebAssembly) seçin.
Etkileşim konumunu Sayfa/bileşen başına olarak ayarlayın.
Örnek sayfaları ekle onay kutusunun seçimini kaldırın.

.NET CLI:

-int Auto seçeneğini kullanın.
Seçeneğini kullanmayın -ai|--all-interactive .
Seçeneğini belirtin -e|--empty .

Bağışçıdan Blazor Web Appprojenin tamamını .Client ASP.NET Core uygulamasının çözüm klasörüne kopyalayın.

Önemli

klasörü ASP.NET Core projesinin klasörüne kopyalamayın .Client . .NET çözümlerini düzenlemek için en iyi yaklaşım, çözümün her projesini üst düzey çözüm klasörünün içindeki kendi klasörüne yerleştirmektir. ASP.NET Core projesinin klasörünün üzerindeki bir çözüm klasörü yoksa, bir klasör oluşturun. Ardından, projenin klasörünü bağışlayıcıdan Blazor Web App çözüm klasörüne kopyalayın.Client. Son proje klasörü yapısı aşağıdaki düzene sahip olmalıdır:

BlazorSampleSolution (üst düzey çözüm klasörü)
- BlazorSample (özgün ASP.NET Core projesi)
- BlazorSample.Client (.Client donörden Blazor Web Appproje klasörü )

ASP.NET Core çözüm dosyası için, ASP.NET Core projesinin klasöründe bırakabilirsiniz. Alternatif olarak, proje çözüm klasöründeki iki projenin proje dosyalarına (.csproj) doğru başvuruda bulunduysa, çözüm dosyasını taşıyabilir veya üst düzey çözüm klasöründe yeni bir tane oluşturabilirsiniz.

Donör projesini oluştururken donöre Blazor Web App ASP.NET Core uygulamasıyla aynı adı verirseniz, bağışlanan varlıklar tarafından kullanılan ad alanları ASP.NET Core uygulamasındaki ad alanlarıyla eşleşir. Ad alanlarını eşleştirmek için başka adımlar uygulamanız gerekmez. Donör Blazor Web App projesini oluştururken farklı bir ad alanı kullandıysanız, bu kılavuzun kullanımını tam olarak sunulduğu gibi kullanmak rest istiyorsanız, bağışlanan varlıklardaki ad alanlarını eşleşecek şekilde ayarlamanız gerekir. Ad alanları eşleşmiyorsa, devam etmeden önce ad alanlarını ayarlayın veya bu bölümdeki diğer yönergeleri izleyerek ad alanlarını ayarlayın.

Bu işlemde daha fazla kullanılmadığı için bağışlayıcıyı Blazor Web Appsilin.

.Client Projeyi çözüme ekleyin:

Visual Studio: Çözüm Gezgini'da çözüme sağ tıklayın ve Var Olan Projeyi Ekle'yi> seçin. Klasöre .Client gidin ve proje dosyasını (.csproj) seçin.
.NET CLI: Projeyi çözüme eklemek için komutunu kullanındotnet sln add..Client

ASP.NET Core projesinden istemci projesine bir proje başvurusu ekleyin:

Visual Studio: ASP.NET Core projesine sağ tıklayın ve Proje Başvurusu Ekle'yi>seçin. .Client Projeyi seçin ve Tamam'ı seçin.
.NET CLI: ASP.NET Core projesinin klasöründe aşağıdaki komutu kullanın:
```
dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj
```
Yukarıdaki komut aşağıdakileri varsayar:
- Proje dosya adı şeklindedir BlazorSample.Client.csproj.
- Proje .Client , çözüm klasörünün içindeki bir BlazorSample.Client klasörde yer alır. Klasör .Client , ASP.NET Core projesinin klasörüyle yan yanadır.
Komut hakkında dotnet add reference daha fazla bilgi için bkz dotnet add reference . (.NET belgeleri).

ASP.NET Core uygulamasının Program dosyasında aşağıdaki değişiklikleri yapın:

ile bileşen hizmetlerinin AddInteractiveWebAssemblyComponents eklendiği Razor AddRazorComponentsEtkileşimli WebAssembly bileşen hizmetleri ekleyin.

Etkileşimli Otomatik işleme için:
```
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
```
Yalnızca Etkileşimli WebAssembly işleme için:
```
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();
```
Bileşenlerin ile MapRazorComponentseşlendiği Razor proje için .Client Interactive WebAssembly işleme modunu (AddInteractiveWebAssemblyRenderMode) ve ek derlemeleri ekleyin.

Etkileşimli otomatik (Otomatik) işleme için:
```
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);
```
Yalnızca Etkileşimli WebAssembly işleme için:
```
app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);
```
Yukarıdaki örneklerde, projenin ad alanıyla .Client eşleşecek şekilde değiştirinBlazorSample.Client.

Projeye bir Pages klasör .Client ekleyin.

ASP.NET Core projesinin mevcut Counter bir bileşeni varsa:

Bileşeni Pages projenin klasörüne .Client taşıyın.
Bileşen dosyasının @rendermode en üstündeki yönergesini kaldırın.

ASP.NET Core uygulamasının bir Counter bileşeni yoksa projeye aşağıdaki Counter bileşeni (Pages/Counter.razor) .Client ekleyin:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Uygulama yalnızca Interactive WebAssembly işlemeyi benimsiyorsa yönergesini @rendermode ve değerini kaldırın:

- @rendermode InteractiveAuto

çözümü ASP.NET Core uygulama projesinden çalıştırın:

Visual Studio: Uygulamayı çalıştırırken ASP.NET Core projesinin Çözüm Gezgini seçili olduğunu onaylayın.
.NET CLI: projeyi ASP.NET Core projesinin klasöründen çalıştırın.

Bileşeni yüklemek Counter için adresine /countergidin.

'nin düzenini ve stillerini uygulama Blazor

İsteğe bağlı olarak, bileşenin parametresini RouteView.DefaultLayout kullanarak varsayılan bir düzen bileşeni atayın RouteView .

'de Routes.razor, aşağıdaki örnekte varsayılan düzen olarak bir MainLayout bileşen kullanılır:

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor düzenleri.

Blazorproje şablonu düzeni ve stil sayfaları GitHub deposundan kullanılabilirdotnet/aspnetcore:

MainLayout.razor
MainLayout.razor.css
NavMenu.razor
NavMenu.razor.css

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Uygulamadaki düzen dosyalarınızı nasıl düzenlediğinize bağlı olarak, uygulamanın bileşenlerinde kullanmak üzere bunları ortaya çıkarabilmek için, düzen _Imports.razor dosyalarının klasörüne ilişkin bir @using deyim eklemeniz gerekebilir.

CSS yalıtımı kullanılırken stil sayfalarına açıkça başvurmanız gerekmez. Çerçeve, Blazor tek tek bileşen stil sayfalarını otomatik olarak paketler. Uygulamanın paketlenmiş stil sayfasına uygulamanın bileşeninde ({ASSEMBLY NAME}.styles.cssyer tutucunun uygulamanın App derleme adı olduğu) {ASSEMBLY NAME} zaten başvuruldu.

`RazorComponentResult` MVC denetleyicisi eyleminden bir döndürme

MVC denetleyicisi eylemi ile RazorComponentResult<TComponent>bir bileşen döndürebilir.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

Denetleyicide:

public IResult GetWelcomeComponent() => 
    new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });

Yalnızca işlenen bileşen için HTML işaretlemesi döndürülür. Düzenler ve HTML sayfa işaretlemeleri bileşenle otomatik olarak işlenmez. Tam bir HTML sayfası oluşturmak için uygulama, , <head>, <body>ve diğer etiketler için <html>HTML işaretlemesi sağlayan bir Blazor düzen koruyabilir. Bileşen, bu bölümdeki örnekte olduğu gibi, Welcome.razor bileşen tanım dosyasının en üstünde yönergesi olan @layoutRazor düzeni içerir. Aşağıdaki örnekte, uygulamanın adlı RazorComponentResultLayoutComponents/Layout/RazorComponentResultLayout.razorbir düzeni olduğu varsayılır:

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Klasörün deyimini @using Layout uygulamanın _Imports.razor dosyasına taşıyarak tek tek bileşenlere yerleştirmekten kaçınabilirsiniz.

Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor düzenleri.

Bileşen ad alanları

Projenin Razor bileşenlerini tutmak için özel bir klasör kullanırken, klasörü temsil eden ad alanını sayfaya/görünüme veya dosyaya _ViewImports.cshtml ekleyin. Aşağıdaki örnekte:

Bileşenler projenin klasöründe depolanır Components .
Yer {APP NAMESPACE} tutucu, projenin ad alanıdır. Components klasörün adını temsil eder.

@using {APP NAMESPACE}.Components

Örneğin:

@using BlazorSample.Components

Dosya_ViewImports.cshtml, Sayfalar Razor uygulamasının Pages klasöründe veya Views MVC uygulamasının klasöründe bulunur.

Daha fazla bilgi için bkz . ASP.NET Çekirdek Razor bileşenleri.

Ek kaynaklar

Prerender ASP.NET Core Razor bileşenleri

Aracılığıyla paylaş

ASP.NET Core Razor bileşenlerini ASP.NET Core uygulamalarıyla tümleştirme

Razor bileşen tümleştirmesi

Sayfalarda veya görünümlerde yönlendirilemeyen bileşenleri kullanma

ASP.NET Core uygulamasına destek ekleme Blazor

Statik sunucu tarafı işleme (statik SSR) ekleme

Etkileşimli sunucu tarafı işlemeyi etkinleştirme (etkileşimli SSR)

Etkileşimli otomatik (Otomatik) veya istemci tarafı işlemeyi (CSR) etkinleştirme

'nin düzenini ve stillerini uygulama Blazor

RazorComponentResult MVC denetleyicisi eyleminden bir döndürme

Bileşen ad alanları

Ek kaynaklar

Ek kaynaklar

`RazorComponentResult` MVC denetleyicisi eyleminden bir döndürme