ASP.NET Core giriş Blazor

  • Makale
  • Okumak için 7 dakika

Hoş geldiniz Blazor !

Blazor , .netile etkileşimli istemci tarafı Web Kullanıcı arabirimi oluşturmaya yönelik bir çerçevedir:

  • JavaScriptyerine C# kullanarak zengin etkileşimli uo 'lar oluşturun.
  • .NET ' te yazılmış sunucu tarafı ve istemci tarafı uygulama mantığını paylaşabilirsiniz.
  • Mobil tarayıcılar dahil olmak üzere geniş tarayıcı desteği için Kullanıcı arabirimini HTML ve CSS olarak işleme.
  • Dockergibi modern barındırma platformlarıyla tümleştirin.

İstemci tarafı web geliştirme için .NET kullanmak aşağıdaki avantajları sunar:

  • JavaScript yerine C# dilinde kod yazın.
  • .Net kitaplıklarınınmevcut .NET ekosisteminden yararlanın.
  • Sunucu ve istemci arasında uygulama mantığını paylaşma.
  • Avantajı. NET ' in performans, güvenilirlik ve güvenlik.
  • Windows, Linux ve macos 'ta Visual Studio üretken olun.
  • Kararlı, özellik açısından zengin ve kullanımı kolay olan ortak diller, çerçeveler ve araçlar kümesi oluşturun.

Bileşenler

Blazor uygulamalar bileşenleri temel alır. İçindeki bir bileşeni Blazor , bir sayfa, iletişim veya veri girişi formu gibi bir kullanıcı arabirimi öğesidir.

Bileşenler, .NET derlemeleri yerleşik olarak bulunan .NET C# sınıflarıdır:

  • Esnek kullanıcı arabirimi işleme mantığını tanımlayın.
  • Kullanıcı olaylarını işleyin.
  • İç içe ve yeniden kullanılabilir olabilir.
  • , Razor sınıf kitaplıkları veya NuGet paketleriolarak paylaşılabilir ve dağıtılabilir.

Bileşen sınıfı, genellikle Razor bir dosya uzantısına sahip bir biçimlendirme sayfası biçiminde yazılır .razor . İçindeki bileşenler Blazor , resmi olarak Razor bileşen olarak adlandırılır. Razor , HTML işaretlemesini geliştirici üretkenliği için tasarlanan C# kodu ile birleştirmek için bir sözdizimidir. RazorVisual Studio ' de IntelliSense programlama desteğiyle aynı dosyada HTML biçimlendirme ve C# arasında geçiş yapmanıza olanak sağlar. Razor Sayfalar ve MVC de kullanır Razor . RazorBir istek/yanıt modeli etrafında oluşturulan sayfaların ve MVC 'nin aksine, bileşenler özellikle istemci tarafı UI mantığı ve bileşimi için kullanılır.

Blazor UI bileşimi için doğal HTML etiketleri kullanır. Aşağıdaki Razor biçimlendirme Dialog.razor bir iletişim kutusu görüntüleyen ve Kullanıcı bir düğme seçtiğinde bir olayı işleyen bir bileşeni () gösterir:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Yukarıdaki örnekte, OnYes düğme olayının tetiklediği bir C# yöntemidir onclick . İletişim kutusunun Text ( ChildContent ) ve title ( Title ), bu bileşeni Kullanıcı arabiriminde kullanan aşağıdaki bileşen tarafından sağlanır.

DialogBileşen, BIR HTML etiketi kullanılarak başka bir bileşen içinde iç içe geçmiş. Aşağıdaki örnekte, Index bileşen ( Pages/Index.razor ) önceki Dialog bileşeni kullanır. Etiketin özniteliği, Title bileşen özelliğine bir başlık değeri geçirir Dialog Title . DialogBileşenin metni (), ChildContent öğesinin içeriği tarafından ayarlanır <Dialog> . Dialogbileşen Index bileşene eklendiğinde, ıntellisense Visual Studio sözdizimi ve parametre tamammasıyla geliştirmeyi hızlandırır.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

