Блейзор

Полная веб-разработка на C# и WebAssembly

Что такое Блазор

Blazor — это экспериментальная веб-инфраструктура .NET, использующая C# и HTML и работающая в браузере. Это фреймворк одностраничного веб-приложения (SPA).

Блейзор? Бритва?

Почему имена Blazor и Razor так похожи? Каковы их отношения? В любом случае, давайте сначала напишем что-нибудь в Razor.

Если мы хотим отобразить несколько раз <p>Hello</p> в Razor, мы создадим файл .cshtml и будем использовать цикл «for» с содержимым HTML-тега «p» «Hello» следующим образом.

@{
    for (int i = 0; i < 3; i++)
    {
        <p>Hello</p>
    }
}

Это очень просто. А как это сделать в Blazor? Мы создаем файл .cshtml и используем цикл «for» с содержимым HTML-тега «p» «Hello».

@{
    for (int i = 0; i < 3; i++)
    {
        <p>Hello</p>
    }
}

Это абсолютно то же самое!!

Итак, Blazor равен Razor?

Позвольте мне объяснить, что они на самом деле сделали в Blazor и Razor, и увидеть разницу между ними.

И Razor, и Blazor запускали цикл «for» три раза, Razor выполнял это в бэкэнде и отвечал браузеру на полный HTML-контент, но Blazor отвечал браузеру на файл .dll, позволяя браузеру выполнить цикл «for», а затем визуализировать HTML-контент. . Итак, видите разницу между Blazor и Razor?

Тот же способ написания, но один выполняется в бэкэнде, а другой — в браузере.

Браузер + Razor = Blazor!!

Отсюда и пошло название «Блейзер».

Что может Блазор?

Как упоминалось ранее, Blazor — это платформа SPA, такая же, как Vue, React и т. Д. Платформа SPA имеет некоторые функции, такие как компоненты, односторонняя привязка, двусторонняя привязка, маршрутизатор и т. Д. Может ли Блазор сделать это?

Ответ положительный. Давайте покажем, как это сделать в Blazor.

Компонент

Мы обычно разбиваем веб-страницу на множество мелких частей, которые имеют свою собственную функцию и могут быть повторно использованы, мы называем их компонентами. Компонент может быть кнопкой, вводом или контейнером, что угодно может быть компонентом на веб-странице.

Файл cshtml — это компонент Blazor, а имя файла — это имя их компонента. У него есть собственная модель, реквизит, маршрут, функции, рендеринг и жизненный цикл. Компонент «Hello» выглядит следующим образом.

«Hello.cshtml» — это имя его файла, поэтому имя компонента — «Hello».
@page "/hello" — это его маршрут, когда запрос {domain}/hello отобразит этот компонент.
Снаружи @function{...} находится его часть рендеринга, мы можем сделать там некоторую программную логику.
string Parameter1 {get; set;} это его реквизит, могут передать родители.
privte int Count = 3 — это его модель, как и состояние в React.
жизненный цикл: OnInit(), OnInitAsync(), OnParametersSet(), OnParametersSetAsync(), OnAfterRender(), OnAfterRenderAsync(), ShouldRender().

Если мы хотим использовать компонент в другом компоненте, просто используйте его как тег HTML, а атрибут — это то, как он передает реквизит дочернему компоненту.

Односторонняя привязка

При изменении состояния модели представление изменится, это называется односторонней привязкой. В следующем примере показано, как выполнить одностороннюю привязку в Blazor.

В компоненте «счетчик» есть кнопка «Нажми меня», событие onclick вызовет функцию IncrementCount() и увеличит переменную currentCount. Когда переменная currentCount будет изменена, представление <p>Current count: @currentCount</p> будет перерисовано.

Часть IncrementCount() запускается событием onclick, она не привязывается автоматически, она автоматически привязывает только часть повторного рендеринга, поэтому она называется односторонней привязкой.

Двусторонняя привязка

Как упоминалось выше, если часть события автоматически привязывается, то представление изменяется, стадия модели изменяется, а состояние модели изменяется, представление изменяется, это двусторонняя привязка.

Образец двустороннего связывания показан следующим образом. Мы создаем элемент input и используем атрибут bind для связывания значения input и переменной number вместе, и визуализируем i в соответствии со значением number.

Получить данные

Обычно мы используем jQuery $.ajax или fetch для получения данных. Мы используем мощную платформу .Net в Blazor, и она содержит много библиотек. Нам просто нужно внедрить HttpClient, затем мы можем использовать GetJsonAsync<T>() для получения данных в нашем коде, и да, мы также можем автоматически создать класс и сопоставление между данными и классом.

И?

Что еще может сделать Blazor? Конечно, не забывайте о фреймворке .Net. filter, map, find, sort в Javascript можно заменить на LINQ, setInterval можно заменить на Timer, функцию обратного вызова можно заменить на delegate, 0,1 плюс 0,2 НИКОГДА не будет равно 0,300000000000000004! Самое главное, что мы можем написать C# и запустить его в браузере!

SQL?

Что насчет SQL? Наиболее часто используемая функция в .NET. Может ли Blazor разрешить браузеру подключаться к SQL? Давайте попробуем. Используя SqlClient подключение к локальному серверу SQL, в случае успешного открытия на странице будет отображаться сообщение об успешном завершении, в противном случае будет отображаться сообщение об ошибке.

После запроса этой страницы я получил следующее сообщение.

Как это работает

Когда я запрашиваю http-сервер, он отвечает «blazor.webassembly.js», «mono.js», «mono.wasm» и какой-то файл .Net dll. Как браузер может выполнить файл dll! Удивительный!