Razorsınıf kitaplıklarından ASP.NET Core bileşenleri Razor kullanma

  • Makale
  • Okumak için 10 dakika

Bileşenler, projeler genelinde bir Razor sınıf kitaplığı 'NDA (RCL) paylaşılabilir. Uygulamasındaki bir uygulamaya bileşenleri ve statik varlıkları dahil et:

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

Bileşenler normal .NET türleri olduğu gibi, bir RCL tarafından sunulan bileşenler normal .NET derlemelerdir.

RCL oluşturma

  1. Yeni bir proje oluşturma.
  2. yeni proje oluştur iletişim kutusunda, ASP.NET Core proje şablonları listesinden Razor sınıf kitaplığı ' nı seçin. İleri’yi seçin.
  3. yeni projenizi yapılandırın iletişim kutusunda Project adı alanında bir proje adı girin veya varsayılan proje adını kabul edin. Bu konudaki örnekler proje adını kullanır ComponentLibrary . Oluştur’u seçin.
  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çın.
    2. Çözüm Gezgini çözüme sağ tıklayın. > mevcut Project ekle ' yi seçin.
    3. RCL 'nin proje dosyasına gidin.
    4. RCL 'nin proje dosyasını () seçin .csproj .
  6. Uygulamadan RCL 'ye bir başvuru ekleyin:
    1. Uygulama projesine sağ tıklayın. > Project başvuru ekle ' yi seçin.
    2. RCL projesini seçin. Tamam’ı seçin.

Şablondan RCL oluştururken sayfaları ve görünümleri desteklemek için destek sayfaları ve görünümler onay kutusu işaretliyse:

  • _Imports.razorBileşen yazma özelliğini etkinleştirmek için, oluşturulan RCL projesinin köküne bir dosya ekleyin ve aşağıdaki içeriği yapın Razor :

    @using Microsoft.AspNetCore.Components.Web

  • SupportedPlatformProje dosyasına () aşağıdaki öğeyi ekleyin .csproj :

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

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

RazorRCL 'den bir bileşen tüketme

Başka bir projede bir RCL 'den bileşenleri 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.
  • Eğer Razor @using yönergesi RCL 'nin ad alanını bildirirse, bağımsız bileşenler RCL 'nin ad alanı olmadan ada göre eklenebilir. Aşağıdaki yaklaşımları kullanın:
    • @usingYönergeyi ayrı bileşenlere ekleyin.
    • @using _Imports.razor kitaplığın bileşenlerini bir projenin tamamına kullanılabilir hale getirmek için, en üst düzey dosyaya yönergesini ekleyin. _Imports.razorAd alanını tek bir bileşene veya bir klasör içindeki bileşen kümesine uygulamak için herhangi bir düzeydeki bir dosyaya yönerge ekleyin. Bir _Imports.razor Dosya kullanıldığında, tek tek bileşenler @using RCL 'nin ad alanı için bir yönerge gerektirmez.

Aşağıdaki örneklerde, ComponentLibrary bileşeni içeren BIR RCL vardır Component1 . Component1Bileşen, sayfa 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 üzere oluşturulduysa, Component1 Bu makaledeki ö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``ComponentLibraryRCL 'de:

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

RCL 'yi tüketen uygulamada, Component1 Aşağıdaki örnekte gösterildiği gibi, bir ad alanını kullanarak bileşene başvurun.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

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

<ComponentLibrary.Component1 />

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

Pages/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, tüketen uygulama tarafından otomatik olarak kullanılabilir hale getirilir. Kitaplığı kullanan uygulamada kitaplığın ayrı bileşen stil sayfalarını bağlamanız gerekmez. Önceki örneklerde, Component1 stil sayfası ( Component1.razor.css ) otomatik olarak eklenir.

Component1.razor.css``ComponentLibraryRCL 'de:

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

Arka plan resmi de RCL proje şablonundan bulunur ve wwwroot RCL klasöründe bulunur.