İletişim kutusu, Index bileşene bir tarayıcıda erişildiğinde işlenir. Düğme Kullanıcı tarafından seçildiğinde, tarayıcının geliştirici araçları konsolunda yöntemi tarafından yazılan ileti görüntülenir OnYes :

İletişim kutusu bileşeni, Dizin bileşeninin içinde iç içe geçmiş tarayıcıda işlendi. Tarayıcı geliştirici araçları konsolu, Kullanıcı Evet ' i seçtiğinde C# kodu tarafından yazılan iletiyi gösterir! düğmesine basın.

Bileşenler, Kullanıcı arabirimini esnek ve verimli bir şekilde güncelleştirmek için kullanılan bir işleme ağacı adlı, tarayıcı belge nesne modeli (DOM) ' ın bellek içi gösterimine işlenir.

Blazor WebAssembly

Blazor WebAssembly , .NET ile etkileşimli istemci tarafı Web uygulamaları oluşturmaya yönelik tek sayfalı uygulama (Spa) çerçevesidir . Blazor WebAssembly , eklentiler olmadan açık Web standartları kullanır veya kodu diğer dillere yeniden derler. Blazor WebAssembly mobil tarayıcılar dahil tüm modern web tarayıcılarında çalışmaktadır.

Web tarayıcıları içinde .NET kodu çalıştırmak, Webassembly (kısaltılmış) tarafından mümkün hale getirilir wasm . WebAssembly hızlı indirme ve en yüksek yürütme hızı için iyileştirilmiş bir sıkıştırma kodu biçimidir. WebAssembly, açık bir web standardıdır ve eklentileri olmayan Web tarayıcılarında desteklenir.

WebAssembly Code, JavaScript birlikte çalışabilirliği olarak adlandırılan JavaScript aracılığıyla tarayıcının tüm işlevlerine erişebilir, genellikle JavaScript birlikte çalışma veya js birlikte çalışma olarak kısaltılır. Tarayıcıda WebAssembly aracılığıyla yürütülen .NET kodu, sanal makinenin istemci makinesindeki kötü amaçlı eylemlere karşı sağladığı korumalar ile tarayıcının JavaScript korumalı alanında çalışır.

::: No-Loc (Blazor WebAssembly)::: .NET kodunu WebAssembly ile tarayıcıda çalıştırır.

Bir Blazor WebAssembly uygulama bir tarayıcıda oluşturulup çalıştırıldığında:

  • C# kod dosyaları ve Razor dosyaları .net Derlemeleriyle derlenir.
  • Derlemeler ve .NET çalışma zamanı tarayıcıya indirilir.
  • Blazor WebAssembly .NET çalışma zamanı önyükleme ve çalışma zamanını uygulamanın derlemelerini yükleyecek şekilde yapılandırır. Blazor WebAssemblyÇalışma zamanı, DOM işleme ve tarayıcı API çağrılarını işlemek Için JavaScript birlikte çalışabilirliği kullanır.

Yayınlanan uygulamanın boyutu, Yük boyutu, bir uygulamanın kullanılabilirliği için kritik bir performans etkendir. Büyük bir uygulamanın tarayıcıya indirmesi oldukça uzun sürer ve bu da Kullanıcı deneyimini azaltabilecek. Blazor WebAssembly yükleme sürelerini azaltmak için yük boyutunu iyileştirir:

  • Kullanılmayan kod, ara dil (IL) ayarlayıcısıtarafından yayımlandığında uygulamadan çıkarılır.
  • HTTP yanıtları sıkıştırılır.
  • .NET çalışma zamanı ve derlemeler tarayıcıda önbelleğe alınır.

Blazor Server

Blazor Kullanıcı arabirimi güncelleştirmelerinin uygulanma, bileşen işleme mantığını ayırır. Blazor Server ASP.NET Core uygulamasında sunucuda barındırma bileşenleri için destek sağlar Razor . Kullanıcı Arabirimi güncelleştirmeleri bir bağlantı üzerinden işlenir SignalR .

