Sınıf kitaplığından Razor (RCL) ASP.NET Core Razor bileşenlerini kullanma

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bileşenler, projeler arasında bir Razor sınıf kitaplığında (RCL) paylaşılabilir. Bir uygulamadaki bileşenleri ve statik varlıkları şu kaynaklardan dahil edin:

  • Çözümdeki başka bir proje.
  • Başvuruda olunan bir .NET kitaplığı.
  • NuGet paketi.

Bileşenler normal .NET türleri olduğu gibi RCL tarafından sağlanan bileşenler de normal .NET derlemeleridir.

RCL oluşturma

  1. Yeni bir proje oluşturma.
  2. Yeni proje oluştur iletişim kutusunda, ASP.NET Core proje şablonları listesinden Sınıf Kitaplığı'nı seçinRazor. İleri'yi seçin.
  3. Yeni projenizi yapılandırın iletişim kutusunda, Proje adı alanına bir proje adı girin veya varsayılan proje adını kabul edin. Bu konudaki örneklerde proje adı ComponentLibrarykullanılır. Oluştur'u belirleyin.
  4. Yeni Razor sınıf kitaplığı oluştur iletişim kutusunda Oluştur'u seçin.
  5. RCL'yi bir çözüme ekleyin:
    1. Çözümü açma.
    2. Çözüm Gezgini'da çözüme sağ tıklayın. Var Olan Projeyi Ekle'yi>seçin.
    3. RCL'nin proje dosyasına gidin.
    4. RCL'nin proje dosyasını (.csproj) seçin.
  6. Uygulamadan RCL'ye başvuru ekleyin:
    1. Uygulama projesine sağ tıklayın. Proje Başvurusu Ekle'yi>seçin.
    2. RCL projesini seçin. Tamam'ı seçin.

Şablondan RCL oluşturulurken sayfaları ve görünümleri desteklemek için Destek sayfaları ve görünümleri onay kutusu seçiliyse:

  • Bileşen yazmayı etkinleştirmek Razor için oluşturulan RCL projesinin köküne aşağıdaki içeriklere sahip bir _Imports.razor dosya ekleyin:

    @using Microsoft.AspNetCore.Components.Web
    
  • Proje dosyasına aşağıdaki SupportedPlatform öğeyi ekleyin (.csproj):

    <ItemGroup>
      <SupportedPlatform Include="browser" />
    </ItemGroup>
    

    Öğe hakkında SupportedPlatform daha fazla bilgi için istemci tarafı tarayıcı uyumluluk çözümleyicisi bölümüne bakın.

Şablondan RCL oluşturulurken sayfaları ve görünümleri desteklemek için Destek sayfaları ve görünümleri onay kutusu seçiliyse, bileşen yazmayı etkinleştirmek Razor için oluşturulan RCL projesinin köküne aşağıdaki içeriği içeren bir _Imports.razor dosya ekleyin:

@using Microsoft.AspNetCore.Components.Web

Razor RCL'den bileşen kullanma

RCL bileşenlerini başka bir projede kullanmak için aşağıdaki yaklaşımlardan birini kullanın:

  • RCL'nin ad alanını içeren tam bileşen türü adını kullanın.
  • 's @using yönergesi RCL'nin ad alanını bildirirseRazor, tek tek bileşenler RCL'nin ad alanı olmadan ada göre eklenebilir. Aşağıdaki yaklaşımları kullanın:
    • Yönergesini @using tek tek bileşenlere ekleyin.
    • kitaplığın @using bileşenlerini projenin tamamında kullanılabilir hale getirmek için üst düzey _Imports.razor dosyaya yönergesini ekleyin. Ad alanını bir klasör içindeki tek bir _Imports.razor bileşene veya bileşen kümesine uygulamak için herhangi bir düzeydeki bir dosyaya yönergesini ekleyin. Bir _Imports.razor dosya kullanıldığında, tek tek bileşenler RCL'nin ad alanı için bir @using yönerge gerektirmez.

