ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin

  • Makale
  • Okumak için 17 dakika

Razor bileşenleri barındırılan bir Razor çözümde Sayfalar ve MVC uygulamalarıyla Blazor WebAssembly tümleştirilmiş olabilir. Sayfa veya görünüm işlenirken, bileşenler aynı anda önceden işlenecektir.

Çözüm yapılandırması

Önceden inceleyici yapılandırma

Barındırılan bir uygulama için önceden ayar yapmak Blazor WebAssembly için:

  1. Uygulamayı Blazor WebAssembly bir ASP.NET Core barındırabilirsiniz. Tek başına bir uygulama, ASP.NET Core çözümüne eklenebilir veya proje şablonundan oluşturulan barındırılan bir uygulamayı Blazor WebAssembly Blazor WebAssembly Blazor WebAssembly barındırılan seçenekle kullanabilirsiniz:

    • Visual Studio: Ek bilgiler iletişim kutusunda, uygulamayı ASP.NET Core barındırılan onay kutusunu Blazor WebAssembly seçin. Bu makaledeki örneklerde çözüm olarak BlazorHosted adlandırılmıştır.
    • Visual Studio Code/.NET CLI komut kabuğu: dotnet new blazorwasm -ho (seçeneğini -ho|--hosted kullanın). Çözümün -o|--output {LOCATION} klasörünü oluşturmak ve çözümün proje ad alanlarını ayarlamak için seçeneğini kullanın. Bu makalenin örneklerde çözüm () olarak BlazorHosted dotnet new blazorwasm -ho -o BlazorHosted adlandırılmıştır.

    Bu makaledeki örnekler için istemci projesinin ad alanı , sunucu BlazorHosted.Client projesinin ad alanı ise BlazorHosted.Server olur.

  2. Projeden wwwroot/index.html dosyayı Blazor WebAssembly Client silin.

  3. Client Projesinde, içinde aşağıdaki satırları Program.cs silin:

    - builder.RootComponents.Add<App>("#app");
- builder.RootComponents.Add<HeadOutlet>("head::after");

  4. ve _Host.cshtml _Layout.cshtml dosyalarını projenin Server klasörüne Pages ekleyin. Şablondan oluşturulan bir projeden dosyaları Visual Studio komut kabuğunda Blazor Server komutuyla .NET CLI kullanarak edinebilirsiniz (seçenek proje için dotnet new blazorserver -o BlazorServer bir klasör -o BlazorServer oluşturur). Dosyaları projenin Server klasörüne yerleştirdikten Pages sonra:

    Dosyada aşağıdaki değişiklikleri _Layout.cshtml yapın:

    • Dosyanın Pages üst kısmında yer alan ad alanını uygulama sayfalarının ad alanıyla eş olacak şekilde Server güncelleştirin. Aşağıdaki {APP NAMESPACE} örnekte yer alan yer tutucu, dosyayı veren uygun uygulama sayfalarının ad alanını temsil _Layout.cshtml eder:

      Sil:

      - @namespace {APP NAMESPACE}.Pages

      Ekle:

      @namespace BlazorHosted.Server.Pages

    • Dosyanın @using en üstüne proje için bir yönerge Client ekleyin:

      @using BlazorHosted.Client

    • WebAssembly projesinin stil sayfalarını işaret etmek için stil sayfası bağlantılarını güncelleştirin. Aşağıdaki örnekte, istemci projesinin ad alanı BlazorHosted.Client olur. Yer {APP NAMESPACE} tutucu, dosyayı veren uygun uygulamanın ad alanını temsil _Layout.cshtml eder. Bileşenin ön işlerini yapmak <component> için bileşen için Bileşen Etiketi HeadOutlet Yardımcı'sini (etiket) güncelleştirin.

      Sil:

      - <link href="css/site.css" rel="stylesheet" />
- <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
- <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

      Ekle:

      <link href="css/app.css" rel="stylesheet" />
<link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

      Not

      <link>Bootstrap stil sayfası ( ) isteğinde olan css/bootstrap/bootstrap.min.css öğeyi olduğu gibi bırakın.

    • İstemci tarafı Blazor betiği kullanmak için betik kaynağını Blazor WebAssembly güncelleştirin:

      Sil:

      - <script src="_framework/blazor.server.js"></script>

      Ekle:

      <script src="_framework/blazor.webassembly.js"></script>

    _Host.cshtml dosyasında:

    • Ad Pages alanını projenin ad alanı olarak Client değiştirme. Yer {APP NAMESPACE} tutucu, uygun uygulamanın dosyayı veren sayfalarının ad alanını _Host.cshtml temsil eder:

      Sil:

      - @namespace {APP NAMESPACE}.Pages

      Ekle:

      @namespace BlazorHosted.Client

    • Ile kök render-mode bileşenin önkömünü yapmak için Bileşen Etiketi Yardımcı'sı'nın App güncelleştirildi: WebAssemblyPrerendered

      Sil:

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

      Ekle:

      <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

  5. içinde projenin uç Server nokta Program.cs eşlemesinde, dosyasındaki geri dönüş index.html sayfasını olarak _Host.cshtml değiştirir:

    Sil:

    - app.MapFallbackToFile("index.html");

    Ekle:

    app.MapFallbackToPage("/_Host");

  6. Projeyi Server çalıştırın. Barındırılan Blazor WebAssembly uygulama, istemciler için proje tarafından Server önceden hazır olarak hazırlandı.

Bileşenleri sayfalara ve Razor görünümlere ekleme yapılandırması

Aşağıdaki bölümler ve uygulamanın bileşenlerini sunucu uygulamasının sayfalarına ve görünümlerine Razor ekleme örnekleri için ek yapılandırma Client Blazor WebAssembly gerekir.

Projenin Server aşağıdaki dosyaları ve klasörleri olması gerekir.

Razor Sayfa:

  • Pages/Shared/_Layout.cshtml
  • Pages/_ViewImports.cshtml
  • Pages/_ViewStart.cshtml

MVC:

  • Views/Shared/_Layout.cshtml
  • Views/_ViewImports.cshtml
  • Views/_ViewStart.cshtml