wwwroot/background.png``ComponentLibraryRCL 'de:

RCL proje şablonundan çapraz olarak şeritli arka plan resmi

Kitaplık klasöründeki stil sayfalarından ek kitaplık bileşen stilleri sağlamak için wwwroot , Framework 'ün bileşenini kullanarak stil sayfalarını bağlayın Link .

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

wwwroot/extra-background.png``ComponentLibraryRCL 'de:

Geliştirici tarafından kitaplığa eklenen çapraz çizgili arka plan resmi

Bir sınıfıyla RCL 'ye yeni bir stil sayfası ekleyin extra-style .

wwwroot/additionalStyles.css``ComponentLibraryRCL 'de:

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

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

ExtraStyles.razor``ComponentLibraryRCL 'de:

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

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

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

Pages/ConsumeComponent3.razor:

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

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

<ExtraStyles />

LinkBileşen bir alt bileşende kullanıldığında, bileşen ile alt öğe işlendiyse, bağlantılı varlık ana bileşenin diğer alt bileşenleri için de kullanılabilir Link .

Bileşeni kullanmanın bir alternatifi, Link uygulamanın biçimlendirmesinde kitaplığın stil sayfasına bağlantı kullanmaktır <head> .

wwwroot/index.html dosya ( Blazor WebAssembly ) veya Pages/_Layout.cshtml dosya ( Blazor Server ):

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

LinkBir alt bileşende bileşeni kullanma ve veya ' a bir HTML etiketi yerleştirme arasındaki ayrım, <link> wwwroot/index.html Pages/_Host.cshtml çerçeve bileşeninin işlenmiş html etiketinin:

  • , Uygulama durumu ile değiştirilebilir. Sabit kodlanmış <link> HTML etiketi uygulama durumu tarafından değiştirilemez.
  • <head>Üst bileşen artık IŞLENMEDIĞINDE HTML 'den kaldırılır.

Klasörde statik varlıklar içeren bir RCL oluşturma wwwroot

RCL 'nin statik varlıkları, kitaplığı kullanan tüm uygulamalar için kullanılabilir.

Statik varlıkları wwwroot RCL klasörüne yerleştirin ve uygulamada Şu yola sahip statik varlıklara başvurun: _content/{PACKAGE ID}/{PATH AND FILE NAME} . {PACKAGE ID}Yer tutucu, kitaplığın paket kimliğidir. Proje dosyasında belirtilmemişse, paket KIMLIĞI varsayılan olarak projenin derleme adına sahiptir <PackageId> . {PATH AND FILE NAME}Yer tutucu, altında yol ve dosya adıdır wwwroot .

Aşağıdaki örnek RCL statik varlıklarının bir RCL adlı ComponentLibrary ve Blazor RCL 'yi tüketen bir uygulamayla kullanımını gösterir. Uygulamanın RCL için bir proje başvurusu vardır ComponentLibrary .

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

wwwroot/jeep-yj.png``ComponentLibraryRCL 'de:

Jeep YJ®

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

JeepYJ.razor``ComponentLibraryRCL 'de:

<h3>ComponentLibrary.JeepYJ</h3>

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

Aşağıdaki Jeep bileşeni RCL 'yi tüketen uygulamaya ekleyin ComponentLibrary . JeepBileşen şunları kullanır:

  • ® ComponentLibrary RCL 'Nin klasöründen Jeep yj görüntüsü wwwroot .
  • JeepYJRCL 'den bileşen.

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

İşlenmiş Jeep bileşen:

Jeep bileşeni

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

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

Sayfalar, görünümler ve bileşenler için JavaScript (JS) dosyalarının collocation 'ı Razor bir uygulamadaki betikleri düzenlemenin kullanışlı bir yoludur.

