В этом руководстве основное внимание будет уделено объяснению того, что такое Blazor, а также различий между сервером Blazor и веб-сборкой Blazor. Кроме того, в нем также объясняется, как сделать запрос API на сервере Blazor.
Что такое Блазор?
Во-первых, Blazor — это фреймворк, который используется для создания UI-приложений с использованием фреймворка .NET, C# и HTML. Blazor использует «Компоненты» для хранения кода, который может быть помещен внутри других компонентов, чтобы разделить код, что позволяет создавать более мелкие и краткие файлы, которые можно использовать в качестве пакетов Nuget или внешних библиотек. Преимущества Blazor включают в себя возможность писать код C#, который встроен в HTML вместо JavaScript, а также у вас есть возможность воспользоваться широким спектром предлагаемых пакетов Nuget, а также возможность использовать масштабируемость. и преимущества производительности, которые предлагает .NET.
В этом уроке я буду использовать серверное приложение Blazor.
Во-первых, нам нужно будет создать проект Blazor, поэтому откройте предпочитаемый вами редактор (мой — Rider) и выберите создание серверного приложения Blazor. В Rider есть 2 раздела слева от мастера при выборе проекта для создания. Один для «.NET Core», а второй для «.NET». Я выбрал параметр «Веб-приложение ASP .NET Core», а затем в раскрывающемся списке «Тип» выберите Blazor Server.
Вас встретит целый ряд файлов, включая «Program.cs» и «Startup.cs», описание которых будет приведено в ближайшее время.
Введение в API
API, который я буду использовать для этого урока, представляет собой поддельный API данных, который можно найти по этому адресу.
Конечная точка, которую мы будем вызывать, это https://jsonplaceholder.typicode.com/posts и она будет получать свойства userId, id, title и body.
Что такое Startup.cs и Program.cs?
Файл запуска присутствует только в приложении Blazor Server и не находится в приложении Blazor WebAssembly. Однако файл программы присутствует в обоих проектах. Файл запуска используется для инициализации служб, необходимых для запуска приложения, по умолчанию в файле запуска есть служба «WeatherForecastService».
Вы заметите, что «WeatherForecastService» использует «services.AddSingleton», что является одним из трех жизненных циклов, которые можно отнести к службе. Назначение «AddSingleton» состоит в том, чтобы внедрение зависимостей создавало только один экземпляр службы во время startup.cs и повторно использовало этот объект во всех вызовах службы в системе.
Помимо «AddSingleton», есть также «Scoped» и «Transient».
Transient. Всякий раз, когда компонент или контроллер API извлекает экземпляр службы, который добавляется с помощью «transient» из контейнера службы, он получает новый экземпляр службы. .
Ограниченный – службы с заданным временем существования создаются один раз для каждого запроса и повторно создают службы при каждом HTTP-запросе, однако указанное время существования не поддерживается в сообщениях канала SignalR. Службы с ограниченной областью действия не восстанавливаются при переходе между компонентами на клиенте. Однако службы восстанавливаются, когда пользователь закрывает окно браузера, закрывает вкладку или обновляет браузер.
Файл Program.cs — это точка входа для серверного приложения Blazor, которое настраивает службы уровня узла, такие как ведение журнала и внедрение зависимостей. Файл Blazor WebAssembly Program.cs также делает что-то подобное, однако файл Blazor WebAssembly Program.cs не создает HTTP-сервер, поскольку приложение выполняется в браузере, тогда как сервер Blazor запускается на сервере.
Начинаю писать код
Хорошо, время для некоторого кода, поэтому наш первый призыв к действию — добавить службу HttpClient в файл Startup.cs, поскольку серверное приложение Blazor не включает службу по умолчанию. HttpClient позволит нам отправлять http-запросы и получать ответы, чтобы манипулировать ими, чтобы показать их пользователю.
Поэтому откройте файл Startup.cs и в методе ConfigureServices введите приведенный ниже код под «AddSingleton‹WeatherForecastService›();»
services.AddHttpClient();
После того, как вы закончите это, щелкните правой кнопкой мыши имя проекта и найдите параметр с именем (или похожим) «Добавить», в этом меню есть дополнительные параметры. Я использую Rider, поэтому мне нужно нажать «Компонент Blazor».
Назовите файл, например, «BlazorWebApiCall». Первое, что мы сделаем, это дадим компоненту URL-адрес, который может быть доступен в приложении. Для этого перейдите к верхней строке файла и введите ниже.
@page "/call-web-api"
Это означает, что когда мы запускаем приложение, мы можем либо ввести «call-web-api» (исключая кавычки) в веб-браузере после URL-адреса по умолчанию, либо создать кнопку для перехода на страницу href.
Кроме того, в этом руководстве мы не будем использовать какие-либо пакеты Nuget, такие как Newtonsoft, а вместо этого будем придерживаться встроенных пространств имен.
Кроме того, теперь нам нужно включить в наш файл нужные нам расширения. Это System.Text.Json и System.Text.Json.Serialization.
Пространство имен System.Text.Json дает нам возможность обрабатывать JSON и сериализовать/десериализовывать объекты в JSON и обратно.
Между тем, нам также необходимо внедрить зависимость в этот файл, и эта зависимость является зависимостью IHttpClientFactory. IHttpClientFactory можно использовать, если вы хотите управлять несколькими экземплярами HttpClient. В этом руководстве мы будем использовать только один экземпляр, но для частого использования. случаях необходимо будет сделать несколько вызовов API для каждого компонента.
@inject IHttpClientFactory ClientFactory
Когда вы создали свою страницу, компонент Blazor должен был создать пространство «@code», чтобы вы могли ввести код C#.
В этих фигурных скобках введите следующий класс.
public class FakeData
{
public int userId { get; set; }
public int id { get; set; }
public string body { get; set; }
public string title { get; set; }
}
Приведенный выше класс соответствует данным и их свойствам, которые будут возвращены из API, поэтому мы сможем десериализовать возвращенный ответ из API в объект этого класса.
Поскольку ответ от API будет возвращать более 1 записи, нам нужно создать переменную списка типа FakeData.
public List<FakeData> fakeDataList = new List<FakeData>();
Ниже этой переменной используйте метод жизненного цикла Blazor «защищенное переопределение асинхронной задачи OnInitializedAsync», чтобы сделать запрос к API. Этот метод жизненного цикла запускается при первом рендеринге компонента, поэтому это идеальное время для вызова API, чтобы мгновенно отобразить данные, которые нам нужно показать пользователю.
protected override async Task OnInitializedAsync()
{
}
Внутри «OnInitializedAsync» создайте переменную с именем «apiRequest» и установите ее равной « HttpRequestMessage». Первый параметр «HttpRequestMessage» — это тип метода, т. е. GET, DELETE, а второй параметр — это URL-адрес, который мы хотим запросить.
var request = new HttpRequestMessage(HttpMethod.Get, "https://jsonplaceholder.typicode.com/posts");
Теперь нам нужно создать переменную с именем client, которая создает экземпляр HttpClient.
var client = ClientFactory.CreateClient();
После создания экземпляра HttpClient нам нужно отправить запрос, а затем поместить ответ на запрос в переменную с возвращаемым типом этой переменной «HttpResponseMessage». сделайте это с помощью приведенного ниже кода.
var response = await client.SendAsync(request);
После этого мы можем выполнить проверку переменной «response», чтобы убедиться, что запрос был выполнен успешно, и если это так, мы можем начать читать поток ответов, это полезно для возможности изящной обработки ошибок на со стороны пользовательского интерфейса, так как мы могли бы поместить оператор else после «if», чтобы показать пользователю сообщение об ошибке, указывающее, что запрос не был успешно выполнен.
if (response.IsSuccessStatusCode)
{
}
Внутри этого «если» мы создадим переменную, содержащую содержимое ответа API в виде потока данных.
await using var responseStream = await response.Content.ReadAsStreamAsync();
После этого мы установим переменную списка равной переменной «responseStream», которая была асинхронно десериализована в тип «List‹FakeData›”
fakeDataList = await JsonSerializer.DeserializeAsync<List<FakeData>>(responseStream);
Теперь мы закончили большую часть кода C# и получили данные API, теперь мы можем посмотреть на использование этих данных, чтобы показать их пользователю в красивой форме.
Итак, теперь вне блока «@code» используйте html-тег «table» и класс «table table-striped». ”
<table class="table table-striped"> </table>
После этого нам нужно добавить необходимые заголовки таблицы, которые будут соответствовать свойствам данных, возвращаемых из API.
<thead>
<tr>
<th>User id</th>
<th>id</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
Теперь после «thead» нам нужно добавить «tbody», чтобы содержать основное содержимое таблицы. Внутри «tbody» нам нужно перебрать «fakeDataList» с переменной «element». Внутри этого цикла напишите «tr» с тегами «td» внутри него, поэтому, когда каждый элемент зацикливается, в таблице создается новая строка с необходимыми данными с «@element», используемая для доступа к свойствам в «FakeData». " сорт
@foreach (var element in fakeDataList)
{
<tr>
<td>@element.userId</td>
<td>@element.id</td>
<td>@element.title</td>
<td>@element.body</td>
</tr>
}
Теперь введите «‹/tbody›» вне цикла for и запустите свой проект.
В адресной строке введите «/call-web-api» после исходного URL-адреса и нажмите Enter, вы должны увидеть что-то вроде показанного ниже на экране с ответом API внутри HTML-таблица.
Прошло очень много времени с тех пор, как я создал статью (думаю, я говорил это несколько раз, ха), но приятно вернуться, и я надеюсь, что люди найдут эту статью полезной, если вы думаете, что я могу сделать что-то лучше, то пусть меня знают в ответах, и я постараюсь включить это в свои будущие статьи.
Еще раз спасибо!
Смотрите мой блог — https://simplyreact.uk/
