Я .
Net-разработчик в компании «Туркмен-Транзит».
Моему премьер-министру нужен был кто-то, кто хотел бы попробовать Blazor. На мой взгляд, я проделал хорошую работу в этой области.
В ходе исследования я столкнулся с проблемами, ответы на которые не так-то просто было найти в русскоязычном Интернете.
Почему Blazor, а не стандартный JavaScript?
Проще говоря, технология Blazor позволяет создавать веб-приложения, клиентская часть которых состоит из HTML-разметки и кода на C# вместо JavaScript.
Blazor может получить доступ к DOM для повторной визуализации страницы без ее обновления.
Веб-приложение Blazor состоит из компонентов.
Компоненты предназначены для отображения визуальных элементов, таких как индикаторы загрузки или формы загрузки файлов.
Разметка элемента хранится в файле с расширением .
razor, а вся логика хранится в обычных классах C# с именем {ComponentName}.
razor.cs. Компоненты в Blazor делятся на умные и тупые.
«Глупые» компоненты независимы от всего приложения, их можно подключать к другим компонентам и даже использовать другие «глупые» компоненты.
Смарт-компоненты одноразовые, они должны сохранять свое состояние и очень редко используются в других компонентах.
Чаще всего вам придется писать умные компоненты.
В Blazor вы можете вызывать функции JavaScript с помощью кода C# и наоборот, вы можете вызывать методы .
Net с помощью JavaScript. Да, если вы обладаете глубокими знаниями JavaScript, знакомы с JavaScript-фреймворками и только познакомились с миром .
Net, то в Blazor лучше не лезть, технология относительно новая и вы можете испугаться при первом использовании.
встретиться с этим.
Цель статьи — рассказать людям, знающим C#, но по каким-то причинам не знающим JavaScript, о его перспективном аналоге от Microsoft, в котором можно позволить себе использовать все возможности языка C#.
Например, мы разработаем CRM со списком компаний, которые потенциально могут быть нашими партнерами, с автоматизацией поиска сотрудников компании, автоматизацией рассылки сообщений всем потенциальным клиентам, протоколированием действий пользователей и многим другим.
Начало работы
Прежде чем описывать возможности Blazor, хочу совершить краткую экскурсию по самой структуре проекта.Давайте создадим проект веб-приложения ASP .
NET Core, используя шаблон MVC. В этом проекте мы будем придерживаться правил трехуровневой архитектуры.
Многоуровневая архитектура состоит из трех слабосвязанных и взаимодействующих уровней: уровня данных, бизнес-уровня и уровня представления.
Мы реализуем базовые модели уровня данных.
Категории:
Журналы:public class Company { public int Id { get; set; } public string CompanyLegalName { get; set; } public string TradingName { get; set; } public int HGBasedInCountryId { get; set; } public Country HGBasedInCountry { get; set; } public string LeadOwnerId { get; set; } public User LeadOwner { get; set; } public int QualificationId { get; set; } public CompanyQualification Qualification { get; set; } public string Website { get; set; } public DateTime QualifiedDate { get; set; } public int? CompanyLinkedinId { get; set; } public Linkedin CompanyLinkedin { get; set; } public virtual List<CompanyContactLink> CompanyContactLinks { get; set; } public virtual List<Log> Logs { get; set; } }
public class Log
{
public int Id { get; set; }
public string Action { get; set; }
public string UserId { get; set; }
public User User { get; set; }
public int? CompanyId { get; set; }
public Company Company { get; set; }
public DateTime CreatedDate { get; set; } = DateTime.Now;
}
Бизнес-уровень будет содержать наши DTO и сервисы.
Для поиска контактов компании было решено использовать API сервиса Hunter.io, а для настройки рассылок — app.lemlist.com.
Опишем простой интерфейс IHunterIntegrationService: public interface IHunterIntegrationService
{
Task<IEnumerable<Contact>> FindDomainContacts(string DomainName);
}
Для получения списка контактов вам необходимо будет отправить POST-запрос с указанием домена сайта и секретного ключа сервиса: 
В результате сервис выдаст нам ответ в виде: 
Все, что нам нужно сделать, это добавить HunterResponseDTO.data.email в контакты компании и отобразить их.
И вот здесь нам понадобится Блазор.
Давайте добавим каталог Components и компонент Main.razor в наш проект на уровне презентации.
Теперь нам нужно сделать следующую разметку: 
Компонент Blazor поддерживает теги HTML и код C#.
То есть у нас есть возможность отображать часть разметки в цикле:
Переменные могут быть объявлены в директиве код : 
А вот как связаны пространства имен: 
Blazor поддерживает внедрение зависимостей; для этого, как и в любом проекте .
Net Core, нужно прописать его в классе Startup в ConfigurationServices, и применить директиву в самом компоненте вводить : 
Blazor имеет возможность обрабатывать события.
Например: 
В этом случае при нажатии на заголовок текст заголовка меняется.
Но загромождать разметку кодом — неправильный подход. Для кода C# создайте класс Main.razor.cs в той же папке, что и компонент Main.razor, и используйте директиву наследует Мы связываем класс с компонентом.
Теперь нам необходимо переместить все использования, внедрения, методы и переменные в класс MainBase. Переменные или методы, если их необходимо использовать в компоненте, должны быть защищены или общедоступны.
Все службы внедряются с атрибутом [Inject].
В EntityFramework по умолчанию контекст базы данных регистрируется как служба с ограниченной областью действия.
А компонент Blazor не будет создавать новый запрос каждый раз при обращении к базе данных, поэтому в случаях, когда вы инициируете новый доступ к базе данных, а предыдущий не завершился, возникнет исключение: 
Решение состоит в том, чтобы использовать новую область видимости и создавать в ней экземпляры сервисов, использующих DbContext: using (var scope = ServiceScopeFactory.CreateScope())
{
var _logService = scope.ServiceProvider.GetService<ILogService>();
await _logService.AddLog(logDTO);
}
Чтобы избежать частых запросов к базе данных, мы регистрируем синглтон-сервис ISingleTemp со следующими полями: public interface ISingleTemp
{
IEnumerable<CompanyDTO> AllCompanies { get; set; }
IEnumerable<ContactDTO> Contacts { get; set; }
IEnumerable<CompanyModel> CompanyModels { get; set; }
IEnumerable<CompanyContactLink> CompanyContactLinks { get; set; }
IEnumerable<Linkedin> Linkedins { get; set; }
IEnumerable<CountryDTO> Countries { get; set; }
IEnumerable<LogDTO> Logs { get; set; }
IEnumerable<RegionDTO> Regions { get; set; }
}
И при первом запуске программы заполните все поля.
Если изменяется коллекция с какой-либо сущностью, то перезаписываются только связанные с ней поля.
Например, при добавлении контакта для компании перезаписываются только поля «Контакты» и «CompanyContactLinks», и все пользователи могут запрашивать список контактов для компаний, не обращаясь к базе данных.
Теперь давайте отобразим нашу коллекцию компаний, используя цикл foreach: 
При нажатии на элемент div с классом элемента компании срабатывает обработчик событий.
по щелчку который будет вызывать метод SelectCompanyElement. SelectCompanyElement установит SelectedId в идентификатор выбранной компании, найдет компанию по идентификатору из коллекции компаний и отобразит информацию и список контактов для этой компании.
Некоторые операции могут выполняться очень долго, и чтобы показать пользователю, что программа работает над длительной операцией, нужно отобразить индикатор загрузки.
Для этого я нашел компонент SpinLoader. Чтобы использовать его, вам необходимо загрузить пакет NuGet Radzen.Blazor. SpinLoader — дурацкий компонент, о котором я говорил в начале статьи.
Он очень прост в использовании, вам просто нужно добавить тег SpinLoader с параметром isLoading. 
Пока isLoading == true, загрузчик будет отображаться: 
Заключение
В этой статье мы познакомились с фреймворком Blazor. Мы могли бы поговорить о том, как сообщить компоненту, что ему необходимо повторно отрисовать себя, об авторизации в Blazor и многом другом, но это темы для других статей.И я не претендую на то, что мое решение самое правильное.
Возможно, этот продукт можно было бы реализовать гораздо правильнее, оптимальнее и быстрее, с Blazor или без него.
В любом случае я надеюсь на светлое будущее этой платформы.
Спасибо за внимание! Теги: #C++ #.
NET #.
net core #blazor
-
Защита От Утечки Ipv6 С Помощью Torguard Vpn
19 Oct, 24 -
Новый Стив Балмер
19 Oct, 24 -
Godaddy Открывает Платформу Подкастов
19 Oct, 24 -
Как Часто Вы Пользуетесь Хабрамэйлом?
19 Oct, 24 -
Социальная Коммерция И Социальный Шопинг
19 Oct, 24 -
Dokku: Самый Маленький Paas
19 Oct, 24
