ASP.NET Core Razor bileşenlerini önceden oluşturma ve tümleştirme

Bu makalede, sunucudaki bileşenlerin önceden yenilenmesi Razor de dahil olmak üzere uygulamalar için Blazor bileşen tümleştirme senaryoları açıklanmaktadırRazor.

Önemli

ASP.NET Core sürümlerindeki çerçeve değişiklikleri, bu makalede farklı yönergeler kümesine yol açtı. Bu makalenin kılavuzunu kullanmadan önce, bu sayfadaki belge sürümü seçicisinin uygulamanız için kullanmayı düşündüğünüz ASP.NET Core sürümüyle eşleşip eşleşmediğini onaylayın.

Razorbileşenleri barındırılanBlazor WebAssembly bir çözümde Sayfalar ve MVC uygulamalarıyla Razor tümleştirilebilir. Sayfa veya görünüm işlendiğinde, bileşenler aynı anda önceden oluşturulabilir.

Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullanabileceği ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) geliştirebilir.

Çözüm yapılandırması

Prerendering yapılandırması

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

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

   • Visual Studio: Ek bilgiler iletişim kutusunda, uygulamayı oluştururken ASP.NET Temel Barındırılan Blazor WebAssembly onay kutusunu seçin. Bu makalenin örneklerinde çözümün adı BlazorHostedverilmiştir.
   • Visual Studio Code/.NET CLI 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 () olarak adlandırılmıştırBlazorHosteddotnet new blazorwasm -ho -o BlazorHosted.

   Bu makaledeki örnekler için barındırılan çözümün adı (derleme adı) şeklindedir BlazorHosted. İstemci projesinin ad alanı , BlazorHosted.Clientsunucu projesinin ad alanı ise olur BlazorHosted.Server.

2. wwwroot/index.html Dosyayı projedenClientBlazor WebAssemblysilin.

3. ProjedeClient, içindeki Program.csaşağıdaki satırları silin:

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

4. Projenin Pages klasörüne Server dosya ekleyin_Host.cshtml. Visual Studio kullanarak veya komut kabuğunda komutuyla dotnet new blazorserver -o BlazorServer .NET CLI kullanarak şablondan oluşturulan bir projeden Blazor Server dosyaları alabilirsiniz (-o BlazorServerbu seçenek proje için bir klasör oluşturur). Dosyaları Server projenin Pages klasörüne yerleştirdikten sonra dosyalarda aşağıdaki değişiklikleri yapın.

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

   • Pages Dosyanın üst kısmındaki ad alanını, uygulama sayfalarının ad alanıyla Server eşleşecek şekilde güncelleştirin. {APP NAMESPACE} Aşağıdaki örnekte yer tutucu, dosyayı sağlayan donör uygulamasının sayfalarının _Host.cshtml ad alanını temsil eder:

     Silme:

     - @namespace {APP NAMESPACE}.Pages
     

     Ekle:

     @namespace BlazorHosted.Server.Pages
     

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

     @using BlazorHosted.Client
     

   • Stil sayfası bağlantılarını WebAssembly projesinin stil sayfalarını işaret edecek şekilde güncelleştirin. Aşağıdaki örnekte istemci projesinin ad alanı şeklindedir BlazorHosted.Client. Yer tutucu, {APP NAMESPACE} dosyayı sağlayan _Host.cshtml bağış uygulamasının ad alanını temsil eder. Bileşenin önceden yenilenmesi için bileşen için Bileşen Etiketi Yardımcısı'nı HeadOutlet (<component>etiket) güncelleştirin.

     Silme:

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

     Dekont

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

   • Blazor betik kaynağını istemci tarafı Blazor WebAssembly betiğini kullanacak şekilde güncelleştirin:

     Silme:

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

     Ekle:

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

   • render-modeKök App bileşeni ile WebAssemblyPrerenderedönceden kullanmak için Bileşen Etiketi Yardımcısı'nı güncelleştirin:

     Silme:

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

     Ekle:

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

     Önemli

     Kimlik doğrulama uç noktaları (/authentication/ yol kesimi) için ön kayıt desteklenmez. Daha fazla bilgi için, bkz. ASP.NET Core Blazor WebAssembly ek güvenlik senaryoları.