Yukarıdaki dosyalar, aşağıdakiler kullanılarak proje şablonlarının ASP.NET Core kullanılarak elde edilir:

  • Visual Studio yeni proje oluşturma araçları.
  • Komut kabuğunu açma ve yürütme dotnet new razor -o {APP NAME} ( Razor Sayfalar) veya dotnet new mvc -o {APP NAME} (MVC). Yer tutucu -o|--output değerine sahip {APP NAME} seçeneği, uygulama için bir ad sağlar ve uygulama için bir klasör oluşturur.

İçeri aktarılan dosyada ad _ViewImports.cshtml alanlarını, dosyaları alan projenin kullanım Server alanlarıyla eş olacak şekilde güncelleştirin.

Pages/_ViewImports.cshtml ( Razor Sayfalar):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Projenin stillerini eklemek için içe aktarılan düzen dosyasını ( _Layout.cshtml ) Client güncelleştirin. Aşağıdaki örnekte, projenin Client ad alanı BlazorHosted.Client olur. <title>öğesi aynı anda güncelleştirilebilir. Yer {APP NAME} tutucu, uygun projenin uygulama adını temsil eder.

Pages/Shared/_Layout.cshtml ( Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-   <title>@ViewData["Title"] - {APP NAME}</title>
+   <title>@ViewData["Title"] - BlazorHosted</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
+   <link href="css/app.css" rel="stylesheet" />
+   <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>

İçe aktarılan düzen ve Home Privacy gezinti bağlantılarını içerir. Bağlantı noktasını Home barındırılan uygulamaya işaret Blazor WebAssembly etmek için köprüyü değiştirme:

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Bir MVC düzen dosyasında:

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Bağlantıyı bir Privacy gizlilik sayfasına (Sayfalar) yol Razor açacak şekilde yapmak için projeye bir gizlilik sayfası Server ekleyin.

Pages/Privacy.cshtmlServer projesinde:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

MVC tabanlı gizlilik görünümü için projede bir gizlilik görünümü Server oluşturun.

View/Home/Privacy.cshtmlServer projesinde:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

HomeMVC uygulamasının denetleyicisinde görünümü geri dönebilirsiniz.

Aşağıdaki kodu Controllers/HomeController.cs dosyasına ekleyin:

public IActionResult Privacy()
{
    return View();
}

Uygun bir uygulamanın dosyalarını içeri aktarıyorsanız, dosyalarda yer alan ad alanlarını projeninkiyle eş olacak şekilde Server güncelleştirin (örneğin, BlazorHosted.Server ).

Statik varlıkları Server projeye, uygun projenin klasöründen içeri wwwroot aktarın:

  • wwwroot/css klasör ve içerik
  • wwwroot/js klasör ve içerik
  • wwwroot/lib klasör ve içerik

Uygun proje bir ASP.NET Core proje şablonundan oluşturulursa ve dosyalar değiştirilmezse, klasördeki tüm klasörü kopyalayıp projeye wwwroot Server kopyalayıp simge favicon.ico dosyasını kaldırabilirsiniz.

Uyarı

Aynı dosyayı (örneğin, favicon.ico ) hem hem de Client klasörlerine Server wwwroot yerleştirmekten kaçının. Her klasördeki statik varlık aynı web kök yolunu paylaştığı için her iki klasörde de aynı dosya varsa bir özel durum oluşturur:

'...\favicon.ico' statik web varlığı, 'wwwroot\favicon.ico' proje dosyasıyla çakışan bir web kök yoluna sahip.

Bu nedenle, her iki klasörde de değil, wwwroot her iki klasörde de statik bir varlık barındırabilirsiniz.

Önceki yapılandırmayı benimsedikten sonra, Razor bileşenleri projenin sayfalarına veya görünümlerine Server katıştırabilirsiniz. Bu makalenin aşağıdaki bölümlerinde yer alan kılavuzu kullanın:

  • Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme
  • Css seçici ile bir sayfada veya görünümde bileşenleri işleme

Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma dahil olmak üzereçözümü yapılandırdikten sonra,Bileşen Etiketi Yardımcısı bir sayfada veya görünümde bir uygulamanın bir bileşenini işlemek için iki işleme Blazor WebAssembly modunu destekler:

Aşağıdaki Sayfalar Razor örneğinde bileşen Counter bir sayfada işlenir. Bileşeni etkileşimli hale etmek için Blazor WebAssembly betik, sayfanın işleme bölümüne dahil edilir. Bileşen etiketi yardımcı () ile bileşenin tam ad alanını kullanmaktan kaçınmak Counter için, istemci projesinin ad alanı için bir yönerge {APP ASSEMBLY}.Pages.Counter @using Pages ekleyin. Aşağıdaki örnekte, projenin Client ad alanı BlazorHosted.Client olur.

Server Pages/RazorPagesCounter1.cshtml Projesinde:

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Projeyi Server çalıştırın. sayfasındaki Razor sayfaya /razorpagescounter1 gidin. Önceden inceli Counter bileşen sayfaya ekli olarak görüntülenir.

RenderMode bileşenin şunları yapılandırıp yapılandırmay olmadığını yapılandırıyor:

  • Sayfaya önceden incelir.
  • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan uygulama önyüklemesi yapmak için Blazor gerekli bilgileri içerir.

Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

Bileşenlerin kullanmakta olduğu statik kaynaklara ve düzen sayfalarının bir uygulamada nasıl düzenleniyora bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün işleme bölümüne eklenir ve stil Scripts sayfaları düzenin öğe <head> içeriğine eklenir.

Css seçici ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma dahil olmaküzere çözümünü yapılandırdikten sonra,dosyasında barındırılan Client bir çözümün Blazor WebAssembly projesine kök bileşenleri Program.cs ekleyin. Aşağıdaki örnekte, bileşeni ile eşleşen öğeyi seçen CSS seçicisi ile bir Counter kök bileşen olarak id counter-component bildirildi. Aşağıdaki örnekte, projenin Client ad alanı BlazorHosted.Client olur.

Projenin Program.cs Client dosyasında, projenin bileşenleri için ad alanını Razor dosyanın en üstüne ekleyin:

using BlazorHosted.Client.Pages;

içinde builder kurulduktan Program.cs sonra, bileşeni Counter kök bileşen olarak ekleyin:

builder.RootComponents.Add<Counter>("#counter-component");

Aşağıdaki Sayfalar Razor örneğinde bileşen Counter bir sayfada işlenir. Bileşeni etkileşimli hale etmek için Blazor WebAssembly betik, sayfanın işleme bölümüne dahil edilir.

Server Pages/RazorPagesCounter2.cshtml Projesinde:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Projeyi Server çalıştırın. sayfasındaki Razor sayfaya /razorpagescounter2 gidin. Önceden inceli Counter bileşen sayfaya ekli olarak görüntülenir.

Bileşenlerin kullanmakta olduğu statik kaynaklara ve düzen sayfalarının bir uygulamada nasıl düzenleniyora bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün işleme bölümüne eklenir ve stil Scripts sayfaları düzenin öğe <head> içeriğine eklenir.

Not

Yukarıdaki örnek, bir uygulamanın önceden işleyicisi varsa ve css seçicisi kullanılarak aynı anda Pages veya MVC uygulamasıyla JSException Blazor WebAssembly tümleştirilmişse bir Razor atar. Projenin bileşenlerinden biri ile gezinmek veya eklenmiş bileşen içeren bir sayfaya veya görünümüne giderek bir veya daha fazla . Client Razor Server JSException

Bir uygulamayı yönlendirilebilir bileşenlerle önceden yönlendirme ve tümleştirme, CSS seçicilerinin kullanımıyla uyumsuz olduğundan bu normal Blazor WebAssembly Razor bir davranıştır.

Önceki bölümlerde yer alan örneklerle çalışıyorsanız ve yalnızca örnek uygulamanıza CSS seçicinin çalıştığını görmek isterseniz, proje dosyasının kök bileşeninin belirtimini açıklama App Client olarak Program.cs alın:

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

CSS seçicisi kullanan eklenmiş bileşenle (örneğin, önceki örnekte) sayfaya veya Razor /razorpagescounter2 görünüme gidin. Sayfa veya görünüm katıştırılmış bileşenle birlikte yüklenir ve katıştırılmış bileşen beklendiği gibi işlev gösterir.

Razor bileşenleri bir uygulama içinde Razor Sayfalar ve MVC uygulamalarıyla Blazor Server tümleştirebilirsiniz. Sayfa veya görünüm işlenirken, bileşenler aynı anda önceden işlenecektir.

Projeyi yapılandırdikten sonra,projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerde yer alan kılavuzu kullanın:

Yapılandırma

Mevcut bir Razor Pages veya MVC uygulaması, bileşenleri Razor sayfalar ve görünümler ile tümleştirebilirsiniz:

  1. Projenin düzen dosyasında:

    • <base>( Pages) veya <head> Pages/Shared/_Layout.cshtml Razor Views/Shared/_Layout.cshtml (MVC) öğesine aşağıdaki etiketi ekleyin:

      <base href="~/" />

      Önceki href örnekte yer alan değer(uygulama temel yolu), uygulamanın kök URL yolunda ( ) olduğunu / varsayıyor. Uygulama bir alt uygulama ise makalenin Uygulama temel yolu bölümündeki yönergeleri ASP.NET Core barındırma ve dağıtma Blazor izleyin.

    • Betik <script> için blazor.server.js uygulamanın düzeninde Scripts işleme bölümünden ( ) hemen önce bir etiket @await RenderSectionAsync(...) ekleyin.

      Pages/Shared/_Layout.cshtml ( Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

      <script src="_framework/blazor.server.js"></script>

      Çerçeve, blazor.server.js betiği uygulamaya ekler. Uygulamaya el ile bir betik blazor.server.js dosyası eklemeniz gerekmez.

  2. Projenin kök klasörüne aşağıdaki içeriğe sahip bir içeri aktarma dosyası ekleyin. Yer {APP NAMESPACE} tutucusunu projenin ad alanı olarak değiştirme.

    _Imports.razor:

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

  3. Hizmetlerin Blazor Server kayıtlı olduğu Program.cs hizmetleri kaydetme:

    builder.Services.AddServerSideBlazor();

  4. Hub Blazor uç noktasını yolların Program.cs eşlenmiş olduğu uç noktalara ekleyin.

    çağrısının sonrasını ( MapRazorPages Pages) veya Razor MapControllerRoute (MVC) aşağıdaki satırı yazın:

    app.MapBlazorHub();

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

    Pages/Shared/Counter.razor ( Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

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

    Razor Sayfalar:

    Projenin Sayfalar uygulamasının Index sayfasında Razor bileşenin ad alanını Counter ekleyin ve bileşeni sayfaya ekleyin. Sayfa Index yüklenirken, Counter bileşen sayfada önceden iş yüküne neden olur. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

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

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

    MVC:

    Projenin Index MVC uygulaması görünümünde bileşenin ad alanını Counter ekleyin ve bileşeni görünüme ekleyin. Görünüm Index yüklenirken, Counter bileşen sayfada önceden iş yüküne sahiptir. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

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

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

Daha fazla bilgi için Bir sayfadan veya görünümden bileşenleri işleme bölümüne bakın.

Sayfalar uygulamasında yönlendirilebilir Razor bileşenleri kullanma

Bu bölüm, kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenler eklemeyle ilgilidir.

Sayfalar uygulamalarına Razor yönlendirilebilir bileşenleri Razor desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. Aşağıdaki App içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye _Host aşağıdaki içeriğe sahip bir sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    Bu senaryoda bileşenler, düzenleri için _Layout.cshtml paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapılandırıp App yapılandırmay olmadığını yapılandırıyor:

    • Sayfaya önceden incelir.
    • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan uygulama önyüklemesi yapmak için Blazor gerekli bilgileri içerir.

    Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

  4. Uç Program.cs noktalara, son uç nokta olarak sayfa için düşük _Host öncelikli bir yol ekleyin:

    app.MapFallbackToPage("/_Host");

  5. Projeye yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje RoutableCounter şablonlarında Counter bileşeni temel alan Blazor bir bileşendir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  6. Projeyi çalıştırın ve 'de yönlendirilebilir RoutableCounter bileşene /routable-counter gidin.

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

MVC uygulamasında yönlendirilebilir bileşenleri kullanma

Bu bölüm, kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenler eklemeyle ilgilidir.

MVC uygulamalarına Razor yönlendirilebilir bileşenleri desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. Aşağıdaki App içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye _Host aşağıdaki içeriğe sahip bir görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri _Layout.cshtml için paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapılandırıp App yapılandırmay olmadığını yapılandırıyor:

    • Sayfaya önceden incelir.
    • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan uygulama önyüklemesi yapmak için Blazor gerekli bilgileri içerir.

    Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

  4. Denetleyiciye bir eylem Home ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Uç Program.cs noktalara, denetleyici eylemi için görünümü döndüren düşük öncelikli bir yol _Host ekleyin:

    app.MapFallbackToController("Blazor", "Home");

  6. PagesMVC uygulamasında bir klasör oluşturun ve yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje RoutableCounter şablonlarında Counter bileşeni temel alan Blazor bir bileşendir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  7. Projeyi çalıştırın ve 'de yönlendirilebilir RoutableCounter bileşene /routable-counter gidin.

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

Bileşenleri bir sayfadan veya görünümden işleme

Bu bölüm, bileşenlerin kullanıcı isteklerinden doğrudan yönlendirilenemay olduğu sayfalara veya görünümlere bileşen eklemeyle ilgilidir.

Bir bileşeni bir sayfadan veya görünümden işlemek için Bileşen Etiketi Yardımcı'sı kullanın.

Durum durumuna sahip etkileşimli bileşenleri işleme

Durum ifadelerine sahip etkileşimli bileşenler bir sayfaya Razor veya görünüme eklenebilir.

Sayfa veya görünüm şunları işler:

  • Bileşen sayfa veya görünümle birlikte kullanılır.
  • Prerendering için kullanılan ilk bileşen durumu kayboldu.
  • Bağlantı kurulduunda yeni bileşen durumu oluşturulur SignalR .

Aşağıdaki Razor sayfa bir bileşeni işler Counter :

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Etkileşimsiz bileşenleri işle

Aşağıdaki Razor sayfada, Counter bileşen bir form kullanılarak belirtilen bir başlangıç değeriyle statik olarak işlenir. Bileşen statik olarak işlendiğinden, bileşen etkileşimli değildir:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Bileşen ad alanları

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

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

_ViewImports.cshtmlDosya, Pages bir Razor Sayfalar uygulamasının KLASÖRÜNDE veya Views bir MVC uygulamasının klasöründe bulunur.

Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.

Ön işlenmiş durumu kalıcı yap

Kalıcı bir ön işlenmiş durum olmadan, prerendering sırasında kullanılan durum kaybedilir ve uygulama tam olarak yüklendiğinde yeniden oluşturulmalıdır. Herhangi bir durum zaman uyumsuz olarak ayarlandığında, ön işlenmiş Kullanıcı arabirimi geçici yer tutucuları ile değiştirildiğinden ve tamamen yeniden işlendiğinde Kullanıcı arabirimi titreşebilir.

Bu sorunları gidermek için, Blazor devam eden bileşen durumu etiketi yardımcısınıkullanan, ön işlenmiş bir sayfada kalıcı durumu destekler. Etiket Yardımcısı etiketini, <persist-component-state /> , kapanış etiketinin içine ekleyin </body> .

Pages/_Layout.cshtml:

<body>
    ...

    <persist-component-state />
</body>

Uygulamada, hizmet kullanılarak hangi durumun kalıcı olacağına karar verin PersistentComponentState . Olay, durumu ön işlenmiş PersistentComponentState.RegisterOnPersisting sayfada kalıcı hale gelmeden hemen önce tetiklenir. Bu, bileşenin bileşeni başlatırken durumu almasına olanak tanır.

Aşağıdaki örnek, FetchData bileşen içindeki bir barındırılan uygulamadan gelen hava durumu tahmininin Blazor WebAssembly Blazor prerendering sırasında kalıcı hale getirilmesini ve ardından bileşeni başlatmak için alındığını gösterir. Devam eden bileşen durumu etiketi Yardımcısı, tüm bileşen etkinleştirmeleri sonrasında bileşen durumunu sürdürür.

Pages/FetchData.razor:

@page "/fetchdata"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription _persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        _persistingSubscription = ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>("fetchdata", out var restored))
        {
            forecasts = await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        _persistingSubscription.Dispose();
    }
}

Prerendering sırasında kullanılan aynı durum ile bileşenleri başlatarak, tüm pahalı başlatma adımları yalnızca bir kez yürütülür. İşlenmiş Kullanıcı arabirimi de ön işlenmiş Kullanıcı arabirimiyle eşleşir, bu yüzden tarayıcıda titreşim gerçekleşmez.

Ek Blazor WebAssembly kaynaklar

Ek Blazor Server kaynaklar

Razor bileşenler, Razor barındırılan bir çözümde sayfalarla ve MVC uygulamalarıyla tümleştirilebilir Blazor WebAssembly . Sayfa veya görünüm işlendiğinde, bileşenler aynı anda önceden alınabilir.

Çözüm yapılandırması

Prerendering yapılandırması

Barındırılan bir uygulama için prerendering ayarlamak için Blazor WebAssembly :

  1. Blazor WebAssemblyuygulamayı bir ASP.NET Core uygulamasında barındırın. tek başına bir Blazor WebAssembly uygulama ASP.NET Core çözümüne eklenebilir veya Blazor WebAssembly barındırılan seçenekle Blazor WebAssembly proje şablonundan oluşturulan bir barındırılan uygulamayı kullanabilirsiniz:

    • Visual Studio: ek bilgi iletişim kutusunda, uygulamayı oluştururken ASP.NET Core barındırılan onay kutusunu seçin Blazor WebAssembly . Bu makalenin örneklerinde çözüm olarak adlandırılmıştır BlazorHosted .
    • Visual Studio Code/.net clı komut kabuğu: dotnet new blazorwasm -ho (seçeneğini kullanın -ho|--hosted ). -o|--output {LOCATION}Çözüm için bir klasör oluşturmak ve çözümün proje ad alanlarını ayarlamak için seçeneğini kullanın. Bu makalenin örneklerinde, çözüm BlazorHosted () olarak adlandırılmıştır dotnet new blazorwasm -ho -o BlazorHosted .

    Bu makaledeki örneklerde, istemci projesinin ad alanı BlazorHosted.Client ve sunucu projesinin ad alanı BlazorHosted.Server .

  2. wwwroot/index.html Dosyayı Blazor WebAssembly Client projeden silin.

  3. Client Projede aşağıdaki satırı silin Program.cs :

    - builder.RootComponents.Add<App>("#app");

  4. Pages/_Host.cshtmlProjenin klasörüne bir dosya ekleyin Server Pages . _Host.cshtmlŞablondan oluşturulan bir projeden bir dosyayı Blazor Server , komut kabuğu 'nda komutunu kullanarak elde edebilirsiniz dotnet new blazorserver -o BlazorServer (Bu -o BlazorServer seçenek proje için bir klasör oluşturur). Pages/_Host.cshtmlDosyayı Server barındırılan çözümün projesine yerleştirdikten sonra Blazor WebAssembly , dosyasında aşağıdaki değişiklikleri yapın:

    • @usingProje için bir yönerge sağlayın Client (örneğin, @using BlazorHosted.Client ).

    • Stil sayfası bağlantılarını, WebAssembly projesinin stil sayfalarını işaret etmek üzere güncelleştirin. Aşağıdaki örnekte, istemci projesinin ad alanı BlazorHosted.Client :

      - <link href="css/site.css" rel="stylesheet" />
- <link href="_content/BlazorServer/_framework/scoped.styles.css" rel="stylesheet" />
+ <link href="css/app.css" rel="stylesheet" />
+ <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />

      Not

      <link>Önyükleme stil sayfasını () isteyen öğeyi yerinde bırakın css/bootstrap/bootstrap.min.css .

    • render-mode Bileşen etiketi Yardımcısı 'nın öğesini App ile kök bileşeni olan PreRender ile birlikte güncelleştirin WebAssemblyPrerendered :

      - <component type="typeof(App)" render-mode="ServerPrerendered" />
+ <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

    • Komut dosyası Blazor kaynağını istemci tarafı komut dosyasını kullanacak şekilde güncelleştirin Blazor WebAssembly :

      - <script src="_framework/blazor.server.js"></script>
+ <script src="_framework/blazor.webassembly.js"></script>

  5. Startup.Configure Server Projesinde, dosyadaki geri dönüşü sayfaya değiştirin index.html _Host.cshtml .

    Startup.cs:

    - endpoints.MapFallbackToFile("index.html");
+ endpoints.MapFallbackToPage("/_Host");

  6. Projeyi çalıştırın Server . Barındırılan Blazor WebAssembly uygulama, istemciler için proje tarafından önceden kullanılır Server .

RazorSayfaların ve görünümlere bileşen ekleme yapılandırması

Razorİstemci uygulamasının bileşenlerini, sunucu uygulamasının sayfalarına ve görünümlerine eklemek için bu makaledeki aşağıdaki bölümler ve örnekler Blazor WebAssembly ek yapılandırma gerektirir.

Projede varsayılan bir Razor sayfa veya MVC düzen dosyası kullanın Server . Server Projenin aşağıdaki dosya ve klasörlere sahip olması gerekir.

Razor Sayfaları

  • Pages/Shared/_Layout.cshtml
  • Pages/_ViewImports.cshtml
  • Pages/_ViewStart.cshtml

MVC

  • Views/Shared/_Layout.cshtml
  • Views/_ViewImports.cshtml
  • Views/_ViewStart.cshtml

Sayfalardan veya MVC proje şablonundan oluşturulan bir uygulamadan önceki dosyaları alın Razor . Daha fazla bilgi için bkz. Öğretici: Kullanmaya başlayın Razor Sayfaları ile ASP.NET Core veya Kullanmaya başlayın MVC ile ASP.NET Core.

İçeri aktarılan dosyadaki ad alanlarını, _ViewImports.cshtml dosyaları alan projenin kullananlarla eşleşecek şekilde güncelleştirin Server .

İçe aktarılan düzen dosyasını ( _Layout.cshtml ) projenin stillerini içerecek şekilde güncelleştirin Client . Aşağıdaki örnekte, Client projenin ad alanı BlazorHosted.Client . <title>Öğesi aynı anda güncelleştirilmiş olabilir.

Pages/Shared/_Layout.cshtml ( Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-   <title>@ViewData["Title"] - DonorProject</title>
+   <title>@ViewData["Title"] - BlazorHosted</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
+   <link href="css/app.css" rel="stylesheet" />
+   <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>

İçeri aktarılan Düzen Home ve Privacy Gezinti bağlantıları içerir. HomeBarındırılan uygulamaya bağlantı noktası oluşturmak için Blazor WebAssembly köprüyü değiştirin:

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

MVC düzen dosyasında:

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

PrivacyBağlantının bir gizlilik sayfasına yol açmak için, projeye bir gizlilik sayfası ekleyin Server .

Pages/Privacy.cshtmlServer projede:

@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}

<h1>Privacy Policy</h1>

MVC tabanlı bir gizlilik görünümü tercih edilirse, projede bir gizlilik görünümü oluşturun Server .

View/Home/Privacy.cshtml:

@{
    ViewData["Title"] = "Privacy Policy";
}

<h1>@ViewData["Title"]</h1>

Denetleyicide Home görünümü geri başlatın.

Controllers/HomeController.cs:

+ public IActionResult Privacy()
+ {
+     return View();
+ }

Statik varlıkları Server projeye, uygun projenin klasöründen içeri wwwroot aktarın:

  • wwwroot/css klasör ve içerik
  • wwwroot/js klasör ve içerik
  • wwwroot/lib klasör ve içerik

Uygun proje bir ASP.NET Core proje şablonundan oluşturulursa ve dosyalar değiştirilmezse, klasördeki tüm klasörü kopyalayıp projeye wwwroot Server kopyalayıp simge favicon.ico dosyasını kaldırabilirsiniz.

Not

ve projeleri klasörlerinde aynı statik varlığı Client Server wwwroot içeriyorsa (örneğin, ), her klasördeki statik varlık aynı web kök yolunu paylaştığı için bir favicon.ico özel durum oluşturur:

'...\favicon.ico' statik web varlığı, 'wwwroot\favicon.ico' proje dosyasıyla çakışan bir web kök yoluna sahip.

Bu nedenle, her iki klasörde de değil, wwwroot her iki klasörde de statik bir varlık barındırabilirsiniz.

Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma dahil olmak üzereçözümü yapılandıran Bileşen Etiketi Yardımcı, bir sayfada veya görünümde bir uygulamanın bir bileşenini işlemek için iki işleme modunu Blazor WebAssembly destekler:

Aşağıdaki Sayfalar Razor örneğinde bileşen Counter bir sayfada işlenir. Bileşeni etkileşimli hale etmek için Blazor WebAssembly betik, sayfanın işleme bölümüne dahil edilir. Bileşen etiketi yardımcı () ile bileşenin tam ad alanını kullanmaktan kaçınmak Counter için, istemci projesinin ad alanı için bir yönerge {APP ASSEMBLY}.Pages.Counter @using Pages ekleyin. Aşağıdaki örnekte, projenin Client ad alanı BlazorHosted.Client olur.

Server Pages/RazorPagesCounter1.cshtml Projesinde:

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Projeyi Server çalıştırın. sayfasındaki Razor sayfaya /razorpagescounter1 gidin. Önceden inceli Counter bileşen sayfaya ekli olarak görüntülenir.

RenderMode bileşenin şunları yapılandırıp yapılandırmay olmadığını yapılandırıyor:

  • Sayfaya önceden incelir.
  • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan bir uygulamayı önyüklemek için Blazor gerekli bilgileri içerir.

Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

Bileşenlerin kullanmakta olduğu statik kaynaklara ve düzen sayfalarının bir uygulamada nasıl düzenleniyora bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün işleme bölümüne eklenir ve stil Scripts sayfaları düzenin öğe <head> içeriğine eklenir.

Css seçici ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma dahil olmak üzereçözümünü yapılandırdikten sonra,içinde barındırılan Client bir çözümün projesine kök Blazor WebAssembly bileşenleri Program.cs ekleyin. Aşağıdaki örnekte, bileşeni ile eşleşen öğeyi seçen CSS seçicisi ile bir Counter kök bileşen olarak id counter-component bildirildi. Aşağıdaki örnekte, projenin Client ad alanı BlazorHosted.Client olur.

Program.csprojesinin Client içinde, projenin bileşenleri için ad Razor alanını dosyanın en üstüne ekleyin:

+ using BlazorHosted.Client.Pages;

içinde builder kurulduktan Program.cs sonra, bileşeni Counter kök bileşen olarak ekleyin:

+ builder.RootComponents.Add<Counter>("#counter-component");

Aşağıdaki Sayfalar Razor örneğinde bileşen Counter bir sayfada işlenir. Bileşeni etkileşimli hale etmek için Blazor WebAssembly betik, sayfanın işleme bölümüne dahil edilir.

Server Pages/RazorPagesCounter2.cshtml Projesinde:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Projeyi Server çalıştırın. sayfasındaki Razor sayfaya /razorpagescounter2 gidin. Önceden inceli Counter bileşen sayfaya ekli olarak görüntülenir.

Bileşenlerin kullanmakta olduğu statik kaynaklara ve düzen sayfalarının bir uygulamada nasıl düzenleniyora bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün işleme bölümüne eklenir ve stil Scripts sayfaları düzenin öğe <head> içeriğine eklenir.

Not

Yukarıdaki örnek, bir uygulamanın önceden bağlı olduğu ve css seçici ile aynı anda Pages veya MVC uygulamasıyla tümleştirili JSException Blazor WebAssembly olduğu bir Razor örnektir. Projenin bileşenlerinden biri Client ile Razor gezinmek aşağıdaki özel durumu oluşturur:

Microsoft.JSInterop.JSException: '#counter-component' seçiciyle eşleşen öğe bulunamayan.

Bir uygulamayı yönlendirilebilir bileşenlerle önceden yönlendirme ve tümleştirme, CSS seçicilerinin kullanımıyla uyumsuz olduğundan bu normal Blazor WebAssembly Razor bir davranıştır.

Razor bileşenleri bir uygulama içinde Razor Sayfalar ve MVC uygulamalarıyla Blazor Server tümleştirebilirsiniz. Sayfa veya görünüm işlenirken, bileşenler aynı anda önceden işlenecektir.

Projeyi yapılandırdikten sonra,projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerde yer alan kılavuzu kullanın:

Yapılandırma

Mevcut bir Razor Pages veya MVC uygulaması, bileşenleri Razor sayfalar ve görünümler ile tümleştirebilirsiniz:

  1. Projenin düzen dosyasında:

    • <base>( Pages) veya <head> Pages/Shared/_Layout.cshtml Razor Views/Shared/_Layout.cshtml (MVC) öğesine aşağıdaki etiketi ekleyin:

      + <base href="~/" />

      Önceki href örnekte yer alan değer(uygulama temel yolu), uygulamanın kök URL yolunda ( ) olduğunu / varsayıyor. Uygulama bir alt uygulama ise makalenin Uygulama temel yolu bölümündeki yönergeleri ASP.NET Core barındırma ve dağıtma Blazor izleyin.

    • İşleme bölümünden <script> hemen önce blazor.server.js betik için bir etiket Scripts ekleyin.

      Pages/Shared/_Layout.cshtml ( Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

          ...
+   <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Çerçeve, blazor.server.js betiği uygulamaya ekler. Uygulamaya el ile bir betik blazor.server.js dosyası eklemeniz gerekmez.

  2. Projenin kök klasörüne aşağıdaki içeriğe sahip bir içeri aktarma dosyası ekleyin. Yer {APP NAMESPACE} tutucusunu projenin ad alanı olarak değiştirme.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Hizmeti Blazor Server 'ye Startup.ConfigureServices kaydetme.

    Startup.cs:

    + services.AddServerSideBlazor();

  4. Hub Blazor uç noktasını ' ın uç noktalarına ( app.UseEndpoints ) Startup.Configure ekleyin.

    Startup.cs:

    + endpoints.MapBlazorHub();

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

    Pages/Shared/Counter.razor ( Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

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

    Razor Sayfalar:

    Projenin Sayfalar uygulamasının Index sayfasında Razor bileşenin ad alanını Counter ekleyin ve bileşeni sayfaya ekleyin. Sayfa Index yüklenirken, Counter bileşen sayfada önceden iş yüküne neden olur. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

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

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

    Yukarıdaki örnekte yer tutucusunu {APP NAMESPACE} uygulamanın ad alanıyla değiştirin.

    MVC:

    Projenin Index MVC uygulaması görünümünde bileşenin ad alanını Counter ekleyin ve bileşeni görünüme ekleyin. Görünüm Index yüklenirken, Counter bileşen sayfada önceden iş yüküne sahiptir. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

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

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

Daha fazla bilgi için Bir sayfadan veya görünümden bileşenleri işleme bölümüne bakın.

Sayfalar uygulamasında yönlendirilebilir Razor bileşenleri kullanma

Bu bölüm, kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenler eklemeyle ilgilidir.

Sayfalar uygulamalarına Razor yönlendirilebilir bileşenleri Razor desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. Aşağıdaki App içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Not

    ASP.NET Core 5.0.1 sürümü ve ek 5.x sürümler için bileşeni olarak Router PreferExactMatches ayarlanmış parametreyi @true içerir. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den 5.0'a geçiş.

  3. Projeye _Host aşağıdaki içeriğe sahip bir sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri _Layout.cshtml için paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapılandırıp App yapılandırmay olmadığını yapılandırıyor:

    • Sayfaya önceden incelir.
    • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan bir uygulamayı önyüklemek için Blazor gerekli bilgileri içerir.

    Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

  4. uç Startup.Configure Startup.cs noktalarında, son uç nokta olarak sayfa için düşük öncelikli bir yol _Host ekleyin:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
+   endpoints.MapFallbackToPage("/_Host");
});

  5. Projeye yönlendirilebilir bileşenler ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  6. Projeyi çalıştırın ve 'de yönlendirilebilir RoutableCounter bileşene /routable-counter gidin.

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

MVC uygulamasında yönlendirilebilir bileşenleri kullanma

Bu bölüm, kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenler eklemeyle ilgilidir.

MVC uygulamalarına Razor yönlendirilebilir bileşenleri desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. Aşağıdaki App içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Not

    ASP.NET Core 5.0.1 sürümü ve ek 5.x sürümler için bileşeni olarak Router PreferExactMatches ayarlanmış parametreyi @true içerir. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den 5.0'a geçiş.

  3. Projeye _Host aşağıdaki içeriğe sahip bir görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri _Layout.cshtml için paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapılandırıp App yapılandırmay olmadığını yapılandırıyor:

    • Sayfaya önceden incelir.
    • Sayfada statik HTML olarak işlenir veya kullanıcı aracıdan uygulama önyüklemesi yapmak için Blazor gerekli bilgileri içerir.

    Parametreleri ve yapılandırmayı geçirme de dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi RenderMode için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core .

  4. Denetleyiciye bir eylem Home ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. uç Startup.Configure noktalarında, denetleyici eylemi için görünümü döndüren düşük Startup.cs öncelikli bir yol _Host ekleyin:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
+   endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Projeye yönlendirilebilir bileşenler ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  7. Projeyi çalıştırın ve 'de yönlendirilebilir RoutableCounter bileşene /routable-counter gidin.

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

Bileşenleri bir sayfadan veya görünümden işleme

Bu bölüm, bileşenlerin kullanıcı isteklerinden doğrudan yönlendirilenemay olduğu sayfalara veya görünümlere bileşen eklemeyle ilgilidir.

Bir bileşeni bir sayfadan veya görünümden işlemek için Bileşen Etiketi Yardımcı'sı kullanın.

Durum durumuna sahip etkileşimli bileşenleri işleme

Durumful etkileşimli bileşenler bir sayfaya veya Razor görünüme eklenebilir.

Sayfa veya görünüm işleyiciler:

  • Bileşen, sayfa veya görünümle önceden seçilidir.
  • Önceden başlatma için kullanılan ilk bileşen durumu kaybolur.
  • Bağlantı oluşturulduğunda yeni SignalR bileşen durumu oluşturulur.

Aşağıdaki sayfa Razor bir bileşeni Counter işler:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Etkin olmayan bileşenleri işleme

Aşağıdaki Razor sayfada, Counter bileşen bir form kullanılarak belirtilen bir başlangıç değeriyle statik olarak işlenir. Bileşen statik olarak işlenen bileşen etkileşimli değildir:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Bileşen ad alanları

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

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

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

Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.

Ek Blazor WebAssembly kaynaklar

Ek Blazor Server kaynaklar

Barındırılan bir çözümde bileşenleri Sayfalar ve MVC uygulamalarıyla tümleştirerek .NET 5 ASP.NET Core veya sonraki bir Razor Razor Blazor WebAssembly 5. Bu makalenin .NET 5 veya sonraki bir sürümünü seçin.

Razor bileşenleri bir uygulama içinde Razor Sayfalar ve MVC uygulamalarıyla Blazor Server tümleştirebilirsiniz. Sayfa veya görünüm işlenirken, bileşenler aynı anda önceden işlenecektir.

Projeyi yapılandırdikten sonra,projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerde yer alan kılavuzu kullanın:

Yapılandırma

Mevcut bir Razor Pages veya MVC uygulaması, bileşenleri Razor sayfalar ve görünümler ile tümleştirebilirsiniz:

  1. Projenin düzen dosyasında:

    • <base>( Pages) veya <head> Pages/Shared/_Layout.cshtml Razor Views/Shared/_Layout.cshtml (MVC) öğesine aşağıdaki etiketi ekleyin:

      + <base href="~/" />

      Önceki href örnekte yer alan değer(uygulama temel yolu), uygulamanın kök URL yolunda ( ) olduğunu / varsayıyor. Uygulama bir alt uygulama ise makalenin Uygulama temel yolu bölümündeki yönergeleri ASP.NET Core barındırma ve dağıtma Blazor izleyin.

    • İşleme bölümünden <script> hemen önce blazor.server.js betik için bir etiket Scripts ekleyin.

      Pages/Shared/_Layout.cshtml ( Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

          ...
+   <script src="_framework/blazor.server.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Çerçeve, blazor.server.js betiği uygulamaya ekler. Uygulamaya el ile bir betik blazor.server.js dosyası eklemeniz gerekmez.

  2. Projenin kök klasörüne aşağıdaki içeriğe sahip bir içeri aktarma dosyası ekleyin. Yer {APP NAMESPACE} tutucusunu projenin ad alanı olarak değiştirme.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Hizmeti Blazor Server 'ye Startup.ConfigureServices kaydetme.

    Startup.cs:

    + services.AddServerSideBlazor();

  4. Hub Blazor uç noktasını ' ın uç noktalarına ( app.UseEndpoints ) Startup.Configure ekleyin.

    Startup.cs:

    + endpoints.MapBlazorHub();

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

    Pages/Shared/Counter.razor ( Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

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

    Razor Sayfalar:

    Projenin Sayfalar uygulamasının Index sayfasında Razor bileşenin ad alanını Counter ekleyin ve bileşeni sayfaya ekleyin. Sayfa Index yüklenirken, Counter bileşen sayfada önceden iş yüküne neden olur. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

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

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

    Yukarıdaki örnekte yer tutucusunu {APP NAMESPACE} uygulamanın ad alanıyla değiştirin.

    MVC:

    Projenin Index MVC uygulaması görünümünde bileşenin ad alanını Counter ekleyin ve bileşeni görünüme ekleyin. Görünüm Index yüklenirken, Counter bileşen sayfada önceden iş yüküne sahiptir. Aşağıdaki örnekte yer tutucusunu {APP NAMESPACE} projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

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

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

Daha fazla bilgi için Bir sayfadan veya görünümden bileşenleri işleme bölümüne bakın.

Sayfalar uygulamasında yönlendirilebilir Razor bileşenleri kullanma

Bu bölüm, kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenler eklemeyle ilgilidir.

Sayfalar uygulamalarına Razor yönlendirilebilir bileşenleri Razor desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. AppAşağıdaki içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. _HostProjeye aşağıdaki içeriğe sahip bir sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Bileşenler, _Layout.cshtml düzen için paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapıp kullanmadığını yapılandırır App :

    • , Sayfaya ön gönderilir.
    • , Sayfada statik HTML olarak veya Kullanıcı aracısından bir uygulamayı önyüklemek için gerekli bilgileri içeriyorsa Blazor .

    Bileşen etiketi Yardımcısı hakkında, parametreleri ve yapılandırmayı geçirme dahil daha fazla bilgi için RenderMode bkz ASP.NET Core'de Bileşen Etiketi ASP.NET Core ..

  4. Startup.ConfigureUç noktalarında Startup.cs , _Host son bitiş noktası olarak sayfa için düşük öncelikli bir yol ekleyin:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
+   endpoints.MapFallbackToPage("/_Host");
});

  5. Projeye yönlendirilebilir bileşenler ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  6. Projeyi çalıştırın ve RoutableCounter adresindeki yönlendirilebilir bileşene gidin /routable-counter .

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

MVC uygulamasında yönlendirilebilir bileşenleri kullanma

Bu bölüm, Kullanıcı isteklerinden doğrudan yönlendirilebilir bileşenleri eklemeye aittir.

RazorMVC uygulamalarında yönlendirilebilir bileşenleri desteklemek için:

  1. Yapılandırma bölümündeki yönergeleri izleyin.

  2. AppAşağıdaki içeriğe sahip proje köküne bir bileşen ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. _HostProjeye aşağıdaki içerikle bir görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Bileşenler, _Layout.cshtml düzen için paylaşılan dosyayı kullanır.

    RenderMode bileşenin şunları yapıp kullanmadığını yapılandırır App :

    • , Sayfaya ön gönderilir.
    • , Sayfada statik HTML olarak veya Kullanıcı aracısından bir uygulamayı önyüklemek için gerekli bilgileri içeriyorsa Blazor .

    Bileşen etiketi Yardımcısı hakkında, parametreleri ve yapılandırmayı geçirme dahil daha fazla bilgi için RenderMode bkz ASP.NET Core'de Bileşen Etiketi ASP.NET Core ..

  4. Denetleyiciye bir eylem ekleyin Home .

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.ConfigureUç noktalarında Startup.cs , bu görünümü döndüren denetleyici eylemi için düşük öncelikli bir yol ekleyin _Host :

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
+   endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Projeye yönlendirilebilir bileşenler ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

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

  7. Projeyi çalıştırın ve RoutableCounter adresindeki yönlendirilebilir bileşene gidin /routable-counter .

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

Bir sayfadan veya görünümden bileşenleri işleme

Bu bölüm, bileşenlerin Kullanıcı isteklerinden doğrudan yönlendirilemeyen sayfalara veya görünümlere bileşen eklenmesine aittir.

Bir sayfadan veya görünümden bir bileşeni işlemek için bileşen etiketi yardımcısınıkullanın.

Durum bilgisi olan etkileşimli bileşenleri işle

Durum bilgisi olan etkileşimli bileşenler, bir Razor sayfaya veya görünüme eklenebilir.

Sayfa veya görünüm şunları işler:

  • Bileşen sayfa veya görünümle birlikte kullanılır.
  • Prerendering için kullanılan ilk bileşen durumu kayboldu.
  • Bağlantı kurulduunda yeni bileşen durumu oluşturulur SignalR .

Aşağıdaki Razor sayfa bir bileşeni işler Counter :

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Etkileşimsiz bileşenleri işle

Aşağıdaki Razor sayfada, Counter bileşen bir form kullanılarak belirtilen bir başlangıç değeriyle statik olarak işlenir. Bileşen statik olarak işlendiğinden, bileşen etkileşimli değildir:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için bkz. ASP.NET Core'de Bileşen Etiketi ASP.NET Core.

Bileşen ad alanları

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

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

_ViewImports.cshtmlDosya, Pages bir Razor Sayfalar uygulamasının KLASÖRÜNDE veya Views bir MVC uygulamasının klasöründe bulunur.

Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen.

Ek Blazor Server kaynaklar