Çalışma zamanı sunucuda kalır ve işleyiciler:

  • Uygulamanın C# kodu yürütülüyor.
  • Tarayıcıdan sunucusuna kullanıcı arabirimi olayları gönderiliyor.
  • Sunucu tarafından geri gönderilen işlenen bileşene Kullanıcı Arabirimi güncelleştirmeleri uygulanıyor.

Blazor ServerTarayıcıyla iletişim kurmak için tarafından kullanılan bağlantı, JavaScript birlikte çalışma çağrılarını işlemek için de kullanılır.

::: No-Loc (Blazor Server)::: sunucuda .NET kodu çalıştırır ve şu şekilde istemcisinde Belge Nesne Modeli:: No-Loc (SignalR)::: Connection

JavaScript ile birlikte çalışma

Üçüncü taraf JavaScript kitaplıklarını ve tarayıcı API 'Lerine erişimi gerektiren uygulamalar için, bileşenler JavaScript ile birlikte çalışır. Bileşenler, JavaScript 'in kullanabileceği herhangi bir kitaplığı veya API kullanma yeteneğine sahiptir. C# kodu JavaScript kodunu çağırabilirve JavaScript kodu c# koduna çağrıyapabilir.

Kod paylaşımı ve .NET Standard

Blazor Blazor projelerin .NET Standard belirtimlerine uygun kitaplıklara başvurmalarını sağlayan .NET Standard uygular. .NET Standard, .NET uygulamaları genelinde ortak olan .NET API 'lerinin resmi bir belirtimidir. .NET Standard sınıf kitaplıkları Blazor , .NET Framework, .net Core, Xamarin, Mono ve Unity gibi farklı .net platformları arasında paylaşılabilir.

Bir Web tarayıcısı içinde geçerli olmayan API 'Ler (örneğin, dosya sistemine erişmek, bir yuva açmak ve iş parçacığı açmak) bir oluşturur PlatformNotSupportedException .

Ek kaynaklar

Hoş geldiniz Blazor !

Blazor , .netile etkileşimli istemci tarafı Web Kullanıcı arabirimi oluşturmaya yönelik bir çerçevedir:

  • JavaScriptyerine C# kullanarak zengin etkileşimli uo 'lar oluşturun.
  • .NET ' te yazılmış sunucu tarafı ve istemci tarafı uygulama mantığını paylaşabilirsiniz.
  • Mobil tarayıcılar dahil olmak üzere geniş tarayıcı desteği için Kullanıcı arabirimini HTML ve CSS olarak işleme.
  • Dockergibi modern barındırma platformlarıyla tümleştirin.

İstemci tarafı web geliştirme için .NET kullanmak aşağıdaki avantajları sunar:

  • JavaScript yerine C# dilinde kod yazın.
  • .Net kitaplıklarınınmevcut .NET ekosisteminden yararlanın.
  • Sunucu ve istemci arasında uygulama mantığını paylaşma.
  • Avantajı. NET ' in performans, güvenilirlik ve güvenlik.
  • Windows, Linux ve macos 'ta Visual Studio üretken olun.
  • Kararlı, özellik bakımından zengin ve kullanımı kolay olan ortak bir dil, çerçeve ve araç kümesi üzerinde derleme.

Bileşenler

Blazoruygulamaları bileşenlerine dayalıdır. içinde bir Blazor bileşen, kullanıcı arabiriminin sayfa, iletişim kutusu veya veri girişi formu gibi bir kısmıdır.

Bileşenler, .NET derlemelerinde yerleşik olarak bulunan .NET C# sınıflarıdır ve şu şekildedir:

Bileşen sınıfı genellikle dosya uzantısına sahip Razor bir işaretleme sayfası şeklinde .razor yazılır. 'daki Blazor bileşenler resmi olarak bileşenleri olarak Razor adlandırılır. Razor , geliştirici üretkenliği için tasarlanmış C# koduyla HTML işaretlemesini birleştirmeye bir söz dizimidir. Razor, aynı dosyada HTML işaretlemesi ile C# arasında geçiş yapmak için intelliSense programlama desteği Visual Studio. Razor Sayfalar ve MVC de Razor kullanır. Bir istek/yanıt modeli etrafında yerleşik olan Sayfalar ve MVC'den farklı olarak bileşenler özellikle istemci tarafı kullanıcı arabirimi mantığı Razor ve bileşimi için kullanılır.