Aşağıdaki örneklerde, ComponentLibrary bileşeni içeren bir RCL'dir Component1 . Bileşen Component1 , sayfaları ve görünümleri desteklemek için oluşturulmamış RCL proje şablonundan oluşturulan bir RCL'ye otomatik olarak eklenen örnek bir bileşendir.

Not

RCL sayfaları ve görünümleri desteklemek için oluşturulduysa, bu makaledeki Component1 örnekleri izlemeyi planlıyorsanız bileşeni ve statik varlıklarını RCL'ye el ile ekleyin. Bileşen ve statik varlıklar bu bölümde gösterilmiştir.

Component1.razor RCL'de ComponentLibrary :

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

RCL kullanan uygulamada, aşağıdaki örnekte gösterildiği gibi ad alanını kullanarak bileşene başvurun Component1 .

ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Alternatif olarak, bir @using yönerge ekleyin ve bileşeni ad alanı olmadan kullanın. Aşağıdaki @using yönerge, geçerli klasörün içindeki veya üzerindeki herhangi bir _Imports.razor dosyada da görünebilir.

ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

CSS yalıtımı kullanan kitaplık bileşenleri için, bileşen stilleri otomatik olarak kullanan uygulamanın kullanımına sunulur. Kitaplığı kullanan uygulamada kitaplığın tek bileşen stil sayfalarını veya paketlenmiş CSS dosyasını el ile bağlamanız veya içeri aktarmanız gerekmez. Uygulama, RCL'nin paketlenmiş stillerine başvurmak için CSS içeri aktarmalarını kullanır. Paketlenmiş stiller, kitaplığı kullanan uygulamanın statik web varlığı olarak yayımlanmaz. adlı ClassLib bir sınıf kitaplığı ve stil sayfası olan bir BlazorBlazorSample.styles.css uygulama için, RCL'nin stil sayfası derleme zamanında uygulamanın stil sayfasının en üstünde otomatik olarak içeri aktarılır:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

Yukarıdaki örneklerde, Component1'nin stil sayfası (Component1.razor.css) otomatik olarak paketlenmiştir.

Component1.razor.css RCL'de ComponentLibrary :

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Arka plan görüntüsü RCL proje şablonundan da eklenir ve RCL klasöründe bulunur wwwroot .

wwwroot/background.png RCL'de ComponentLibrary :

RCL proje şablonundan çapraz şeritli arka plan görüntüsü

Kitaplığın wwwroot klasöründeki stil sayfalarından ek kitaplık bileşeni stilleri sağlamak için, sonraki örnekte gösterildiği gibi RCL'nin tüketicisine stil sayfası <link> etiketleri ekleyin.

Önemli

Kitaplık bileşenleri genellikle bileşen stillerini paketlemek ve sağlamak için CSS yalıtımı kullanır. CSS yalıtımını kullanan bileşen stilleri, RCL kullanan uygulamanın kullanımına otomatik olarak sunulur. Kitaplığı kullanan uygulamada kitaplığın tek bileşen stil sayfalarını veya paketlenmiş CSS dosyasını el ile bağlamanız veya içeri aktarmanız gerekmez. Aşağıdaki örnek, CSS yalıtımı dışında genel stil sayfaları sağlamaya yöneliktir. Bu, genellikle RCL kullanan tipik uygulamalar için bir gereksinim değildir.

Sonraki örnekte aşağıdaki arka plan görüntüsü kullanılmıştır. Bu bölümde gösterilen örneği uygularsanız, yerel olarak kaydetmek için resme sağ tıklayın.

wwwroot/extra-background.png RCL'de ComponentLibrary :

Geliştirici tarafından kitaplığa çapraz şeritli arka plan görüntüsü eklendi

RCL'ye bir sınıfla yeni bir extra-style stil sayfası ekleyin.

wwwroot/additionalStyles.css RCL'de ComponentLibrary :

.extra-style {
    border: 2px dashed blue;
    padding: 1em;
    margin: 1em 0;
    background-image: url('extra-background.png');
}

RCL'ye sınıfını extra-style kullanan bir bileşen ekleyin.