Aşağıdaki dosya adı uzantısı kurallarını kullanarak JS dosyalarını birlikte bulun:

  • Sayfaların sayfaları Razor ve MVC uygulamalarının görünümleri: .cshtml.js . Örnekler:
    • Pages/Contact.cshtml.js``Contact Razor konumundaki bir sayfalar uygulamasının sayfası için Pages/Contact.cshtml .
    • Views/Home/Contact.cshtml.js``Contactkonumunda BIR MVC uygulamasının görünümü için Views/Home/Contact.cshtml .
  • Razor uygulama bileşenleri Blazor : .razor.js . Örnek: içindeki Pages/Index.razor.js Index bileşeni için Pages/Index.razor .

Birlikte bulunan JS dosyaları, projedeki dosyanın yolu kullanılarak genel olarak adreslanır:

  • Uygulamadaki birlikte bulunan betikler dosyasından sayfalar, görünümler ve bileşenler:

    {PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

    • {PATH}Yer tutucu, sayfanın, görünümün veya bileşenin yoludur.
    • {PAGE, VIEW, OR COMPONENT}Yer tutucu sayfa, görünüm veya bileşen olur.
    • {EXTENSION}Yer tutucu, sayfanın, görünümün veya bileşenin uzantısıyla eşleşir, ya da, ve razor cshtml .js .

    Bir sayfalar uygulamasından aşağıdaki örnekte Razor , komut dosyası Pages Contact sayfanın () bulunduğu klasörde birlikte bulunur Pages/Contact.cshtml :

    @section Scripts {
  <script src="~/Pages/Contact.cshtml.js"></script>
}

  • Bir Razor sınıf kitaplığı (RCL) tarafından sunulan betikler için:

    _content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

    • {PACKAGE ID}Yer tutucu, 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).
    • {PATH}Yer tutucu, sayfanın, görünümün veya bileşenin yoludur. Bir Razor bileşen RCL 'nin kökünde bulunuyorsa yol segmenti dahil değildir.
    • {PAGE, VIEW, OR COMPONENT}Yer tutucu sayfa, görünüm veya bileşen olur.
    • {EXTENSION}Yer tutucu sayfa, görünüm veya bileşen uzantısıyla eşleşir, ya da, ve razor cshtml tarafından .js .

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

    • RCL 'nin paket tanımlayıcısı AppJS .
    • Bir modülün betikler, Index bileşen () için yüklenir Index.razor .
    • IndexBileşen Pages RCL klasöründe bulunur.
    var module = await JS.InvokeAsync<IJSObjectReference>("import", 
    "_content/AppJS/Pages/Index.razor.js");

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

Daha fazla bilgi için bkz. Konak ve dağıtım ASP.NET Core Blazor WebAssembly.

İçin tarayıcı uyumluluk Çözümleyicisi Blazor WebAssembly

Blazor WebAssembly uygulamalar tam .NET API yüzey alanını hedefletir, ancak tüm .NET API 'Leri, tarayıcı korumalı alan kısıtlamaları nedeniyle WebAssembly üzerinde desteklenmez. PlatformNotSupportedExceptionWebAssembly üzerinde çalışırken desteklenmeyen API 'ler oluşturur. Uygulama, uygulamanın hedef platformları tarafından desteklenmeyen API 'Ler kullandığında, bir platform uyumluluğu Çözümleyicisi geliştiriciyi uyarır. Blazor WebAssemblyUygulamalar için bu, API 'lerin tarayıcılarda desteklendiği anlamına gelir. Uyumluluk Çözümleyicisi için .NET Framework API 'Lerine açıklama ekleme işlemi devam eder, bu nedenle tüm .NET Framework API 'SI Şu anda açıklanmamaktadır.

Blazor WebAssemblyve rcl projeleri browser , MSBuild öğesiyle desteklenen bir platform olarak ekleyerek tarayıcı uyumluluk denetimlerini otomatik olarak etkinleştirir SupportedPlatform . Kitaplık geliştiricileri, SupportedPlatform özelliği etkinleştirmek için öğeyi bir kitaplığın proje dosyasına el ile ekleyebilir:

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