Blazor kullanıcı arabirimi oluşturma için doğal HTML etiketlerini kullanır. Aşağıdaki işaretleme, bir iletişim kutusu görüntüleyen ve kullanıcı bir düğmeyi seçen bir olayı Razor işleyen bir bileşeni ( Dialog.razor ) gösterir:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Yukarıdaki örnekte, OnYes düğmenin olayı tarafından tetiklenen bir C# onclick yöntemidir. İletişim kutusunun metni ( ) ve başlığı ( ) kullanıcı arabiriminde bu bileşeni ChildContent kullanan aşağıdaki bileşen tarafından Title sağlanır.

Bileşen, Dialog HTML etiketi kullanılarak başka bir bileşen içinde iç içe geçmiştir. Aşağıdaki örnekte, bileşeni Index ( ) önceki bileşeni Pages/Index.razor Dialog kullanır. Etiketin Title özniteliği, başlık için bir değeri bileşenin Dialog özelliğine Title iletir. DialogBileşenin metni ( ChildContent ) öğenin <Dialog> içeriğinin içeriği tarafından ayarlanır. Bileşen Dialog bileşene eklenmiştir, içinde Index IntelliSense Visual Studio söz dizimi ve parametre tamamlama ile geliştirmeyi hızlandırır.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

İletişim kutusu, bileşene Index tarayıcıda erişilirken işlenir. Düğme kullanıcı tarafından seçildiğinde, tarayıcının geliştirici araçları konsolu yöntemi tarafından yazılan iletiyi OnYes gösterir:

Dizin bileşeninin içine iç içe geçmiş tarayıcıda işlenen iletişim kutusu bileşeni. Tarayıcı geliştirici araçları konsolu, kullanıcı Evet! düğmesini seçin.

Bileşenler, kullanıcı arabirimini esnek ve verimli bir şekilde güncelleştirmek için kullanılan işleme ağacı Belge Nesne Modeli tarayıcının bellek içinde gösterimini (DOM) işler.

Blazor WebAssembly

Blazor WebAssembly , .NET ile etkileşimli istemci tarafı web uygulamaları oluşturmak için tek sayfalı bir uygulama (SPA) çerçevesidir. Blazor WebAssembly eklenti olmadan açık web standartlarını kullanır veya kodu diğer dillere yeniden derlemez. Blazor WebAssembly , mobil tarayıcılar dahil olmak üzere tüm modern web tarayıcılarında çalışır.

Web tarayıcıları içinde .NET kodu çalıştırma, WebAssembly tarafından mümkün olur (kısaltılmış). wasm WebAssembly, hızlı indirme ve maksimum yürütme hızı için iyileştirilmiş küçük bir bytecode biçimidir. WebAssembly açık bir web standardıdır ve eklenti olmadan web tarayıcılarında desteklenir.

WebAssembly kodu, JavaScript birlikte çalışabilirliği olarak adlandırılan JavaScript aracılığıyla tarayıcının tüm işlevlerine erişebilir. Bu işlev genellikle JavaScript birlikte çalışma veya JS birlikte çalışma olarak kısaltıldı. Tarayıcıda WebAssembly aracılığıyla yürütülen .NET kodu, korumalı alan tarafından istemci makinedeki kötü amaçlı eylemlere karşı sağladığı korumalarla tarayıcının JavaScript korumalı alanı içinde çalışır.

Blazor WebAssembly WebAssembly ile tarayıcıda .NET kodu çalıştırır.