5. Program.cs Projenin dosyasında Server geri dönüş uç noktasını dosyadan index.html sayfaya _Host.cshtml değiştirin:

   Silme:

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

   Ekle:

   app.MapFallbackToPage("/_Host");
   

6. Client ve Server projeleri, ön kayıt sırasında bir veya daha fazla yaygın hizmet kullanıyorsa, hizmet kayıtlarını her iki projeden çağrılabilecek bir yönteme dahil edin. Daha fazla bilgi için bkz . ASP.NET Core Blazor bağımlılık ekleme.

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

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

Uygulamadan sunucu uygulamasının ClientBlazor WebAssembly sayfalarına ve görünümlerine bileşen eklemeye Razor yönelik aşağıdaki bölümler ve örnekler ek yapılandırma gerektirir.

Proje Server aşağıdaki dosya ve klasörlere sahip olmalıdır.

Razor Sayfa:

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

MVC:

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

Yukarıdaki dosyalar, ASP.NET Core proje şablonlarından aşağıdakiler kullanılarak bir uygulama oluşturularak elde edilebilir:

• Visual Studio'nun yeni proje oluşturma araçları.
• Komut kabuğu açma ve yürütme dotnet new webapp -o {PROJECT NAME} (Razor Sayfalar) veya dotnet new mvc -o {PROJECT NAME} (MVC). Yer tutucu için bir değer {PROJECT NAME} içeren seçenek-o|--output, uygulama için bir ad sağlar ve uygulama için bir klasör oluşturur.

İçeri aktarılan _ViewImports.cshtml dosyadaki ad alanlarını, dosyaları alan proje tarafından kullanılan ad alanlarıyla Server eşleşecek ş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

Sayfalar veya Views/Shared/_Layout.cshtml MVC için Razor olan Pages/Shared/_Layout.cshtml içeri aktarılan düzen dosyasını güncelleştirin.

İlk olarak, aşağıdaki örnekteki donör projesinden RPDonor.styles.css başlığı ve stil sayfasını silin. Yer tutucu, {PROJECT NAME} bağış projesinin uygulama adını temsil eder.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Client Projenin stillerini düzen dosyasına ekleyin. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client. <title> öğesi aynı anda güncelleştirilebilir.

Aşağıdaki satırları düzen dosyasının <head> içeriğine yerleştirin:

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

İçeri aktarılan düzen iki Home (Index sayfa) ve Privacy gezinti bağlantısı içerir. Bağlantıların barındırılan HomeBlazor WebAssembly uygulamaya işaret etmelerini sağlamak için köprüleri değiştirin:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <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="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <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>

<footer> Öğenin uygulama adını güncelleştirin. Aşağıdaki örnekte uygulama adı BlazorHostedkullanılır:

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

Yukarıdaki örnekte yer tutucu, {DATE} Sayfalar veya MVC proje şablonundan oluşturulan bir uygulamadaki Razor telif hakkı tarihini temsil eder.

Privacy Bağlantıyı bir gizlilik sayfasına (RazorSayfalar) yönlendirmek için Server projeye bir gizlilik sayfası ekleyin.

Pages/Privacy.cshtml projede Server :

@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 Server bir gizlilik görünümü oluşturun.

View/Home/Privacy.cshtml projede Server :

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

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

MVC uygulamasının Home denetleyicisinde görünümü döndürebilirsiniz.

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

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

Bir bağış uygulamasından dosya içeri aktarıyorsanız, dosyalardaki ad alanlarını projenin ad alanlarıyla eşleşecek şekilde güncelleştirdiğinizden Server emin olun (örneğin, BlazorHosted.Server).

Statik varlıkları, donör projesinin Server klasöründen projeye wwwroot aktarın:

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

Donör projesi bir ASP.NET Core proje şablonundan oluşturulursa ve dosyalar değiştirilmezse, bağış projesindeki klasörün tamamını wwwroot projeye Server kopyalayabilir ve simge dosyasını kaldırabilirsiniz favicon .