Bir kitaplık yazarken belirli bir API 'nin şu şekilde belirterek tarayıcılarda desteklenmediğini belirtin browser UnsupportedOSPlatformAttribute :

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

daha fazla bilgi için bkz. apı 'leri belirli platformlarda (dotnet/tasarımlar GitHub deposuna ekleme).

JavaScript modüllerinde JavaScript yalıtımı

Blazor Standart JavaScript modüllerindeJavaScript yalıtımına izin vermez. JavaScript yalıtımı aşağıdaki avantajları sağlar:

  • İçeri aktarılan JavaScript artık genel ad alanını pollutes.
  • Kitaplık ve bileşenlerin tüketicileri, ilgili JavaScript 'ı el ile içeri aktarmak için gerekli değildir.

Daha fazla bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor.

NuGet oluşturma, paketleme ve teslim etme

Razorbileşenleri içeren sınıf kitaplıkları Razor standart .net kitaplıkları olduğundan, NuGet ' a paketleme ve sevk etme, herhangi bir kitaplığı paketleme ve NuGet ' a aktarma işleminden farklı değildir. Paket, komut dotnet pack kabuğu 'nda komut kullanılarak gerçekleştirilir:

dotnet pack

komutu dotnet nuget push bir komut kabuğunda komutunu kullanarak NuGet Upload.

Ticari Markalar

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

Ek kaynaklar

Bileşenler, projeler genelinde bir Razor sınıf kitaplığı 'NDA (RCL) paylaşılabilir. Uygulamasındaki bir uygulamaya bileşenleri ve statik varlıkları dahil et:

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

Bileşenler normal .NET türleri olduğu gibi, bir RCL tarafından sunulan bileşenler normal .NET derlemelerdir.

RCL oluşturma

  1. Yeni bir proje oluşturma.
  2. yeni proje oluştur iletişim kutusunda, ASP.NET Core proje şablonları listesinden Razor sınıf kitaplığı ' nı seçin. İleri’yi seçin.
  3. yeni projenizi yapılandırın iletişim kutusunda Project adı alanında bir proje adı girin veya varsayılan proje adını kabul edin. Bu konudaki örnekler proje adını kullanır ComponentLibrary . Oluştur’u seçin.
  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çın.
    2. Çözüm Gezgini çözüme sağ tıklayın. > mevcut Project ekle ' yi seçin.
    3. RCL 'nin proje dosyasına gidin.
    4. RCL 'nin proje dosyasını () seçin .csproj .
  6. Uygulamadan RCL 'ye bir başvuru ekleyin:
    1. Uygulama projesine sağ tıklayın. > Project başvuru ekle ' yi seçin.
    2. RCL projesini seçin. Tamam’ı seçin.

Şablondan RCL oluştururken sayfaları ve görünümleri desteklemek için destek sayfaları ve görünümler onay kutusu işaretliyse:

  • _Imports.razorBileşen yazma özelliğini etkinleştirmek için, oluşturulan RCL projesinin köküne bir dosya ekleyin ve aşağıdaki içeriği yapın Razor :

    @using Microsoft.AspNetCore.Components.Web

  • SupportedPlatformProje dosyasına () aşağıdaki öğeyi ekleyin .csproj :

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

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

RazorRCL'den bileşen kullanma

Başka bir projede RCL'den bileşenleri 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.
  • yönergesi RCL'nin ad alanını bildirerek RCL'nin ad alanı olmadan tek Razor @using tek bileşenler eklenebilir. Aşağıdaki yaklaşımları kullanın:
    • Yönergeyi @using tek tek bileşenlere ekleyin.
    • kitaplığının bileşenlerini projenin tamamına kullanılabilir hale eklemek için yönergesini @using üst düzey dosyaya dahil _Imports.razor edin. Ad alanını bir klasör içindeki tek bir bileşene veya bileşen kümesine uygulamak için yönergeyi _Imports.razor herhangi bir düzeyde bir dosyaya ekleyin. Bir _Imports.razor dosya kullanılırken, tek tek bileşenler RCL'nin ad @using alanı için bir yönerge gerektirmez.

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