ExtraStyles.razor RCL'de ComponentLibrary :

<div class="extra-style">
    <p>
        This component is defined in the <strong>ComponentLibrary</strong> package.
    </p>
</div>

Uygulamaya RCL'den bileşeni kullanan ExtraStyles bir sayfa ekleyin.

ConsumeComponent3.razor:

@page "/consume-component-3"
@using ComponentLibrary

<h1>Consume component (<code>additionalStyles.css</code> example)</h1>

<ExtraStyles />

Uygulamanın <head> işaretlemesindeki kitaplığın stil sayfasına bağlantı (içerik konumu<head>).

<link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

CSS yalıtımı kullanan kitaplık bileşenleri için, bileşen stilleri otomatik olarak kullanan uygulamanın kullanımına sunulur. Kitaplığı kullanan uygulamada kitaplığın tek bileşen stil sayfalarını veya paketlenmiş CSS dosyasını el ile bağlamanız veya içeri aktarmanız gerekmez. Uygulama, RCL'nin paketlenmiş stillerine başvurmak için CSS içeri aktarmalarını kullanır. Paketlenmiş stiller, kitaplığı kullanan uygulamanın statik web varlığı olarak yayımlanmaz. adlı ClassLib bir sınıf kitaplığı ve stil sayfası olan bir BlazorBlazorSample.styles.css uygulama için, RCL'nin stil sayfası derleme zamanında uygulamanın stil sayfasının en üstünde otomatik olarak içeri aktarılır:

@import '_content/ClassLib/ClassLib.bundle.scp.css';

Yukarıdaki örneklerde, Component1'nin stil sayfası (Component1.razor.css) otomatik olarak paketlenmiştir.

Component1.razor.css RCL'de ComponentLibrary :

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Arka plan görüntüsü RCL proje şablonundan da eklenir ve RCL klasöründe bulunur wwwroot .

wwwroot/background.png RCL'de ComponentLibrary :

RCL proje şablonundan çapraz şeritli arka plan görüntüsü

Aşağıdaki arka plan resmi ve stil sayfası, RCL'nin Component1 örnek bileşeni tarafından kullanılır. Bu statik varlıkları, proje şablonu tarafından otomatik olarak eklendiğinden, RCL proje şablonundan oluşturulan yeni bir RCL'ye eklemeniz gerekmez.

wwwroot/background.png RCL'de ComponentLibrary :

RCL proje şablonu tarafından kitaplığa eklenen çapraz şeritli arka plan görüntüsü

wwwroot/styles.css RCL'de ComponentLibrary :

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

'nin CSS sınıfını sağlamak Component1için, uygulamanın <head> işaretlemesindeki kitaplığın stil sayfasına (içerik konumu) bağlanın<head>:my-component

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

Yönlendirilebilir bileşenleri RCL'den kullanılabilir hale getirme

RCL'deki yönlendirilebilir bileşenleri doğrudan istekler için kullanılabilir hale getirmek için RCL'nin derlemesinin uygulamanın yönlendiricisine açıklanması gerekir.

Uygulamanın App bileşenini (App.razor ) açın. RCL'nin derlemesini AdditionalAssemblies eklemek için bileşenin Router parametresine bir Assembly koleksiyon atayın. Aşağıdaki örnekte, ComponentLibrary.Component1 bileşen RCL'nin derlemesini bulmak için kullanılır.

AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }"

Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

Klasörde statik varlıklarla wwwroot RCL oluşturma

RCL'nin statik varlıkları, kitaplığı kullanan tüm uygulamalar tarafından kullanılabilir.

Statik varlıkları wwwroot RCL klasörüne yerleştirin ve uygulamada aşağıdaki yola sahip statik varlıklara başvurun: _content/{PACKAGE ID}/{PATH AND FILE NAME}. {PACKAGE ID} yer tutucusu, kitaplığın paket kimliğidir. Proje dosyasında <PackageId> belirtilmediyse varsayılan olarak projenin derleme adı paket kimliği olur. Yer {PATH AND FILE NAME} tutucu, altında wwwrootyol ve dosya adıdır. Bu yol biçimi, RCL'ye eklenen NuGet paketleri tarafından sağlanan statik varlıklar için uygulamada da kullanılır.