Uyarı

Statik varlığı hem ve Serverwwwroot klasörlerine Client yerleştirmekten kaçının. Her iki klasör de aynı dosya varsa, statik varlıklar aynı web kök yolunu paylaştığından bir özel durum oluşturulur. Bu nedenle, her ikisinde de değil, klasörlerden wwwroot birinde statik bir varlık barındırın.

Önceki yapılandırmayı benimsedikten sonra, bileşenleri projenin sayfalarına veya görünümlerine Server ekleyinRazor. Bu makalenin aşağıdaki bölümlerindeki yönergeleri kullanın:

• Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme
• CSS seçicisi 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 da dahil olmak üzere çözümü yapılandırdıktan sonra, Bileşen Etiketi Yardımcısı bir sayfadaki veya görünümdeki bir Blazor WebAssembly uygulamadan bileşen işlemek için iki işleme modunu destekler:

• WebAssembly
• WebAssemblyPrerendered

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

Server projesinde, Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

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

Server Projeyi çalıştırın. konumundaki /razorpagescounter1sayfaya Razor gidin. Önceden alınan Counter bileşen sayfaya eklenir.

RenderMode bileşenin şu şekilde yapılandırılıp yapılandırılmadığını yapılandırıyor:

• Sayfaya önceden girilir.
• Sayfada statik HTML olarak işlenir veya kullanıcı aracısından bir Blazor uygulamayı önyüklemek için gerekli bilgileri içeriyorsa.

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

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

İşleme parçası aracılığıyla alt içerik ayarlama

Bileşen Etiketi Yardımcısı, alt içerik için temsilci RenderFragment almayı desteklemez (örneğin, param-ChildContent="..."). Geçirmek istediğiniz alt içerikle işlemek istediğiniz bileşene başvuran bir Razor bileşen (.razor) oluşturmanızı ve ardından bileşeni sayfadan veya görünümden çağırmanızı Razor öneririz.

En üst düzey önceden oluşturulmuş bileşenlerin yayımlamada kırpıldığından emin olun

Bir Bileşen Etiketi Yardımcısı, yayımlama sırasında kırpmaya tabi olan bir kitaplıktan bir bileşene doğrudan başvuruda bulunuyorsa, istemci tarafı uygulama kodundan bu bileşene başvuru olmadığından yayımlama sırasında kırpılabilir. Sonuç olarak, bileşen önceden kaydedilmez ve çıkışta boş bir nokta bırakılır. Bu durumda, düzelticiye istemci tarafı uygulamasındaki herhangi bir sınıfa öznitelik DynamicDependency ekleyerek kitaplık bileşenini korumasını sağlayın. adlı SomeLibraryComponentToBePreservedbir bileşeni korumak için, aşağıdakini herhangi bir bileşene ekleyin:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

Yukarıdaki yaklaşım genellikle gerekli değildir çünkü çoğu durumda uygulama bileşenlerini (kırpılmayan) önceden hazırlar ve bu da kitaplıklardaki bileşenlere başvurur (bu da bunların kırpılmamasına neden olur). Yalnızca kitaplık kırpmaya tabi olduğunda doğrudan bir kitaplık bileşenini önceden oluşturmak için açıkça kullanın DynamicDependency .

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

Ek yapılandırma dahil olmak üzere çözümü yapılandırdıktan sonra, dosyada Program.cs barındırılan ClientBlazor WebAssembly bir çözümün projesine kök bileşenleri ekleyin. Aşağıdaki örnekte, Counter bileşeni ile eşleşen counter-componentöğesini seçen bir CSS seçicisi id ile kök bileşen olarak bildirilir. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client.

Program.cs Projenin dosyasındaClient, projenin Razor bileşenlerinin ad alanını dosyanın en üstüne ekleyin:

using BlazorHosted.Client.Pages;

builder içinde oluşturulduktan Program.cssonra, bileşeni kök bileşen olarak ekleyinCounter:

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

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

Server projesinde, Pages/RazorPagesCounter2.cshtml:

@page

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

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

