Blazor adalah kerangka kerja untuk membangun UI web klien interaktif menggunakan .NET:
- Gunakan C# alih-alih JavaScript untuk membuat UI yang kaya dan interaktif.
- Bagikan logika aplikasi sisi server dan sisi klien yang ditulis dalam .NET.
- Render UI sebagai HTML dan CSS untuk mendukung banyak browser, termasuk browser seluler.
Blazor adalah kerangka kerja web yang dirancang untuk menjalankan sisi klien di browser pada runtime .NET berbasis WebAssembly (Blazor WebAssembly) atau sisi server di ASP.NET Core (server Blazor). Untuk model terkelola apa pun, model aplikasi dan komponen adalah sama.
Server Blazor
Gunakan model hosting server Blazor untuk menjalankan aplikasi di server dari aplikasi Core ASP.NET.Update UI, penanganan peristiwa, dan panggilan JavaScript dilakukan melaluiSignalRkoneksi ke proses。
Model hosting server Blazor menawarkan manfaat sebagai berikut:
- Ukuran unduhan secara signifikan lebih kecil daripada aplikasi Blazor WebAssembly, dan aplikasi dimuat jauh lebih cepat.
- Aplikasi dapat memanfaatkan sepenuhnya kemampuan server, termasuk menggunakan API yang kompatibel dengan .NET Core.
- .NET Core di server digunakan untuk menjalankan aplikasi, sehingga alat .NET yang ada seperti penelusuran kesalahan berfungsi seperti yang diharapkan.
- Thin client didukung. Misalnya, aplikasi server Blazor cocok untuk browser yang tidak mendukung WebAssembly dan untuk perangkat yang dibatasi sumber daya.
- Basis kode .NET/C# aplikasi, yang menyertakan kode komponen aplikasi, tidak berfungsi pada klien.
Hosting server Blazor memiliki kelemahan sebagai berikut:
Latensi biasanya lebih tinggi. Setiap interaksi pengguna melibatkan lompatan jaringan.
Bekerja secara offline tidak didukung. Jika koneksi klien gagal, aplikasi berhenti bekerja.
Jika Anda memiliki banyak pengguna, ada tantangan dalam skalabilitas aplikasi. Server harus mengelola beberapa koneksi klien dan menangani status klien.
ASP.NET Server Core diperlukan untuk melayani aplikasi. Skenario penyebaran nirserver tidak layak (misalnya, melayani aplikasi melalui CDN).
Tutorial dimulai:
1. Pertama, buat proyek Aplikasi Blazor baru menggunakan vs2019, seperti yang ditunjukkan di bawah ini:
2. Buat komponen Razor baru dengan kode berikut:
Kita membutuhkan paket SkiaSharp untuk menghasilkan captcha base64 dan menginstalnya melalui nuget:
3. Mulai proyek, kunjungi:Login hyperlink terlihat.
Kode html yang dihasilkan terlihat seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<basis 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","deskriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="baris atas pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="ikon navbar-toggler"></span>
</button>
</div>
<div class="runtuh">
<ul class="kolom fleksibel navigasi">
<li class="item nav-px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Beranda
</a>
</li>
<li class="item nav-px-3">
<a href="counter" class="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Penghitung
</a>
</li>
<li class="item nav-px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Ambil data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="baris atas px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Tentang</a>
</div>
<div class="konten px-4">
<h3>Verifikasi</h3>
<p>
(Blazor) Contoh tentang cara menampilkan kode verifikasi dan memverifikasinya.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Perbarui</button>
<hr>
<div>Ketik angka di gambar</div>
<form>
<input type="text" style="padding:5px" />
<button>Periksa</button>
</form>
<hr>
<button>Uji Klik</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Pengecualian yang tidak ditangani telah terjadi. Lihat alat pengembang browser untuk detailnya.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Coba klik tombol, pemicu peristiwa tombol dikomunikasikan melalui SignalR, yang didasarkan pada websocket, polling, dll., Seperti yang ditunjukkan pada gambar di bawah ini:
Tautan referensi:
Login hyperlink terlihat.
|
Diposting pada 07/04/2020 11.15.36
|
|
|
|
Tuan tanah|
Diposting pada 07/04/2020 11.45.47
|
Diposting pada 15/11/2022 10.51.42
|