Not

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

Component1.razor``ComponentLibraryRCL'de:

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

RCL'yi kullanan uygulamada, aşağıdaki örnekte Component1 olduğu gibi ad alanını kullanarak bileşene bakın.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

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

<ComponentLibrary.Component1 />

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

Pages/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 tüketen uygulamanın kullanımına açılır. Uygulama içinde kitaplığın kitaplığını tüketen tek tek bileşen stil sayfaları arasında bağlantı oluşturmanın gerekmemesi. Yukarıdaki örneklerde Component1 ' stylesheet ( Component1.razor.css ) otomatik olarak eklenir.

Component1.razor.css``ComponentLibraryRCL'de:

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

Arka plan görüntüsü ayrıca RCL proje şablonundan dahil edilir ve wwwroot RCL'nin klasöründe bulunur.

wwwroot/background.png``ComponentLibraryRCL'de:

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

Statik varlıklarla RCL oluşturma

RCL'nin statik varlıkları, kitaplığı tüketen tüm uygulamalarda kullanılabilir.

Statik varlıkları wwwroot RCL'nin klasörüne yer ve uygulamada aşağıdaki yolu kullanarak statik varlıklara başvurabilirsiniz: _content/{PACKAGE ID}/{PATH AND FILE NAME} . Yer {PACKAGE ID} tutucu, kitaplığın paket kimliğidir. Proje dosyasında belirtilmezse paket kimliği <PackageId> varsayılan olarak projenin derleme adını kullanır. Yer {PATH AND FILE NAME} tutucu, altındaki yol ve dosya adıdır. wwwroot

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

Bu bölümün ® örneğinde aşağıdaki Görüntü görüntüsü kullanılmıştır. Bu bölümde gösterilen örneği uygulamak için görüntüye sağ tıklar ve yerel olarak kaydedin.

wwwroot/jeep-yj.png``ComponentLibraryRCL'de:

YJ'yi en iyi şekilde ifade®

JeepYJRCL'ye aşağıdaki bileşeni ekleyin.

JeepYJ.razor``ComponentLibraryRCL'de:

<h3>ComponentLibrary.JeepYJ</h3>

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

JeepRCL'yi tüketen uygulamaya aşağıdaki ComponentLibrary bileşeni ekleyin. Bileşen Jeep şunları kullanır:

  • RCL'nin klasöründeki TheCri YJ ® ComponentLibrary wwwroot görüntüsü.
  • JeepYJRCL'den bileşeni.

Pages/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:

Component (Bileşen)

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

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

Daha fazla bilgi için bkz. Konak ve dağıtım ASP.NET Core Blazor WebAssembly.

için tarayıcı uyumluluğu çözümleyicisi Blazor WebAssembly

Blazor WebAssembly uygulamalar tam .NET API yüzey alanı hedeflese de tarayıcı korumalı alanı kısıtlamaları nedeniyle WebAssembly'de tüm .NET API'leri desteklanmaz. PlatformNotSupportedExceptionWebAssembly üzerinde çalıştırılan desteklenmeyen API'ler. Platform uyumluluk çözümleyicisi, uygulamanın hedef platformları tarafından desteklemeen API'leri kullandığında geliştiriciyi uyarıyor. Uygulamalar Blazor WebAssembly için bu, API'lerin tarayıcılarda desteklenelerini denetleme anlamına gelir. Uyumluluk çözümleyicisi için .NET Framework API'lerini açıklamaya ek açıklamaya devam eden bir işlemdir, bu nedenle tüm .NET Framework API'leri şu anda ek açıklama olarak ek açıklama değildir.