Server Projeyi çalıştırın. konumundaki /razorpagescounter2sayfaya Razor gidin. Önceden alınan Counter bileşen sayfaya eklenir.

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

Dekont

Yukarıdaki örnek, JSException bir Blazor WebAssembly uygulamanın css seçicisi kullanımıyla aynı anda bir Pages veya MVC uygulamasına önceden girilip tümleştirilip tümleştirilemediğini Razor gösterir. Projenin bileşenlerinden Client birine gitmek veya eklenmiş bir bileşenle sayfasına veya görünümüne Server gitmek bir veya daha fazla JSExceptionRazor oluşturur.

Bu normal bir davranıştır çünkü bir Blazor WebAssembly uygulamayı yönlendirilebilir Razor bileşenlerle önceden oluşturmak ve tümleştirmek CSS seçicilerinin kullanımıyla uyumsuzdur.

Önceki bölümlerde yer alan örneklerle çalıştıysanız ve örnek uygulamanızda CSS seçicisinin çalıştığını görmek istiyorsanız, proje Program.cs dosyasının kök bileşeninin App belirtimini Client açıklama satırı yapın:

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

CSS seçici kullanan katıştırılmış Razor bileşenle sayfaya veya görünüme gidin (örneğin, /razorpagescounter2 önceki örnekte). 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 çalışır.

Razor bileşenleri Sayfalar ve MVC uygulamalarıyla Razor tümleştirilebilir. Sayfa veya görünüm işlendiğinde, bileşenler aynı anda önceden oluşturulabilir.

Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullanabileceği ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) geliştirebilir.

Projeyi yapılandırdıktan sonra , projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerdeki yönergeleri kullanın:

• Kullanıcı isteklerinden doğrudan yönlendirilebilen bileşenler için. Ziyaretçilerin tarayıcılarında yönergesi olan bir bileşen @page için HTTP isteğinde bulunabilmeleri gerektiğinde bu kılavuzu izleyin.
  • Sayfalar uygulamasında yönlendirilebilir bileşenler Razor kullanma
  • MVC uygulamasında yönlendirilebilir bileşenler kullanma
• Kullanıcı isteklerinden doğrudan yönlendirilemeyen bileşenler için, Sayfa veya görünümden bileşenleri işleme bölümüne bakın. Uygulama Bileşenleri Bileşen Etiketi Yardımcısı ile mevcut sayfalara ve görünümlere eklerken bu kılavuzu izleyin.

Yapılandırma

Bileşenleri mevcut Razor Sayfalar 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.

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

   _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}
   

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

   • öğesine aşağıdaki <base> etiketi ve HeadOutlet 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.server.js

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

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

   Dekont

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

3. Blazor Server Hizmetleri Program.cs kayıtlı olduğu yere kaydedin:

   builder.Services.AddServerSideBlazor();
   

4. Blazor Hub uç noktasını, yolların eşlendiği uç noktalara Program.cs ekleyin. ( Pages) veya MapControllerRoute (RazorMVC) çağrısından MapRazorPages sonra aşağıdaki satırı yerleştirin:

   app.MapBlazorHub();
   

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

   Pages/Shared/Counter.razor (Razor Pages) 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:

   Index Projenin Pages uygulamasının Razor sayfasında, bileşenin Counter ad alanını ekleyin ve bileşeni sayfaya ekleyin. Index Sayfa yüklendiğinde, Counter 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}.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 Counter ad alanını ekleyin ve bileşeni görünüme ekleyin. Index Görünüm yüklendiğinde, Counter 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}.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 bileşenler Razor kullanma

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

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

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