Bir Blazor WebAssembly uygulama yerleşik olduğunda ve tarayıcıda çalıştırılana:

  • C# kod dosyaları Razor ve dosyaları .NET derlemelerinde derlenmiş.
  • Derlemeler ve .NET çalışma zamanı tarayıcıya indirilir.
  • Blazor WebAssembly .NET çalışma zamanının önyüklemesini yapar ve çalışma zamanının uygulama için derlemeleri yüklemesini yapılandırıyor. Çalışma Blazor WebAssembly zamanı, DOM işleme ve tarayıcı API çağrılarını işlemek için JavaScript birlikte çalışabilirliği kullanır.

Yayımlanan uygulamanın boyutu, yük boyutu, bir uygulamanın kullanılabilirliği için kritik bir performans faktörüdür. Büyük bir uygulamanın tarayıcıya indirilesi görece uzun sürer ve bu da kullanıcı deneyimini azaltıyor. Blazor WebAssembly indirme sürelerini azaltmak için yük boyutunu iyiler:

Blazor Server

Blazor bileşen işleme mantığını kullanıcı arabirimi güncelleştirmelerinin uygulanmasından farklı bir şekilde gösterir. Blazor Server, bir Razor uygulamanın sunucu üzerinde barındırma bileşenleri için ASP.NET Core sağlar. Kullanıcı arabirimi güncelleştirmeleri bir bağlantı üzerinden SignalR işleme alın.

Çalışma zamanı sunucuda kalır ve şunları yapar:

  • Uygulamanın C# kodunu yürütme.
  • Kullanıcı arabirimi olaylarını tarayıcıdan sunucuya gönderme.
  • Sunucu tarafından geri gönderilen işlenmiş bileşene kullanıcı arabirimi güncelleştirmeleri uygulama.

tarafından tarayıcıyla Blazor Server iletişim kurmak için kullanılan bağlantı, JavaScript birlikte çalışma çağrılarını işlemek için de kullanılır.

Blazor Server sunucusunda .NET kodu çalıştırır ve bir SignalR bağlantısı üzerinden istemcide Belge Nesne Modeli ile etkileşime geçme

JavaScript ile birlikte çalışma

Üçüncü taraf JavaScript kitaplıkları gerektiren ve tarayıcı API'lerine erişim gerektiren uygulamalar için bileşenler JavaScript ile birlikte çalışır. Bileşenler, JavaScript'in kullanabileceği herhangi bir kitaplığı veya API'yi kullanabilir. C# kodu JavaScript koduna çağrıda bulundurabilirve JavaScript kodu C# koduna çağırabilir.

Kod paylaşımı ve .NET Standard

Blazor , projelerin .NET Standarduygun Blazor kitaplıklara başvurup göndermelerini sağlayan .NET Standard uygulanır. .NET Standard , .NET uygulamaları arasında ortak olan .NET API'lerinin resmi bir belirtimidir. .NET Standard kitaplıkları , .NET Framework, .NET Core, Xamarin, Mono ve Unity gibi farklı Blazor .NET platformlarında paylaşılabilir.

Bir web tarayıcısının içinde geçerli olmayan API'ler (örneğin, dosya sistemine erişme, yuva açma ve iş parçacığı açma) bir PlatformNotSupportedException atar.

Ek kaynaklar

Hoş Blazor geldiniz!

Blazor, .NET ile etkileşimli istemci tarafı web kullanıcı arabirimi oluşturmak için bir çerçevedir:

  • JavaScript yerine C# kullanarak zengin etkileşimli UI'ler oluşturun.
  • .NET'te yazılan sunucu tarafı ve istemci tarafı uygulama mantığını paylaşın.
  • Kullanıcı arabirimini, mobil tarayıcılar da dahil olmak üzere geniş tarayıcı desteği için HTML ve CSS olarak işleyin.
  • Docker gibi modern barındırma platformları ile tümleştirin.

İstemci tarafı web geliştirmesi için .NET kullanmak aşağıdaki avantajları sunar:

  • JavaScript yerine C# ile kod yazın.
  • .NET kitaplıklarının mevcut .NET ekosistemini kullanabilirsiniz.
  • Uygulama mantığını sunucu ve istemci arasında paylaşın.
  • avantajından faydalanma. NET'in performansı, güvenilirliği ve güvenliği.
  • Visual Studio, Linux ve macOS Windows ile üretken kalın.
  • Kararlı, özellik bakımından zengin ve kullanımı kolay olan ortak bir dil, çerçeve ve araç kümesi üzerinde derleme.

