|
|
Yayınlandı 7.04.2020 11:15:36
|
|
|
|
Blazor, .NET kullanarak etkileşimli istemci web arayüzleri oluşturmak için bir çerçevedir:
- Zengin ve etkileşimli arayüz oluşturmak için JavaScript yerine C# kullanın.
- .NET ile yazılmış sunucu tarafı ve istemci tarafı uygulama mantığı paylaş.
- Arayüz, mobil tarayıcılar da dahil olmak üzere birçok tarayıcıyı desteklemek için HTML ve CSS olarak render edin.
Blazor, istemci tarafında bir tarayıcıda WebAssembly tabanlı .NET çalışma zamanında (Blazor WebAssembly) veya sunucu tarafında ASP.NET Core'da (Blazor sunucusu) çalıştırmak üzere tasarlanmış bir web framework'tür. Yönetilen herhangi bir model için uygulama ve bileşen modelleri aynıdır.
Blazor sunucuları
Blazor sunucu barındırma modelini kullanarak ASP.NET Core uygulamalarından sunucuda uygulamaları çalıştırın.Arayüz güncellemeleri, olay yönetimi ve JavaScript çağrıları aracılığıyla yapılırSignalRSürece bağlantılar。
Blazor sunucu barındırma modeli aşağıdaki avantajları sunar:
- İndirme boyutu Blazor WebAssembly uygulamasından çok daha küçük ve uygulama çok daha hızlı yükleniyor.
- Uygulamalar, .NET Core uyumlu API'leri kullanmak da dahil olmak üzere sunucu yeteneklerinden tam olarak faydalanabilir.
- Uygulamayı çalıştırmak için sunucudaki .NET Core kullanılıyor, bu yüzden mevcut .NET araçları, örneğin hata ayıklama gibi çalışıyor.
- İnce istemcileri destekleniyor. Örneğin, Blazor sunucu uygulaması WebAssembly desteklemeyen tarayıcılar ve kaynak kısıtlı cihazlar için uygundur.
- Uygulamanın bileşen kodunu içeren .NET/C# kod tabanı, istemci üzerinde çalışmaz.
Blazor sunucu barındırma aşağıdaki dezavantajlara sahiptir:
Gecikme genellikle daha yüksektir. Her kullanıcı etkileşimi bir ağ atlaması içerir.
Çevrimdışı çalışmak desteklenmiyor. İstemci bağlantısı bozulursa, uygulama çalışmayı durduruyor.
Birden fazla kullanıcınız varsa, uygulama ölçeklenebilirliğinde zorluklar yaşanır. Sunucu, birden fazla istemci bağlantısını yönetmeli ve istemci durumunu yönetmelidir.
ASP.NET Uygulamaya hizmet vermek için çekirdek sunucular gereklidir. Sunucusuz dağıtım senaryoları mümkün değildir (örneğin, CDN üzerinden uygulamalara hizmet vermek).
Eğitim başlıyor:
1. Öncelikle, aşağıda gösterildiği gibi vs2019 kullanarak yeni bir Blazor Uygulama projesi oluşturun:
2. Aşağıdaki kodla yeni bir Razor bileşeni oluşturun:
Base64 captcha'sını oluşturmak ve nuget üzerinden kurmak için SkiaSharp paketine ihtiyacımız var:
3. Projeye başlayın, şu adresleri ziyaret edin:Bağlantı girişi görünür.
Oluşturulan html kodu şöyle görünüyor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"server","prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="üst sıra pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li sınıf="nav-öğe px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li sınıf="nav-öğe px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Sayaç
</a>
</li>
<li sınıf="nav-öğe px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Veri getir
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="üst sıra px-4">
<a href="https://docs.microsoft.com/aspnet/" hedef="_blank">Hakkında</a>
</div>
<div class="content px-4">
<h3>Doğrulama</h3>
<p>
(Blazor) Doğrulama kodunu göstermek ve doğrulamak için bir örnek.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Yenileme</button>
<hr>
<div>Sayıyı resme yazın</div>
<form>
<input type="text" style="padding:5px" />
<button>Kontrol</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Yönetilmemiş bir istisna yaşandı. Detaylar için tarayıcı geliştirme araçlarına bakınız.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Düğmeye tıklamayı deneyin, düğme olay tetikleyicisi aşağıdaki şekilde gösterildiği gibi websocket, anket vb. tabanlı SignalR üzerinden iletilir:
Referans bağlantıları:
Bağlantı girişi görünür.
|
Önceki:Decompile XAML dosyalarıyla ilgili sorunÖnümüzdeki:Discuz(DZ), turistik puan doldurma XML için anlamsız bir çözümdür
|
Ev sahibi|
Yayınlandı 7.04.2020 11:45:47
|
Yayınlandı 15.11.2022 10:51:42
|
