Blazor е рамка за изграждане на интерактивни клиентски уеб потребителски интерфейси с .NET:
- Използвайте C# вместо JavaScript, за да създадете богат, интерактивен интерфейс.
- Споделяйте логика на приложения от страна на сървъра и клиента, написана в .NET.
- Рендериране на UI като HTML и CSS за поддръжка на множество браузъри, включително мобилни браузъри.
Blazor е уеб рамка, проектирана да работи на клиентска страна в браузър на WebAssembly-базиран .NET runtime (Blazor WebAssembly) или сървърно в ASP.NET Core (Blazor сървър). За всеки управляван модел, моделите на приложението и компонентите са еднакви.
Blazor сървъри
Използвайте модела на хостинг на сървъра Blazor, за да изпълнявате приложения на сървъра от ASP.NET Core приложения.Актуализациите на потребителския интерфейс, обработката на събития и JavaScript повикванията се извършват чрезSignalRВръзки с процеса。
Моделът на хостинг на сървъри Blazor предлага следните предимства:
- Размерът на изтеглянето е значително по-малък от този на приложението Blazor WebAssembly и приложението се зарежда много по-бързо.
- Приложенията могат да се възползват напълно от възможностите на сървъра, включително използване на всякакви API-та, съвместими с .NET Core.
- .NET Core на сървъра се използва за стартиране на приложението, така че съществуващите .NET инструменти като дебъгване работят както се очаква.
- Слабите клиенти се подкрепят. Например, приложението Blazor server е подходящо за браузъри, които не поддържат Webassembly, и за устройства с ограничени ресурси.
- .NET/C# кодовата база на приложението, която включва компонентния код на приложението, не работи на клиента.
Хостингът на Blazor сървъри има следните недостатъци:
Латентността обикновено е по-голяма. Всяко взаимодействие с потребителя включва мрежов скок.
Работата офлайн не се поддържа. Ако клиентската връзка се повреди, приложението спира да работи.
Ако имате няколко потребители, има предизвикателства при мащабируемостта на приложенията. Сървърът трябва да управлява множество клиентски връзки и да управлява състоянието на клиента.
ASP.NET Core сървъри са необходими за обслужване на приложението. Сценарии за безсървърно внедряване не са възможни (например обслужване на приложения чрез CDN).
Началото на урока:
1. Първо, създайте нов проект за Blazor App, използвайки vs2019, както е показано по-долу:
2. Създайте нов компонент на Razor със следния код:
Трябва ни пакетът SkiaSharp, за да генерираме base64 captcha и да я инсталираме чрез 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" />
<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 навигационна лента-тъмна">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="колапс">
<ul class="навигационна гъвкава колона">
<li class="nav-item PX-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item PX-3">
<a href="counter" клас="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Брояч
</a>
</li>
<li class="nav-item PX-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="основен">
<div class="горен ред PX-4">
<a href="https://docs.microsoft.com/aspnet/" цел="_blank">За</a>
</div>
<div class="съдържание 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 и др., както е показано на фигурата по-долу:
Референтни връзки:
Входът към хиперлинк е видим.
|
Публикувано в 7.04.2020 г. 11:15:36 ч.
|
|
|
|
Хазяин|
Публикувано в 7.04.2020 г. 11:45:47 ч.
|
Публикувано в 15.11.2022 г. 10:51:42 ч.
|