Bileşenler

Blazoruygulamaları bileşenlerine dayalıdır. içinde bir Blazor bileşen, sayfa, iletişim kutusu veya veri girişi formu gibi bir kullanıcı arabirimi öğesidir.

Bileşenler, .NET derlemelerinde yerleşik olarak bulunan .NET C# sınıflarıdır ve şu şekildedir:

Bileşen sınıfı genellikle dosya uzantısına sahip Razor bir işaretleme sayfası şeklinde .razor yazılır. 'daki Blazor bileşenler resmi olarak bileşenleri olarak Razor adlandırılır. Razor , geliştirici üretkenliği için tasarlanmış C# koduyla HTML işaretlemesini birleştirmeye bir söz dizimidir. Razor, aynı dosyada HTML işaretlemesi ile C# arasında geçiş yapmak için intelliSense programlama desteği Visual Studio. Razor Sayfalar ve MVC de Razor kullanır. Bir istek/yanıt modeli etrafında yerleşik olan Sayfalar ve MVC'den farklı olarak bileşenler özellikle istemci tarafı kullanıcı arabirimi mantığı Razor ve bileşimi için kullanılır.

Blazor kullanıcı arabirimi oluşturma için doğal HTML etiketlerini kullanır. Aşağıdaki işaretleme, bir iletişim kutusu görüntüleyen ve kullanıcı bir düğmeyi seçen bir olayı Razor işleyen bir bileşeni ( Dialog.razor ) gösterir:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Yukarıdaki örnekte, OnYes düğmenin olayı tarafından tetiklenen bir C# onclick yöntemidir. İletişim kutusunun metni ( ) ve başlığı ( ) kullanıcı arabiriminde bu bileşeni ChildContent kullanan aşağıdaki bileşen tarafından Title sağlanır.

Bileşen, Dialog HTML etiketi kullanılarak başka bir bileşen içinde iç içe geçmiştir. Aşağıdaki örnekte, bileşeni Index ( ) önceki bileşeni Pages/Index.razor Dialog kullanır. Etiketin Title özniteliği, başlık için bir değeri bileşenin Dialog özelliğine Title iletir. DialogBileşenin metni ( ChildContent ) öğesinin içeriğine göre <Dialog> ayarlanır. Bileşen Dialog bileşene eklenmiştir, içinde Index IntelliSense Visual Studio söz dizimi ve parametre tamamlama ile geliştirmeyi hızlandırır.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

İletişim kutusu, bileşene Index tarayıcıda erişilirken işlenir. Düğme kullanıcı tarafından seçildiğinde, tarayıcının geliştirici araçları konsolu yöntemi tarafından yazılan iletiyi OnYes gösterir:

Dizin bileşeninin içine iç içe geçmiş tarayıcıda işlenen iletişim kutusu bileşeni. Tarayıcı geliştirici araçları konsolu, kullanıcı Evet! düğmesini seçin.

Bileşenler, kullanıcı arabirimini esnek ve verimli bir şekilde güncelleştirmek için kullanılan işleme ağacı olarak Belge Nesne Modeli tarayıcının bellek içinde gösterimini (DOM) işler.

Blazor WebAssembly

Blazor WebAssembly , .NET ile etkileşimli istemci tarafı web uygulamaları oluşturmak için tek sayfalı bir uygulama (SPA) çerçevesidir. Blazor WebAssembly eklenti olmadan açık web standartlarını kullanır veya kodu diğer dillere yeniden derlemez. Blazor WebAssembly , mobil tarayıcılar dahil olmak üzere tüm modern web tarayıcılarında çalışır.

Web tarayıcıları içinde .NET kodu çalıştırma, WebAssembly tarafından mümkün olur (kısaltılmış). wasm WebAssembly, hızlı indirme ve en yüksek yürütme hızı için iyileştirilmiş küçük bir bytecode biçimidir. WebAssembly açık bir web standardıdır ve eklenti olmadan web tarayıcılarında desteklenir.