Blazor WebAssemblyve RCL projeleri, tarayıcı uyumluluk denetimlerini otomatik olarak etkinleştirmek için tarayıcı browser öğesiyle desteklenen bir platform MSBuild SupportedPlatform sağlar. Kitaplık geliştiricileri, özelliği etkinleştirmek SupportedPlatform için öğeyi kitaplığın proje dosyasına el ile ekleyebilir:

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

Bir kitaplık yazarken, için belirterek tarayıcılarda belirli bir API'nin destekçi olmadığını browser UnsupportedOSPlatformAttribute belirtin:

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

Daha fazla bilgi için bkz. API'leri belirli platformlarda desteklenmeyen olarak açıklama (dotnet/designs GitHub depoda).

JavaScript modüllerde JavaScript yalıtımı

Blazorstandart JavaScript modüllerde JavaScript yalıtımını sağlar. JavaScript yalıtımı aşağıdaki avantajları sağlar:

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

Daha fazla bilgi için bkz. .NET yöntemlerinden JavaScript işlevlerini ASP.NET Core Blazor.

Derleme, paketleme ve NuGet

Bileşenleri içeren sınıf kitaplıkları standart .NET kitaplıkları olduğundan, bunları paketlemek ve NuGet paketlemek ve teslim etmek, kitaplıkları paketlemek ve Razor Razor NuGet. Paketleme, komut dotnet pack kabuğunda komutu kullanılarak gerçekleştirilir:

dotnet pack

Upload kabuğunda komutunu kullanarak NuGet dotnet nuget push paketine geri yazın.

Ticari Markalar

Nv ve Nv YJ, FCA US LLC'nin (Nvntis NV) kayıtlı ticari markalarıdır.

Ek kaynaklar

Bileşenler, projeler arasında bir Razor sınıf kitaplığında (RCL) paylaşılır. Bileşenleri ve statik varlıkları şunlardan bir uygulamaya dahil edin:

  • Çözümde başka bir proje.
  • Başvurulan bir .NET kitaplığı.
  • Bir NuGet paketi.

Bileşenler normal .NET türleri 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, yeni Razor proje şablonları listesinden Sınıf Kitaplığı ASP.NET Core seçin. İleri’yi seçin.
  3. Yeni projenizi yapılandır iletişim kutusunda, proje adı alanına bir proje Project veya varsayılan proje adını kabul et. Bu konudaki örneklerde proje adı ComponentLibrary lanmıştır. Oluştur’u seçin.
  4. Yeni sınıf kitaplığı oluştur Razor iletişim kutusunda Oluştur'a seçin.
  5. RCL'yi bir çözüme ekleyin:
    1. Çözümü açın.
    2. içinde çözüme sağ tıklayın Çözüm Gezgini. Var Olan Verileri > Ekle'yi Project.
    3. RCL'nin proje dosyasına gidin.
    4. RCL'nin proje dosyasını ( ) .csproj seçin.
  6. RCL'ye uygulama üzerinden bir başvuru ekleyin:
    1. Uygulama projesine sağ tıklayın. Başvuru > ekle'Project 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çilirse, bileşen yazmayı etkinleştirmek için oluşturulan RCL projesinin köküne aşağıdaki içeriklere sahip bir _Imports.razor dosya Razor ekleyin:

@using Microsoft.AspNetCore.Components.Web

RazorRCL'den bileşen kullanma

Başka bir projede RCL'den bileşenleri 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.
  • yönergesi RCL'nin ad alanını bildirerek RCL'nin ad alanı olmadan tek Razor @using tek bileşenler eklenebilir. Aşağıdaki yaklaşımları kullanın:
    • Yönergeyi @using tek tek bileşenlere ekleyin.
    • kitaplığının bileşenlerini projenin tamamına kullanılabilir hale eklemek için yönergesini @using üst düzey dosyaya dahil _Imports.razor edin. Ad alanını bir klasör içindeki tek bir bileşene veya bileşen kümesine uygulamak için yönergeyi _Imports.razor herhangi bir düzeyde bir dosyaya ekleyin. Bir _Imports.razor dosya kullanılırken, tek tek bileşenler RCL'nin ad @using alanı için bir yönerge gerektirmez.

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