Aşağıdaki örnek, RCL statik varlıklarının RCL adlı ComponentLibrary bir RCL ve RCL kullanan bir Blazor uygulama ile kullanımını gösterir. Uygulamanın RCL için ComponentLibrary bir proje başvurusu vardır.

Bu bölümün örneğinde aşağıdaki Jeep® görüntüsü kullanılmıştır. Bu bölümde gösterilen örneği uygularsanız, yerel olarak kaydetmek için resme sağ tıklayın.

wwwroot/jeep-yj.png RCL'de ComponentLibrary :

Jeep YJ®

Aşağıdaki JeepYJ bileşeni RCL'ye ekleyin.

JeepYJ.razor RCL'de ComponentLibrary :

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

RCL kullanan ComponentLibrary uygulamaya aşağıdaki Jeep bileşeni ekleyin. Bileşen Jeep aşağıdakileri kullanır:

  • RCL'nin wwwroot klasöründeki ComponentLibrary Jeep YJ® görüntüsü.
  • JeepYJ RCL'den gelen bileşen.

Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

İşlenen Jeep bileşen:

Jeep bileşeni

Daha fazla bilgi için bkz. ASP.NET Core ile sınıf kitaplıklarında yeniden kullanılabilir Razor kullanıcı arabirimi.

Bileşenlerle birlikte bulunan JavaScript dosyalarıyla RCL oluşturma

Bileşenler için Razor JavaScript (JS) dosyalarının birlikte yerleştirilmesi, bir uygulamadaki betikleri düzenlemenin kullanışlı bir yoludur.

Razoruygulamaların bileşenleri Blazor uzantıyı .razor.js kullanarak dosyaları birlikte dağıtır JS ve projedeki dosyanın yolu kullanılarak genel olarak ele alınabilir:

{PATH}/{COMPONENT}.razor.js

  • Yer {PATH} tutucu, bileşenin yoludur.
  • Yer {COMPONENT} tutucu bileşendir.

Uygulama yayımlandığında çerçeve betiği otomatik olarak web köküne taşır. Betikler, yer tutucuların bulunduğu konumuna taşınır bin/Release/{TARGET FRAMEWORK MONIKER}/publish/wwwroot/{PATH}/{COMPONENT}.razor.js:

Betiğin göreli URL'sinde değişiklik yapılması gerekmez, çünkü Blazor dosyayı sizin için yayımlanmış statik varlıklara yerleştirme JS işlemini üstlenir.

Bu bölüm ve aşağıdaki örnekler öncelikli olarak dosya birlikte bulundurmayı açıklamaya JS odaklanmıştır. İlk örnekte, sıradan JS bir işlevle birlikte bulunan JS bir dosya gösterilmektedir. İkinci örnekte, çoğu üretim uygulaması için önerilen yaklaşım olan bir işlevi yüklemek için modül kullanımı gösterilmektedir. .NET'ten çağırma JS işlemi, api'nin ek örneklerle birlikte daha fazla açıklamasının BlazorJS bulunduğu ASP.NET Core'daki Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma bölümünde tam olarak ele alınmıştır. İkinci örnekte yer alan bileşen elden çıkarma, ASP.NET Core Razor bileşen yaşam döngüsü kapsamındadır.

Aşağıdaki JsCollocation1 bileşen, bir HeadContent bileşen aracılığıyla bir betik yükler ve ile IJSRuntime.InvokeAsyncbir JS işlev çağırır. Yer {PATH} tutucu, bileşenin yoludur.

Önemli

Test uygulamasında bir gösterim için aşağıdaki kodu kullanırsanız, yer tutucuyu {PATH} bileşenin yolu olarak değiştirin (örnek: Components/Pages .NET 8 veya sonraki sürümlerde ya da Pages .NET 7 veya önceki sürümlerinde). Blazor Bir Web Uygulamasında (.NET 8 veya üzeri), bileşen, uygulamaya veya bileşen tanımına genel olarak uygulanmış etkileşimli bir işleme modu gerektirir.