2. Aşağıdaki içeriğe sahip proje köküne bir App 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 aşağıdaki içeriğe sahip bir _Host sayfa ekleyin. Yer tutucuyu {APP NAMESPACE} uygulamanın ad alanıyla değiştirin.

   Pages/_Host.cshtml:

   @page
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   Dekont

   Yukarıdaki örnekte, bileşenin ve Blazor betiğin HeadOutlet (_framework/blazor.server.js) uygulamanın düzeni tarafından işlendiği varsayılır. Daha fazla bilgi için Yapılandırma bölümüne bakın.

   RenderMode bileşenin şu şekilde yapılandırılıp yapılandırılmadığını yapılandırıyor App :

   • Sayfaya önceden girilir.
   • Sayfada statik HTML olarak işlenir veya kullanıcı aracısından bir Blazor uygulamayı önyüklemek için gerekli bilgileri içeriyorsa.

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

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

   app.MapFallbackToPage("/_Host");
   

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

   Pages/RoutableCounter.razor:

   @page "/routable-counter"
   
   <PageTitle>Routable Counter</PageTitle>
   
   <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 konumunda /routable-counteryönlendirilebilir RoutableCounter bileşene 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şenler kullanma

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

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

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

2. Aşağıdaki içeriğe sahip proje köküne bir App 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 aşağıdaki içeriğe sahip bir _Host görünüm ekleyin. Yer tutucuyu {APP NAMESPACE} uygulamanın ad alanıyla değiştirin.

   Views/Home/_Host.cshtml:

   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   Dekont

   Yukarıdaki örnekte, bileşenin ve Blazor betiğin HeadOutlet (_framework/blazor.server.js) uygulamanın düzeni tarafından işlendiği varsayılır. Daha fazla bilgi için Yapılandırma bölümüne bakın.

   RenderMode bileşenin şu şekilde yapılandırılıp yapılandırılmadığını yapılandırıyor App :

   • Sayfaya önceden girilir.
   • Sayfada statik HTML olarak işlenir veya kullanıcı aracısından bir Blazor uygulamayı önyüklemek için gerekli bilgileri içeriyorsa.

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

4. Denetleyiciye Home bir eylem ekleyin.

   Controllers/HomeController.cs:

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

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

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

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

   Pages/RoutableCounter.razor:

   @page "/routable-counter"
   
   <PageTitle>Routable Counter</PageTitle>
   
   <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 konumunda /routable-counteryönlendirilebilir RoutableCounter bileşene gidin.

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

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

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

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şleme

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

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.

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

<h1>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'da Bileşen Etiketi Yardımcısı.

Etkileşimsiz bileşenleri işleme

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

<h1>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'da Bileşen Etiketi Yardımcısı.

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

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.

Önceden girilmiş durumu kalıcı hale

Önceden girilmiş durum kalıcı olmadan, ön kayıt sırasında kullanılan durum kaybolur ve uygulama tamamen yüklendiğinde yeniden oluşturulması gerekir. Herhangi bir durum zaman uyumsuz olarak ayarlanırsa, önceden yenilenen kullanıcı arabirimi geçici yer tutucularla değiştirildiğinden ve sonra yeniden tam olarak işlendiğinden kullanıcı arabirimi titreyebilir.

Önceden oluşturulmuş bileşenlerin durumunu kalıcı hale getirmek için Kalıcı Bileşen Durum Etiketi Yardımcısı'nı (başvuru kaynağı) kullanın. Bileşenleri önceden oluşturan bir uygulamada sayfanın kapanış </body> etiketinin <persist-component-state />_Host içine Etiket Yardımcısı etiketini ekleyin.

Dekont

.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).

Pages/_Host.cshtml Barındırılan BlazorBlazor WebAssembly bir uygulamada veya Blazor ServerServerPrerendered bir uygulamada WebAssembly önceden yüklenmiş (WebAssemblyPrerendered) olan uygulamalarda:

<body>
    ...

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

Hizmeti kullanarak hangi durumun kalıcı hale getirmek istediğinize PersistentComponentState karar verin. PersistentComponentState.RegisterOnPersisting uygulama duraklatmadan önce bileşen durumunu kalıcı hale getirmek için bir geri çağırma kaydeder. Uygulama sürdürülürken durum alınır.

Aşağıdaki örnekte:

• Yer tutucu, {TYPE} kalıcı olacak veri türünü temsil eder (örneğin, WeatherForecast[]).
• Yer {TOKEN} tutucu bir durum tanımlayıcı dizesidir (örneğin, fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

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

Aşağıdaki örnek, proje şablonunu temel alan barındırılan FetchDataBlazor WebAssembly bir uygulamada bileşenin Blazor güncelleştirilmiş bir sürümüdür. Bileşen, WeatherForecastPreserveState ön kayıt sırasında hava durumu tahmin durumunu kalıcı hale getirir ve ardından bileşeni başlatmak için durumu alır. Kalıcı Bileşen Durumu Etiket Yardımcısı, tüm bileşen çağrılarından sonra bileşen durumunu kalıcı hale getirdi.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<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(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

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

        return Task.CompletedTask;
    }

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

Ön kayıt sırasında kullanılan durumla aynı duruma sahip bileşenleri başlatarak, pahalı başlatma adımları yalnızca bir kez yürütülür. İşlenen kullanıcı arabirimi önceden oluşturulmuş kullanıcı arabirimiyle de eşleşir, bu nedenle tarayıcıda titreme olmaz.

Ek Blazor WebAssembly kaynaklar

• Durum yönetimi: Hazırlamayı işleme
• Montaj gecikmeli yükleme ile ön kayıt desteği
• Razor prerendering ile ilgili bileşen yaşam döngüsü konuları
  • Bileşen başlatma (OnInitialized{Async})
  • Bileşen işlendikten sonra (OnAfterRender{Async})
  • Ön kayıt sonrasında durum bilgisi olan yeniden bağlantı: Bölümdeki içerik, durum bilgisiSignalR olan yeniden bağlanmaya odaklansa Blazor Server da, barındırılan Blazor WebAssembly uygulamalarda (WebAssemblyPrerendered) ön kayıt senaryosu, geliştirici kodunun iki kez yürütülmesini önlemeye yönelik benzer koşullar ve yaklaşımlar içerir. Başlatma kodunun ön kayıt sırasında yürütülmesi sırasında durumu korumak için bu makalenin Önceden girilmiş durumu kalıcı hale getirme bölümüne bakın.
  • JavaScript birlikte çalışma ile ön kayıt
• Prerendering ile ilgili kimlik doğrulaması ve yetkilendirme konuları
  • Genel bakış açıları
  • Kimlik doğrulaması ile önceden giriş
• Barındırma ve dağıtma: Blazor WebAssembly
• Hataları işleme: Prerendering
• OnNavigateAsyncön kayıt sırasında iki kez yürütülür: ile zaman uyumsuz gezinti olaylarını işlemeOnNavigateAsync

Önceden oluşturulmuş durum boyutu ve SignalR ileti boyutu sınırı

Önceden girilmiş büyük bir durum boyutu devre iletisi boyutu sınırını aşabilir SignalR ve bu da aşağıdaki sonuçlara neden olur:

• Bağlantı SignalR hattı istemcide bir hatayla başlatılamıyor: Circuit host not initialized.
• bağlantı hattı başarısız olduğunda istemcideki yeniden bağlantı iletişim kutusu görüntülenir. Kurtarma mümkün değildir.

Sorunu çözmek için aşağıdaki yaklaşımlardan birini kullanın:

• Önceden yenilenen duruma yerleştirdiğiniz veri miktarını azaltın.
• SignalR İleti boyutu sınırını artırın. UYARI: Sınırın artırılması Hizmet Reddi (DoS) saldırı riskini artırabilir.

Ek Blazor Server kaynaklar

• Durum yönetimi: Hazırlamayı işleme
• Razor prerendering ile ilgili bileşen yaşam döngüsü konuları
  • Bileşen başlatma (OnInitialized{Async})
  • Bileşen işlendikten sonra (OnAfterRender{Async})
  • Prerendering sonrasında durum bilgisi olan yeniden bağlantı
  • JavaScript birlikte çalışma ile ön kayıt
• Kimlik doğrulaması ve yetkilendirme: Genel yönleri
• Hataları İşleme: Ön Kayıt
• Barındırma ve dağıtma: Blazor Server
• Tehdit azaltma: Siteler arası betik oluşturma (XSS)
• OnNavigateAsyncön kayıt sırasında iki kez yürütülür: ile zaman uyumsuz gezinti olaylarını işlemeOnNavigateAsync