Not

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

Component1.razor``ComponentLibraryRCL'de:

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

RCL'yi kullanan uygulamada, aşağıdaki örnekte de olduğu gibi Component1 ad alanını kullanarak bileşene başvurun.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

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

<ComponentLibrary.Component1 />

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

Pages/ConsumeComponent2.razor:

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

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

<Component1 />

Aşağıdaki arka plan görüntüsü ve stil sayfası RCL'nin örnek bileşeni Component1 tarafından kullanılır. Proje şablonu tarafından otomatik olarak eklendiklerinden, bu statik varlıkları RCL proje şablonundan oluşturulan yeni bir RCL'ye eklemenize gerek yoktur.

wwwroot/background.png``ComponentLibraryRCL'de:

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

wwwroot/styles.css``ComponentLibraryRCL'de:

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

Component1'ın my-component CSS sınıfını sağlamak için, uygulamanın işaretlemesinde kitaplığın stil sayfasıyla bağlantı <head> açın.

wwwroot/index.html file ( Blazor WebAssembly ) veya file ( Pages/_Host.cshtml Blazor Server ):

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

Statik varlıklarla RCL oluşturma

RCL'nin statik varlıkları, kitaplığı tüketen tüm uygulamalarda kullanılabilir.

Statik varlıkları wwwroot RCL'nin klasörüne yer ve uygulamada aşağıdaki yolu kullanarak statik varlıklara başvurabilirsiniz: _content/{PACKAGE ID}/{PATH AND FILE NAME} . Yer {PACKAGE ID} tutucu, kitaplığın paket kimliğidir. Proje dosyasında belirtilmezse paket kimliği <PackageId> varsayılan olarak projenin derleme adını kullanır. Yer {PATH AND FILE NAME} tutucu, altındaki yol ve dosya adıdır. wwwroot

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

Bu bölümün ® örneğinde aşağıdaki Görüntü görüntüsü kullanılmıştır. Bu bölümde gösterilen örneği uygulamak için görüntüye sağ tıklar ve yerel olarak kaydedin.

wwwroot/jeep-yj.png``ComponentLibraryRCL'de:

YJ'yi en iyi şekilde ifade®

JeepYJRCL'ye aşağıdaki bileşeni ekleyin.

JeepYJ.razor``ComponentLibraryRCL'de:

<h3>ComponentLibrary.JeepYJ</h3>

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

JeepRCL'yi tüketen uygulamaya aşağıdaki ComponentLibrary bileşeni ekleyin. Bileşen Jeep şunları kullanır:

  • RCL'nin klasöründeki TheCri YJ ® ComponentLibrary wwwroot görüntüsü.
  • JeepYJRCL'den bileşeni.

Pages/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:

Component (Bileşen)

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

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

Daha fazla bilgi için bkz. Konak ve dağıtım ASP.NET Core Blazor WebAssembly.

Derleme, paketleme ve NuGet

Bileşenleri içeren sınıf kitaplıkları standart .NET kitaplıkları olduğundan, bunları paketlemek ve NuGet paketlemek ve teslim etmek, kitaplıkları paketlemek ve Razor Razor NuGet. Paketleme, komut dotnet pack kabuğunda komutu kullanılarak gerçekleştirilir:

dotnet pack

Upload kabuğunda komutunu kullanarak NuGet dotnet nuget push paketine geri yazın.

Ticari Markalar

Nv ve Nv YJ, FCA US LLC'nin (Nvntis NV) kayıtlı ticari markalarıdır.

Ek kaynaklar