Betiğin arkasına Blazor aşağıdaki betiği ekleyin (başlangıç betiğininBlazor konumu):

<script src="{PATH}/JsCollocation1.razor.js"></script>

JsCollocation1 bileşen ({PATH}/JsCollocation1.razor):

@page "/js-collocation-1"
@inject IJSRuntime JS

<PageTitle>JS Collocation 1</PageTitle>

<h1>JS Collocation Example 1</h1>

<button @onclick="ShowPrompt">Call showPrompt1</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private string? result;

    public async void ShowPrompt()
    {
        result = await JS.InvokeAsync<string>(
            "showPrompt1", "What's your name?");
        StateHasChanged();
    }
}

Birlikte bulunan JS dosya, dosya adıyla JsCollocation1.razor.jsbileşen dosyasının yanına JsCollocation1 yerleştirilir. Bileşende JsCollocation1 betik, birlikte bulunan dosyanın yolunda başvurulur. Aşağıdaki örnekte işlev, showPrompt1 kullanıcı adını ' Window prompt() den kabul eder ve görüntülemek üzere bileşenine JsCollocation1 döndürür.

{PATH}/JsCollocation1.razor.js:

function showPrompt1(message) {
  return prompt(message, 'Type your name here');
}

Önceki yaklaşım, müşteriyi genel işlevlerle kirlettiğinden üretim uygulamalarında genel kullanım için önerilmez. Üretim uygulamaları için daha iyi bir yaklaşım, modülleri kullanmaktır JS . Bir sonraki örnekte gösterildiği gibi, birlikte bulunan JS bir JS dosyadan modül yüklemek için de aynı genel ilkeler geçerlidir.

Aşağıdaki JsCollocation2 bileşenin OnAfterRenderAsync yöntemi, bileşen sınıfından biri olan içine bir JSIJSObjectReference modül moduleyükler. module işlevi çağırmak showPrompt2 için kullanılır. Yer {PATH} tutucu, bileşenin yoludur.

Önemli

Test uygulamasında bir gösterim için aşağıdaki kodu kullanırsanız, yer tutucuyu {PATH} bileşenin yolu olarak değiştirin. Blazor Bir Web Uygulamasında (.NET 8 veya üzeri), bileşen, uygulamaya veya bileşen tanımına genel olarak uygulanmış etkileşimli bir işleme modu gerektirir.

JsCollocation2 bileşen ({PATH}/JsCollocation2.razor):

@page "/js-collocation-2"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>JS Collocation 2</PageTitle>