WebAssembly kodu, JavaScript birlikte çalışabilirliği olarak adlandırılan JavaScript aracılığıyla tarayıcının tüm işlevlerine erişebilir. Bu işlev genellikle JavaScript birlikte çalışma veya JS birlikte çalışma olarak kısaltıldı. Tarayıcıda WebAssembly aracılığıyla yürütülen .NET kodu, korumalı alan tarafından istemci makinedeki kötü amaçlı eylemlere karşı sağladığı korumalarla tarayıcının JavaScript korumalı alanı içinde çalışır.

Blazor WebAssembly WebAssembly ile tarayıcıda .NET kodu çalıştırır.

Bir Blazor WebAssembly uygulama bir tarayıcıda yerleşik ve çalışırken:

  • C# kod dosyaları Razor ve dosyaları .NET derlemelerinde derlenmiş.
  • Derlemeler ve .NET çalışma zamanı tarayıcıya indirilir.
  • Blazor WebAssembly .NET çalışma zamanının önyüklemesini yapar ve çalışma zamanının uygulama için derlemeleri yüklemesini yapılandırıyor. Çalışma Blazor WebAssembly zamanı, DOM işleme ve tarayıcı API çağrılarını işlemek için JavaScript birlikte çalışabilirliği kullanır.

Yayımlanan uygulamanın boyutu, yük boyutu, bir uygulamanın kullanılabilirliği için kritik bir performans faktörüdür. Büyük bir uygulamanın tarayıcıya indirilesi görece uzun sürer ve bu da kullanıcı deneyimini azaltıyor. Blazor WebAssembly indirme sürelerini azaltmak için yük boyutunu iyiler:

Blazor Server

Blazor bileşen işleme mantığını kullanıcı arabirimi güncelleştirmelerinin uygulanmasından farklı bir şekilde gösterir. Blazor Server, bir Razor uygulamanın sunucusunda bileşenleri barındırmak için ASP.NET Core sağlar. Kullanıcı arabirimi güncelleştirmeleri bir bağlantı üzerinden SignalR işleme alın.

Çalışma zamanı sunucuda kalır ve şunları yapar:

  • Uygulamanın C# kodunu yürütme.
  • Kullanıcı arabirimi olaylarını tarayıcıdan sunucuya gönderme.
  • Sunucu tarafından geri gönderilen işlenmiş bileşene kullanıcı arabirimi güncelleştirmeleri uygulama.

tarafından tarayıcıyla Blazor Server iletişim kurmak için kullanılan bağlantı, JavaScript birlikte çalışma çağrılarını işlemek için de kullanılır.

Blazor Server sunucusunda .NET kodu çalıştırır ve bir SignalR bağlantısı üzerinden istemcide Belge Nesne Modeli ile etkileşime geçme

JavaScript ile birlikte çalışma

Üçüncü taraf JavaScript kitaplıkları gerektiren ve tarayıcı API'lerine erişim gerektiren uygulamalar için bileşenler JavaScript ile birlikte çalışır. Bileşenler, JavaScript'in kullanabileceği herhangi bir kitaplığı veya API'yi kullanabilir. C# kodu JavaScript koduna çağrıda bulundurabilirve JavaScript kodu C# koduna çağırabilir.

Kod paylaşımı ve .NET Standard

Blazor , projelerin .NET Standarduygun Blazor kitaplıklara başvurup göndermelerini sağlayan .NET Standard uygulanır. .NET Standard , .NET uygulamaları arasında ortak olan .NET API'lerinin resmi bir belirtimidir. .NET Standard kitaplıkları , .NET Framework, .NET Core, Xamarin, Mono ve Unity gibi farklı Blazor .NET platformlarında paylaşılabilir.

Bir web tarayıcısının içinde geçerli olmayan API'ler (örneğin, dosya sistemine erişme, yuva açma ve iş parçacığı açma) bir PlatformNotSupportedException atar.

Ek kaynaklar