Blazor — це фреймворк для створення інтерактивних клієнтських веб-інтерфейсів із використанням .NET:
- Використовуйте C# замість JavaScript для створення багатого, інтерактивного інтерфейсу.
- Діліться логікою додатків на стороні сервера та клієнта, написаною в .NET.
- Рендерити інтерфейс у форматі HTML та CSS для підтримки численних браузерів, включно з мобільними браузерами.
Blazor — це вебфреймворк, розроблений для роботи на стороні клієнта в браузері на WebAssembly на базі .NET runtime (Blazor WebAssembly) або на серверній стороні в ASP.NET Core (сервер Blazor). Для будь-якої керованої моделі моделі додатків і компонентів однакові.
Сервери Blazor
Використовуйте модель хостингу серверів Blazor для запуску додатків на сервері з ASP.NET Core apps.Оновлення інтерфейсу, обробка подій та виклики JavaScript здійснюються черезSignalRЗв'язки з процесом。
Модель хостингу серверів Blazor пропонує такі переваги:
- Розмір завантаження значно менший, ніж у додатку Blazor WebAssembly, і додаток завантажується значно швидше.
- Додатки можуть повністю використовувати можливості сервера, зокрема використовувати будь-які API, сумісні з .NET Core.
- .NET Core на сервері використовується для запуску додатку, тому існуючі .NET-інструменти, такі як налагодження, працюють як треба.
- Худі клієнти підтримуються. Наприклад, серверний додаток Blazor підходить для браузерів, які не підтримують Webassembly, а також для пристроїв з обмеженими ресурсами.
- Кодова база додатку .NET/C#, яка містить компонентний код додатку, не працює на клієнті.
Хостинг серверів Blazor має такі недоліки:
Затримка зазвичай вища. Кожна взаємодія з користувачем передбачає мережевий стрибок.
Офлайн-робота не підтримується. Якщо клієнтське з'єднання не працює, додаток перестає працювати.
Якщо у вас кілька користувачів, виникають труднощі з масштабованістю додатків. Сервер повинен керувати кількома клієнтськими з'єднаннями та працювати зі станом клієнта.
ASP.NET Для обслуговування додатку потрібні сервери ядра. Безсерверні сценарії розгортання нереалістичні (наприклад, обслуговувати додатки через CDN).
Починається навчання:
1. Спочатку створіть новий проєкт Blazor App за допомогою vs2019, як показано нижче:
2. Створіть новий компонент Razor з таким кодом:
Нам потрібен пакет SkiaSharp, щоб згенерувати капчу base64 і встановити її через nuget:
3. Розпочніть проєкт, відвідайте:Вхід за гіперпосиланням видно.
Згенерований html-код виглядає так:
<!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="бічна панель">
<div class="верхній ряд PL-4 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 клас="nav-item PX-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<LI клас="nav-item PX-3">
<a href="лічильник" клас="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Лічильник
</a>
</li>
<LI клас="nav-item PX-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Завантажити дані
</a>
</li>
</ul>
</div>
</div>
<div class="основний">
<div class="верхній ряд PX-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Про</a> нас
</div>
<div class="content px-4">
<h3>Верифікація</h3>
<p>
(Блейзор) Приклад того, як показати код перевірки та його перевірити.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Оновлення</button>
<hr>
<div>Введіть номер на зображенні</div>
<form>
<input type="text" style="padding:5px" />
<button>Перевірено</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Відбувся невирішений виняток. Дивіться інструменти розробки браузера для деталей.
<a href="" class="перезарядка">Перезарядка</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Спробуйте натиснути кнопку — тригер події кнопки передається через SignalR, який базується на websocket, polling тощо, як показано на рисунку нижче:
Посилання на посилання:
Вхід за гіперпосиланням видно.
|
Опубліковано 07.04.2020 11:15:36
|
|
|
|
Орендодавець|
Опубліковано 07.04.2020 11:45:47
|
Опубліковано 15.11.2022 10:51:42
|
