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:
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 WebAssembly Blazor 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ı
BlazorHosted
verilmiş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ırBlazorHosted
dotnet 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.Client
sunucu projesinin ad alanı ise olurBlazorHosted.Server
.- 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ı
wwwroot/index.html
Dosyayı projedenClient Blazor WebAssemblysilin.ProjedeClient, içindeki
Program.cs
aşağıdaki satırları silin:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Projenin
Pages
klasörüne Server dosya ekleyin_Host.cshtml
. Visual Studio kullanarak veya komut kabuğunda komutuyladotnet new blazorserver -o BlazorServer
.NET CLI kullanarak şablondan oluşturulan bir projeden Blazor Server dosyaları alabilirsiniz (-o BlazorServer
bu seçenek proje için bir klasör oluşturur). Dosyaları Server projeninPages
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" />
Not
<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-mode
KökApp
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ı.
Program.cs
Projenin dosyasında Server geri dönüş uç noktasını dosyadanindex.html
sayfaya_Host.cshtml
değiştirin:Silme:
- app.MapFallbackToFile("index.html");
Ekle:
app.MapFallbackToPage("/_Host");
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.
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) veyadotnet 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 Home
Blazor 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ı BlazorHosted
kullanılır:
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {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çerikwwwroot/js
klasör ve içerikwwwroot/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 Server wwwroot
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:
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 /razorpagescounter1
sayfaya 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ı SomeLibraryComponentToBePreserved
bir 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 Client Blazor 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.cs
sonra, 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 /razorpagescounter2
sayfaya 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.
Not
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. - 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.
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}
Projenin düzen dosyasında (
Pages/Shared/_Layout.cshtml
Razor Sayfalar uygulamalarında veyaViews/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'u Blazordağıtma makalesinin Uygulama temel yolu bölümündeki yönergeleri izleyin.BileşenHeadOutlet, sayfa başlıkları (
<head>
PageTitlebileşen) ve bileşenler tarafından Razor ayarlanan diğer baş öğeleri (bileşen) için baş (HeadContent) içeriğini işlemek için kullanılır. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.İşleme bölümünden hemen önce
Scripts
betik için bir<script>
etiket ekleyin (@await RenderSectionAsync(...)
):blazor.server.js
<script src="_framework/blazor.server.js"></script>
Çerçeve, betiği uygulamaya ekler
blazor.server.js
. Uygulamaya el ile betikblazor.server.js
dosyası eklemeniz gerekmez.
Not
Genellikle düzen bir
_ViewStart.cshtml
dosya aracılığıyla yüklenir.Blazor Server Hizmetleri
Program.cs
kayıtlı olduğu yere kaydedin:builder.Services.AddServerSideBlazor();
Blazor Hub uç noktasını, yolların eşlendiği uç noktalara
Program.cs
ekleyin. ( Pages) veyaMapControllerRoute
(RazorMVC) çağrısındanMapRazorPages
sonra aşağıdaki satırı yerleştirin:app.MapBlazorHub();
Bileşenleri herhangi bir sayfa veya görünümle tümleştirin. Örneğin, projenin
Shared
klasörüne birCounter
bileşen ekleyin.Pages/Shared/Counter.razor
(Razor Pages) veyaViews/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şeninCounter
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şeninCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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>
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" />
Not
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ı.
Program.cs
Uç noktalarda, sayfa için_Host
son uç nokta olarak düşük öncelikli bir yol ekleyin:app.MapFallbackToPage("/_Host");
Projeye yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje şablonlarındaki
Counter
Blazor bileşeni temel alan birRoutableCounter
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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>
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" />
Not
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ı.
Denetleyiciye Home bir eylem ekleyin.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
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");
MVC uygulamasında bir
Pages
klasör oluşturun ve yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje şablonlarındakiCounter
Blazor bileşeni temel alan birRoutableCounter
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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.
Not
.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).
Pages/_Host.cshtml
Barındırılan Blazor Blazor WebAssembly bir uygulamada veya Blazor Server ServerPrerendered
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 FetchData
Blazor 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
- Bileşen başlatma (
- Prerendering ile ilgili kimlik doğrulaması ve yetkilendirme konuları
- 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şleme
OnNavigateAsync
Ö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ı kullanıcı arabirimi 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ı
- 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şleme
OnNavigateAsync
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:
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 WebAssembly Blazor 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ı
BlazorHosted
verilmiş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ırBlazorHosted
dotnet new blazorwasm -ho -o BlazorHosted
.
Bu makaledeki örnekler için istemci projesinin ad alanı ve
BlazorHosted.Client
sunucu projesinin ad alanı şeklindedirBlazorHosted.Server
.- 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ı
wwwroot/index.html
Dosyayı projedenClient Blazor WebAssemblysilin.ProjedeClient, içindeki
Program.cs
aşağıdaki satırları silin:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Ve
_Layout.cshtml
dosyalarını Server projeninPages
klasörüne ekleyin_Host.cshtml
. Visual Studio kullanarak veya komut kabuğunda komutuyladotnet new blazorserver -o BlazorServer
.NET CLI kullanarak şablondan oluşturulan bir projeden Blazor Server dosyaları alabilirsiniz (-o BlazorServer
bu seçenek proje için bir klasör oluşturur). Dosyaları Server projeninPages
klasörüne yerleştirdikten sonra dosyalarda aşağıdaki değişiklikleri yapın.Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (
_Layout.cshtml
bileşen) gibi içeriği denetlemek<head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.Dosyada aşağıdaki değişiklikleri
_Layout.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_Layout.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_Layout.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" />
Not
<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>
_Host.cshtml
dosyasında:Ad alanını
Pages
projenin ad alanıyla Client değiştirin. Yer tutucu,{APP NAMESPACE}
donör uygulamasının dosyayı sağlayan sayfalarının_Host.cshtml
ad alanını temsil eder:Silme:
- @namespace {APP NAMESPACE}.Pages
Ekle:
@namespace BlazorHosted.Client
render-mode
KökApp
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ı.
içindeki projenin uç nokta eşlemesinde Server
Program.cs
, dosyadan geri dönüşünüindex.html
sayfaya_Host.cshtml
değiştirin:Silme:
- app.MapFallbackToFile("index.html");
Ekle:
app.MapFallbackToPage("/_Host");
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.
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
Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (_Layout.cshtml
bileşen) gibi içeriği denetlemek <head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.
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) veyadotnet 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 Home
Blazor 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ı BlazorHosted
kullanılır:
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {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çerikwwwroot/js
klasör ve içerikwwwroot/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 Server wwwroot
klasörlerine Client yerleştirmekten kaçının. Her iki klasörde de aynı dosya varsa, her klasördeki statik varlık aynı web kök yolunu paylaştığından bir özel durum oluşturulur. Bu nedenle, her ikisini birden değil, her iki klasörde de wwwroot
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:
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 /razorpagescounter1
sayfaya 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ı SomeLibraryComponentToBePreserved
bir 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 Client Blazor 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.cs
sonra, 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 /razorpagescounter2
sayfaya 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.
Not
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:
- Yönlendirilebilir bileşenler: 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. - Bir sayfadan veya görünümden bileşenleri işleme: Kullanıcı isteklerinden doğrudan yönlendirilemeyen bileşenler için. 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.
Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (_Layout.cshtml
bileşen) gibi içeriği denetlemek <head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.
Projenin düzen dosyasında:
( Pages) veya
Views/Shared/_Layout.cshtml
(MVC) içindekiPages/Shared/_Layout.cshtml
öğesine aşağıdaki<base>
etiketi ve HeadOutlet bileşen Etiketi Yardımcısı'nı<head>
Razor ekleyin:<base href="~/" /> <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Önceki
href
örnekteki değer (uygulama temel yolu), uygulamanın kök URL yolunda (/
) bulunduğunu varsayar. Uygulama bir alt uygulamaysa Konak ve ASP.NET Core'u Blazordağıtma makalesinin Uygulama temel yolu bölümündeki yönergeleri izleyin.BileşenHeadOutlet, sayfa başlıkları (
<head>
PageTitlebileşen) ve bileşenler tarafından Razor ayarlanan diğer baş öğeleri (bileşen) için baş (HeadContent) içeriğini işlemek için kullanılır. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.Uygulamanın düzenindeki
blazor.server.js
işleme bölümündenScripts
(@await RenderSectionAsync(...)
) hemen önce betik için bir<script>
etiket ekleyin.Pages/Shared/_Layout.cshtml
(Razor Pages) veyaViews/Shared/_Layout.cshtml
(MVC):<script src="_framework/blazor.server.js"></script>
Çerçeve, betiği uygulamaya ekler
blazor.server.js
. Uygulamaya el ile betikblazor.server.js
dosyası eklemeniz gerekmez.
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}
Blazor Server Hizmetleri
Program.cs
kayıtlı olduğu yere kaydedin:builder.Services.AddServerSideBlazor();
Blazor Hub uç noktasını, yolların eşlendiği uç noktalara
Program.cs
ekleyin.( Pages) veya
MapControllerRoute
(RazorMVC) çağrısındanMapRazorPages
sonra aşağıdaki satırı yerleştirin:app.MapBlazorHub();
Bileşenleri herhangi bir sayfa veya görünümle tümleştirin. Örneğin, projenin
Shared
klasörüne birCounter
bileşen ekleyin.Pages/Shared/Counter.razor
(Razor Pages) veyaViews/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şeninCounter
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şeninCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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>
Projeye aşağıdaki içeriğe sahip bir
_Host
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 kendi düzenleri için paylaşılan
_Layout.cshtml
dosyayı kullanır.Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (
_Layout.cshtml
bileşen) gibi içeriği denetlemek<head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.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ı.
Program.cs
Uç noktalarda, sayfa için_Host
son uç nokta olarak düşük öncelikli bir yol ekleyin:app.MapFallbackToPage("/_Host");
Projeye yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje şablonlarındaki
Counter
Blazor bileşeni temel alan birRoutableCounter
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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>
Projeye aşağıdaki içeriğe sahip bir
_Host
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 için paylaşılan
_Layout.cshtml
dosyayı kullanır.Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (
_Layout.cshtml
bileşen) gibi içeriği denetlemek<head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.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ı.
Denetleyiciye Home bir eylem ekleyin.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
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");
MVC uygulamasında bir
Pages
klasör oluşturun ve yönlendirilebilir bileşenler ekleyin. Aşağıdaki örnek, proje şablonlarındakiCounter
Blazor bileşeni temel alan birRoutableCounter
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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ı.
Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (_Layout.cshtml
bileşen) gibi içeriği denetlemek <head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.
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ı.
Önemli
Sayfanın başlığı (bileşen) ve diğer baş öğeleri (_Layout.cshtml
bileşen) gibi içeriği denetlemek <head>
için bir HeadOutlet bileşen için Bileşen Etiketi Yardımcısı ile bir düzen sayfası (PageTitleHeadContent) kullanılması gerekir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.
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.
Bu sorunları çözmek için, Blazor Kalıcı Bileşen Durum Etiketi Yardımcısı'nı kullanarak önceden kaydedilen bir sayfada kalıcı durumu destekler. Etiket Yardımcısı'nın etiketini kapanış <persist-component-state />
</body>
etiketinin içine ekleyin.
Pages/_Layout.cshtml
:
<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 örnek, proje şablonunu temel alan barındırılan FetchData
Blazor 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"
@implements IDisposable
@using BlazorSample.Shared
@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(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
- Bileşen başlatma (
- Prerendering ile ilgili kimlik doğrulaması ve yetkilendirme konuları
- Barındırma ve dağıtma: Blazor WebAssembly
Ö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ı kullanıcı arabirimi 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ı
- 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)
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:
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 WebAssembly Blazor 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ı
BlazorHosted
verilmiş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ırBlazorHosted
dotnet new blazorwasm -ho -o BlazorHosted
.
Bu makaledeki örnekler için istemci projesinin ad alanı ve
BlazorHosted.Client
sunucu projesinin ad alanı şeklindedirBlazorHosted.Server
.- 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ı
wwwroot/index.html
Dosyayı projedenClient Blazor WebAssemblysilin.ProjedeClient, içinde
Program.cs
aşağıdaki satırı silin:- builder.RootComponents.Add<App>("#app");
Projenin
Pages
klasörüne Server birPages/_Host.cshtml
dosya ekleyin. Şablondan oluşturulan bir_Host.cshtml
projeden Blazor Server komut kabuğundaki komutuyladotnet new blazorserver -o BlazorServer
bir dosya alabilirsiniz (-o BlazorServer
bu seçenek proje için bir klasör oluşturur). Dosyayı barındırılanPages/_Host.cshtml
Blazor WebAssembly çözümün Server projesine yerleştirdikten sonra dosyada aşağıdaki değişiklikleri yapın:Proje için Client bir
@using
yönerge sağlayın (örneğin,@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ı şöyledir
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>
Bootstrap stil sayfasını (css/bootstrap/bootstrap.min.css
) isteyen öğeyi yerinde bırakın.render-mode
KökApp
bileşeni ile WebAssemblyPrerenderedönceden kullanmak için Bileşen Etiketi Yardımcısı'nı güncelleştirin:- <component type="typeof(App)" render-mode="ServerPrerendered" /> + <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Blazor betik kaynağını istemci tarafı Blazor WebAssembly betiğini kullanacak şekilde güncelleştirin:
- <script src="_framework/blazor.server.js"></script> + <script src="_framework/blazor.webassembly.js"></script>
Startup.Configure
ProjedeServer, dosyadan geri dönüşünüindex.html
sayfaya_Host.cshtml
değiştirin.Startup.cs
:- endpoints.MapFallbackToFile("index.html"); + endpoints.MapFallbackToPage("/_Host");
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.
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ı
İstemci Blazor WebAssembly uygulamasının bileşenlerini sayfalara ve sunucu uygulamasının görünümlerine eklemek Razor için bu makaledeki aşağıdaki bölümler ve örnekler ek yapılandırma gerektirir.
Projede Server varsayılan Razor Bir Sayfalar veya MVC düzen dosyası kullanın. Proje Server aşağıdaki dosya ve klasörlere sahip olmalıdır.
Razor Sayfa:
Pages/Shared/_Layout.cshtml
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC:
Views/Shared/_Layout.cshtml
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Sayfalar veya MVC proje şablonundan oluşturulan bir uygulamadan Razor önceki dosyaları alın. Daha fazla bilgi için bkz . Öğretici: Razor ASP.NET Core'da Sayfaları kullanmaya başlama veya ASP.NET Core MVC'yi kullanmaya başlama.
İç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.
İçeri aktarılan düzen dosyasını (_Layout.cshtml
) projenin stillerini içerecek Client şekilde güncelleştirin. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client
. <title>
öğesi aynı anda güncelleştirilebilir.
Pages/Shared/_Layout.cshtml
(Razor Pages) 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 ve gezinti bağlantılarını içerir Home
Privacy
. Bağlantıyı barındırılan Home
Blazor WebAssembly uygulamaya işaret etmek için 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>
Privacy
Bağlantıyı bir gizlilik sayfasına yönlendirmek için projeye bir gizlilik sayfası Server ekleyin.
Pages/Privacy.cshtml
projede Server :
@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}
<h1>Privacy Policy</h1>
MVC tabanlı bir gizlilik görünümü tercih edilirse, projede Server bir gizlilik görünümü oluşturun.
View/Home/Privacy.cshtml
:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
Denetleyicide Home
görünümü döndürebilirsiniz.
Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Statik varlıkları, donör projesinin Server klasöründen projeye wwwroot
aktarın:
wwwroot/css
klasör ve içerikwwwroot/js
klasör ve içerikwwwroot/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 Server wwwroot
klasörlerine Client yerleştirmekten kaçının. Her iki klasörde de aynı dosya varsa, her klasördeki statik varlık aynı web kök yolunu paylaştığından bir özel durum oluşturulur. Bu nedenle, her ikisini birden değil, her iki klasörde de wwwroot
statik bir varlık barındırın.
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:
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 /razorpagescounter1
sayfaya 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.
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, içinde Program.cs
barındırılan Blazor WebAssembly bir çözümün Client 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
.
Projenin içinde Program.cs
Client , projenin Razor bileşenlerinin ad alanını dosyanın en üstüne ekleyin:
using BlazorHosted.Client.Pages;
builder
içinde oluşturulduktan Program.cs
sonra, 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 /razorpagescounter2
sayfaya 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.
Not
Yukarıdaki örnek, JSException bir Blazor WebAssembly uygulamanın css seçicisi ile aynı anda bir Pages veya MVC uygulamasına önceden yüklenmiş ve tümleştirilmiş Razor olup olmadığını oluşturur. Projenin Razor bileşenlerinden Client birine gitmek aşağıdaki özel durumu oluşturur:
Microsoft.JSBirlikte çalışma.JSÖzel durum: '#counter-component' eşleşen öğe seçici bulunamadı.
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.
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:
- Yönlendirilebilir bileşenler: 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. - Bir sayfadan veya görünümden bileşenleri işleme: Kullanıcı isteklerinden doğrudan yönlendirilemeyen bileşenler için. 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
Mevcut Razor Sayfalar veya MVC uygulaması, bileşenleri sayfalarla ve görünümlerle tümleştirebilir Razor :
Projenin düzen dosyasında:
(Razor Pages) veya
Views/Shared/_Layout.cshtml
(MVC) içindekiPages/Shared/_Layout.cshtml
öğesine aşağıdaki<base>
etiketi<head>
ekleyin:<base href="~/" />
Önceki
href
örnekteki değer (uygulama temel yolu), uygulamanın kök URL yolunda (/
) bulunduğunu varsayar. Uygulama bir alt uygulamaysa Konak ve ASP.NET Core'u Blazordağıtma makalesinin Uygulama temel yolu bölümündeki yönergeleri izleyin.İşleme bölümünden
blazor.server.js
hemen önceScripts
betik için bir<script>
etiket ekleyin.Pages/Shared/_Layout.cshtml
(Razor Pages) veyaViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Çerçeve, betiği uygulamaya ekler
blazor.server.js
. Uygulamaya el ile betikblazor.server.js
dosyası eklemeniz gerekmez.
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.JSInterop @using {APP NAMESPACE}
hizmeti'ne Blazor Server
Startup.ConfigureServices
kaydedin.Startup.cs
içinde:services.AddServerSideBlazor();
Blazor Hub uç noktasını uç noktalarına (
app.UseEndpoints
)Startup.Configure
ekleyin.Startup.cs
:endpoints.MapBlazorHub();
Bileşenleri herhangi bir sayfa veya görünümle tümleştirin. Örneğin, projenin
Shared
klasörüne birCounter
bileşen ekleyin.Pages/Shared/Counter.razor
(Razor Pages) veyaViews/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şeninCounter
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"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Yukarıdaki örnekte yer tutucuyu
{APP NAMESPACE}
uygulamanın ad alanıyla değiştirin.MVC:
Projenin
Index
MVC uygulaması görünümünde bileşeninCounter
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"; } <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 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:
Yapılandırma bölümündeki yönergeleri izleyin.
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(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ünün yayınlanmasıyla ve diğer 5. x sürümleri için
Router
bileşeni,@true
olarak ayarlananPreferExactMatches
parametresini içerir. Daha fazla bilgi için, bkz. ASP.NET Core 3.1'den 5.0'a geçiş.Projeye aşağıdaki içeriğe sahip bir
_Host
sayfa ekleyin.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Bileşenler, düzenleri için paylaşılan
_Layout.cshtml
dosyayı kullanır.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ı.
uç noktalarına
Startup.Configure
Startup.cs
, sayfa için_Host
son uç nokta olarak düşük öncelikli bir yol ekleyin:endpoints.MapFallbackToPage("/_Host");
Aşağıdaki örnekte, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satır gösterilmektedir:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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(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ünün yayınlanmasıyla ve diğer 5. x sürümleri için
Router
bileşeni,@true
olarak ayarlananPreferExactMatches
parametresini içerir. Daha fazla bilgi için, bkz. ASP.NET Core 3.1'den 5.0'a geçiş.Projeye aşağıdaki içeriğe sahip bir
_Host
görünüm ekleyin.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Bileşenler, düzenleri için paylaşılan
_Layout.cshtml
dosyayı kullanır.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ı.
Denetleyiciye Home bir eylem ekleyin.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
uç noktalarına
Startup.Configure
Startup.cs
, görünümü döndüren_Host
denetleyici eylemi için düşük öncelikli bir yol ekleyin:endpoints.MapFallbackToController("Blazor", "Home");
Aşağıdaki örnekte, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satır gösterilmektedir:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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>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'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>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'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.
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
- Bileşen başlatma (
- Prerendering ile ilgili kimlik doğrulaması ve yetkilendirme konuları
- Barındırma ve dağıtma: Blazor WebAssembly
Ö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ı kullanıcı arabirimi 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ı
- 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)
Barındırılan Razor bir Blazor WebAssemblyçözümde bileşenleri Sayfalar ve MVC uygulamalarıyla Razor tümleştirme, .NET 5 veya sonraki sürümlerde ASP.NET Core'da desteklenir. Bu makalenin .NET 5 veya sonraki bir sürümünü seçin.
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:
- Yönlendirilebilir bileşenler: 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. - Bir sayfadan veya görünümden bileşenleri işleme: Kullanıcı isteklerinden doğrudan yönlendirilemeyen bileşenler için. 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
Mevcut Razor Sayfalar veya MVC uygulaması, bileşenleri sayfalarla ve görünümlerle tümleştirebilir Razor :
Projenin düzen dosyasında:
(Razor Pages) veya
Views/Shared/_Layout.cshtml
(MVC) içindekiPages/Shared/_Layout.cshtml
öğesine aşağıdaki<base>
etiketi<head>
ekleyin:+ <base href="~/" />
Önceki
href
örnekteki değer (uygulama temel yolu), uygulamanın kök URL yolunda (/
) bulunduğunu varsayar. Uygulama bir alt uygulamaysa Konak ve ASP.NET Core'u Blazordağıtma makalesinin Uygulama temel yolu bölümündeki yönergeleri izleyin.İşleme bölümünden
blazor.server.js
hemen önceScripts
betik için bir<script>
etiket ekleyin.Pages/Shared/_Layout.cshtml
(Razor Pages) veyaViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Çerçeve, betiği uygulamaya ekler
blazor.server.js
. Uygulamaya el ile betikblazor.server.js
dosyası eklemeniz gerekmez.
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.JSInterop @using {APP NAMESPACE}
hizmeti'ne Blazor Server
Startup.ConfigureServices
kaydedin.Startup.cs
:services.AddServerSideBlazor();
Blazor Hub uç noktasını uç noktalarına (
app.UseEndpoints
)Startup.Configure
ekleyin.Startup.cs
:endpoints.MapBlazorHub();
Bileşenleri herhangi bir sayfa veya görünümle tümleştirin. Örneğin, projenin
Shared
klasörüne birCounter
bileşen ekleyin.Pages/Shared/Counter.razor
(Razor Pages) veyaViews/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şeninCounter
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"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Yukarıdaki örnekte yer tutucuyu
{APP NAMESPACE}
uygulamanın ad alanıyla değiştirin.MVC:
Projenin
Index
MVC uygulaması görünümünde bileşeninCounter
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"; } <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 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:
Yapılandırma bölümündeki yönergeleri izleyin.
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(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>
Projeye aşağıdaki içeriğe sahip bir
_Host
sayfa ekleyin.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Bileşenler, düzenleri için paylaşılan
_Layout.cshtml
dosyayı kullanır.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ı.
uç noktalarına
Startup.Configure
Startup.cs
, sayfa için_Host
son uç nokta olarak düşük öncelikli bir yol ekleyin:endpoints.MapFallbackToPage("/_Host");
Aşağıdaki örnekte, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satır gösterilmektedir:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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:
Yapılandırma bölümündeki yönergeleri izleyin.
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(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>
Projeye aşağıdaki içeriğe sahip bir
_Host
görünüm ekleyin.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Bileşenler, düzenleri için paylaşılan
_Layout.cshtml
dosyayı kullanır.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ı.
Denetleyiciye Home bir eylem ekleyin.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
uç noktalarına
Startup.Configure
Startup.cs
, görünümü döndüren_Host
denetleyici eylemi için düşük öncelikli bir yol ekleyin:endpoints.MapFallbackToController("Blazor", "Home");
Aşağıdaki örnekte, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satır gösterilmektedir:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
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++; } }
Projeyi çalıştırın ve konumunda
/routable-counter
yönlendirilebilirRoutableCounter
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>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'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>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'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 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ı kullanıcı arabirimi 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ı
- 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)
ASP.NET Core