Blazor — это фреймворк для создания интерактивных клиентских веб-интерфейсов с использованием .NET:
- Используйте C# вместо JavaScript для создания насыщенного, интерактивного интерфейса.
- Делитесь логикой приложений на серверной и клиентской сторонах, написанной в .NET.
- Рендерить интерфейс в виде HTML и CSS для поддержки множества браузеров, включая мобильные браузеры.
Blazor — это веб-фреймворк, разработанный для работы на стороне клиента в браузере на базе WebAssembly на базе .NET (Blazor WebAssembly) или на серверной стороне в ASP.NET Core (сервер Blazor). Для любой управляемой модели приложения и компоненты одинаковы.
Серверы Blazor
Используйте модель хостинга серверов Blazor для запуска приложений на сервере из ASP.NET Core-приложений.Обновления интерфейса, обработка событий и вызовы JavaScript осуществляются черезSignalRСвязи с процессом。
Модель хостинга серверов Blazor предлагает следующие преимущества:
- Размер загрузки значительно меньше, чем в приложении Blazor WebAssembly, и приложение загружается гораздо быстрее.
- Приложения могут полностью использовать возможности сервера, включая любые API, совместимые с .NET Core.
- Для запуска приложения используется .NET Core на сервере, поэтому существующие .NET-инструменты, такие как отладка, работают как следует.
- Тонкие клиенты поддерживаются. Например, серверное приложение Blazor подходит для браузеров, не поддерживающих Webassembly, и для устройств с ограниченными ресурсами.
- Кодовая база приложения в формате .NET/C#, включающая компонентный код приложения, не работает на клиенте.
Хостинг серверов Blazor имеет следующие недостатки:
Задержка обычно выше. Каждое взаимодействие пользователя связано с переходом по сети.
Работа офлайн не поддерживается. Если клиентское соединение не работает, приложение перестаёт работать.
Если у вас несколько пользователей, возникают сложности с масштабируемостью приложений. Сервер должен управлять несколькими клиентскими соединениями и управлять состоянием клиента.
ASP.NET Для обслуживания приложения требуются серверы ядра. Сценарии развертывания без сервера невозможны (например, обслуживание приложений через CDN).
Начинается обучение:
1. Сначала создайте новый проект приложения Blazor с использованием 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>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<ссылка href="CSS/site.css" rel="лист стилей" />
</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="переключатель навигационной панели">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="навигационная гибкая колонка">
<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="счетчик" класс="навигационная связь">
<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/" цель ="_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
|