<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            /*
                Change the {PATH} placeholder in the next line to the path of
                the collocated JS file in the app. Examples:

                ./Components/Pages/JsCollocation2.razor.js (.NET 8 or later)
                ./Pages/JsCollocation2.razor.js (.NET 7 or earlier)
            */
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./{PATH}/JsCollocation2.razor.js");
        }
    }

    public async void ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>(
                "showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

{PATH}/JsCollocation2.razor.js:

export function showPrompt2(message) {
  return prompt(message, 'Type your name here');
}

Sınıf kitaplığı (RCL) tarafından Razor sağlanan betikler veya modüller için aşağıdaki yol kullanılır:

_content/{PACKAGE ID}/{PATH}/{COMPONENT}.{EXTENSION}.js

  • {PACKAGE ID} yer tutucusu RCL'nin paket tanımlayıcısıdır (veya uygulama tarafından başvurulan bir sınıf kitaplığı için kitaplık adıdır).
  • Yer {PATH} tutucu, bileşenin yoludur. RCL'nin köküne bir Razor bileşeni yerleştirilirse, yol segmenti eklenmez.
  • Yer {COMPONENT} tutucu bileşen adıdır.
  • Yer {EXTENSION} tutucu, razor veya cshtmlbileşenin uzantısıyla eşleşir.

Aşağıdaki Blazor uygulaması örneğinde:

  • RCL'nin paket tanımlayıcısı AppJS şeklindedir.
  • JsCollocation3 bileşeni (JsCollocation3.razor) için modülün betikleri yüklenir.
  • JsCollocation3 bileşeni, RCL'nin Components/Pages klasöründedir.
module = await JS.InvokeAsync<IJSObjectReference>("import", 
    "./_content/AppJS/Components/Pages/JsCollocation3.razor.js");

Birden çok barındırılan Blazor uygulama için bileşenleri ve statik varlıkları sağlama

Daha fazla bilgi için bkz . Birden çok barındırılan ASP.NET Core Blazor WebAssembly uygulaması.

İstemci tarafı tarayıcı uyumluluk çözümleyicisi

İstemci tarafı uygulamalar tam .NET API yüzey alanını hedefler, ancak tarayıcı korumalı alanı kısıtlamaları nedeniyle tüm .NET API'leri WebAssembly'de desteklenmez. Desteklenmeyen API'ler WebAssembly'de çalıştırılırken oluşur PlatformNotSupportedException . Bir platform uyumluluk çözümleyicisi, uygulama uygulamanın hedef platformları tarafından desteklenmeyen API'leri kullandığında geliştiriciyi uyarır. İstemci tarafı uygulamalar için bu, API'lerin tarayıcılarda desteklendiğini denetleme anlamına gelir. Uyumluluk çözümleyicisi için .NET framework API'lerine ek açıklama eklemek devam eden bir işlemdir, bu nedenle şu anda tüm .NET framework API'sine açıklama eklenmemiştir.

BlazorEtkileşimli WebAssembly bileşenlerini, Blazor WebAssembly uygulamalarını ve RCL projelerini etkinleştiren Web Apps, MSBuild öğesiyle SupportedPlatform desteklenen bir platform olarak ekleyerek browser tarayıcı uyumluluk denetimlerini otomatik olarak etkinleştirir. Kitaplık geliştiricileri, özelliği etkinleştirmek için öğeyi kitaplığın proje dosyasına el ile ekleyebilir SupportedPlatform :

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Kitaplık yazarken, için belirterek browserUnsupportedOSPlatformAttributetarayıcılarda belirli bir API'nin desteklenmediğini belirtin:

using System.Runtime.Versioning;

...

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Daha fazla bilgi için bkz . Belirli platformlarda (dotnet/designs GitHub deposu) DESTEKLENMEYEN API'lere açıklama ekleme.

JavaScript modüllerinde JavaScript yalıtımı

Blazor standart JavaScript modüllerinde JavaScript yalıtımını etkinleştirir. JavaScript yalıtımı aşağıdaki avantajları sağlar:

  • İçeri aktarılan JavaScript artık genel ad alanını kirletmez.
  • Kitaplığın ve bileşenlerin tüketicilerinin ilgili JavaScript'i el ile içeri aktarması gerekmez.

Daha fazla bilgi için bkz. ASP.NET Core Blazor'da .NET yöntemlerinden JavaScript işlevlerini çağırma.

JavaScript tarafından çağrılabilen .NET yöntemlerini kırpmaktan kaçının

Çalışma zamanı yeniden bağlama , açıkça korunmadıkları sürece sınıf örneği JavaScript tarafından çağrılabilen .NET yöntemlerini kırpır. Daha fazla bilgi için bkz . ASP.NET Core'da BlazorJavaScript işlevlerinden .NET yöntemlerini çağırma.

NuGet oluşturma, paketleme ve NuGet'e gönderme

Bileşenler içeren Razor sınıf kitaplıkları standart .NET kitaplıkları olduğundanRazor, bunları NuGet'e paketlemek ve nuGet'e göndermekten farklı değildir. Paketleme, komut kabuğundaki dotnet pack komutu kullanılarak gerçekleştirilir:

dotnet pack

Komut kabuğundaki komutunu kullanarak dotnet nuget push paketi NuGet'e yükleyin.

Ticari Markalar

Jeep ve Jeep YJ , FCA US LLC'nin (Stellantis NV) tescilli ticari markalarıdır.

Ek kaynaklar