Aracılığıyla paylaş

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

  • Makale

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.

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

ASP.NET Core uygulamasına destek ekleme Blazor

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

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>

Bileşenin RouteView.DefaultLayout parametresiyle RouteView varsayılan bir düzen sağlayabilirsiniz:

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

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

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="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

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

</html>

<link> Yukarıdaki örnekteki öğe için, stil sayfasının dosya adında uygulamanın proje adıyla eşleşecek şekilde değiştirinBlazorSample. Örneğin, adlı ContosoApp bir proje stil sayfası dosya adını kullanır ContosoApp.styles.css :

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

Yönlendirilebilir Razor bileşenleri tutmak için klasöre bir PagesComponents 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 Uygulaması oluşturun. Web Uygulamasını oluştururken aşağıdaki şablon özellikleri için destek seçerek ASP.NET Core Blazor için Araçlar makalesindeki Blazor yönergeleri izleyin.

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ğışçı Blazor Web Uygulamasından projenin 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ğışçı Blazor Web Uygulamasından çö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 bağışçı Blazor Web Uygulamasından proje 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ör Blazor Web Uygulamasını ASP.NET Core uygulamasıyla aynı şekilde adlandırdıysanız, 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. Bağışçı Blazor Web Uygulaması projesini oluştururken farklı bir ad alanı kullandıysanız, bu kılavuzun geri kalanını tam olarak gösterildiği gibi kullanmayı planlıyorsanı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ğışçı Blazor Web Uygulamasını silin.

.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 RazorAddRazorComponentsEtkileş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.

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 ve görünümlerine tümleştirmek Razor için aşağıdaki kılavuzu 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.cshtmlRazor 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'uBlazordağı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 betiği uygulamaya eklediğinden Blazorblazor.web.js, uygulamaya el ile betik eklemeniz blazor.web.js gerekmez.

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ı AddInteractiveInteractiveServerRenderMode 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" />

Yönlendirilebilir bileşenleri kullanma

Yönlendirilebilir Razor bileşenleri mevcut Razor bir Pages veya MVC uygulamasıyla tümleştirmek için aşağıdaki kılavuzu kullanın.

Bu bölümdeki kılavuzda aşağıdakiler varsayılır:

  • Uygulamanın başlığı şeklindedir Blazor Sample.
  • Uygulamanın ad alanı şeklindedir BlazorSample.

Yönlendirilebilir Razor bileşenleri desteklemek için:

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.

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

Yer tutucuyu {APP NAMESPACE} projenin ad alanı olarak değiştirin. Örneğin:

@using BlazorSample
@using BlazorSample.Components

Klasöre Components bir Layout klasör ekleyin.

Klasöre bir alt bilgi bileşeni ve stil sayfası Layout ekleyin.

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

Önceki işaretlemede yer tutucuyu {APP TITLE} uygulamanın başlığına ayarlayın. Örneğin:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Klasöre Layout bir gezinti menüsü bileşeni ekleyin.

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Önceki işaretlemede yer tutucuyu {APP TITLE} uygulamanın başlığına ayarlayın. Örneğin:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Klasöre bir ana düzen bileşeni ve stil sayfası Layout ekleyin.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Klasöre Components aşağıdaki içeriğe sahip bir Routes bileşen ekleyin.

Components/Routes.razor:

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

Aşağıdaki içeriğe Components sahip klasöre 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" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Yukarıdaki kodda uygulama başlığını ve stil sayfası dosya adını güncelleştirin:

  • öğesindeki {APP TITLE} yer tutucu için <title> uygulamanın başlığını ayarlayın. Örneğin:

    <title>Blazor Sample</title>

  • {APP NAMESPACE} Stil sayfası <link> öğesindeki yer tutucu için uygulamanın ad alanını ayarlayın. Örneğin:

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

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 SayfalarıMapRazorPages () eşleme Razor çağrısından hemen sonra dosyada, kullanılabilir bileşenleri bulmak ve uygulamanın kök bileşenini 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();

Yönlendirilebilir bileşenler için klasörde bir Pages klasör Components oluşturun. Aşağıdaki örnek, proje şablonlarındaki CounterBlazor bileşeni temel alan bir Counter bileşendir.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>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++;
    }
}

Projeyi çalıştırın ve konumunda /counteryönlendirilebilir Counter bileşene gidin.

Ad alanları hakkında daha fazla bilgi için Bileşen ad alanları bölümüne bakın.

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()
{
    return 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 @usingLayout 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