machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Asp.net Core Razor Tag Helper и просмотр компонентов внутри контейнера

Дата публикации Oct 3, 2019

Как майкрософтдотнет разработчик и архитектор, этот пост поможет вам понять, что такое бритвапомощник по тегама такжепросмотреть компонентиспользуя простой пример написания проекта для начинающих, используя Visual Studio и запускаем его в контейнере Docker (да, каждый артефакт MVC ядра asp.net может быть запущен внутри контейнера !!!),

NB:Razor может выглядеть как решение Microsoft для разработки веб-интерфейса с использованием .net framework, в этом случае его можно рассматривать какугловой, реагировать или vueконкурент,Полный код этого поста можно скачать с моего аккаунта на github.Вот,

Что такое компоненты Razor view?

ASP.NET Core MVCподдерживает несколько методов для создания повторно используемых компонентов пользовательского интерфейса, включая пользовательскиеTag Helpers (читай ниже),пользовательские HTML-помощники, частичные представления и новые «компоненты представления», Частичные представления и компоненты представления менее сложны для создания, чем помощники тегов и помощники HTML. Они также предоставляют преимущество возможности использовать движок Razor, чтобы помочь вам в создании вашего интерфейса. Компоненты представлений, которые являются новыми в ASP.NET Core MVC, похожи на частичные представления, но являются более мощными, поскольку они имеют свои собственные контроллеры. Это позволяет вам полностью разделить задачи и значительно упрощает модульное тестирование компонентов представления.

В приложениях обычно требуется встраивать контент в представления, которые не связаны с основной целью приложения. Типичные примеры включают инструменты навигации по сайту и панели аутентификации, которые позволяют пользователю регистрироваться
без посещения отдельной страницы. Частичные представления являются полезной функцией, но они просто содержат фрагменты директив HTML и Razor, а данные, с которыми они работают, получаются из родительского представления. Если вам нужно отобразить разные данные, то вы столкнетесь с проблемой. Вы можете получить доступ к нужным данным непосредственно из частичного представления, но это нарушает разделение интересов
это лежит в основе шаблона MVC и приводит к тому, что логика поиска и обработки данных помещается в файл представления, где она не может быть проверена модулем. Кроме того, вы могли бы расширить модели представления, используемые приложением, так
что он включает в себя данные, которые вам необходимы, но это означает, что вы должны изменить каждый метод действия, и трудно выделить функциональность методов действия для эффективного тестирования. Именно здесь вступают компоненты представления. Компонент представления - это класс C #, который предоставляет частичное представление с необходимыми ему данными независимо от родительского представления и действия, которое его отображает. В этом отношении компонент представления можно рассматривать как специализированное действие, но тот, который используется только для предоставления частичного представления с данными; он не может получать HTTP-запросы, и контент, который он предоставляет, всегда будет включен в родительское представление.

Что такое хелпер?

Для людей, пришедших с углового фронтенда,помощник по тегамможно рассматривать какугловая директиваВы можете подумать, что это простой способ внедрить пользовательский html в DOM браузера с помощью бритвенного движка. Помощники по тегам - это новая функция, представленная в ASP.NET Core MVC, и классы C #, которые преобразуют элементы HTML в представлении. Распространенные способы использования помощников по тегам включают создание URL-адресов для форм с использованием конфигурации маршрутизации приложения, обеспечение согласованного стиля элементов определенного типа и замену пользовательских сокращенных элементов на часто используемые фрагменты содержимого. В ядре MVC asp.net есть много встроенных помощников тегов, которые мы можем использовать «из коробки» для создания пользовательского интерфейса, но в этом посте мы попытаемся создать собственный для демонстрации.

Давайте создадим пример, используя Visual Studio, чтобы уточнить, что именнопомощник по тегама такжепросмотреть компонентыможно использовать, чтобы сделать. Примером являетсяОсновной проект asp.net MVC, работающий в докереконтейнер и содержат обычайGridView / DataListпомощник по тегам(для быстрого развития мы, как разработчик Microsoft, можем использовать сторонние компоненты, такие какдевэкспресс или телерикКомпонент пользовательского интерфейса для создания gridview (сторона внешнего интерфейса) и компонент представления облачных тегов, который может быть встроен в нашу веб-страницу.

Открытая визуальная студия (Я использую Visual Studio 2017) и выберите Файл ➤ Новый проект. Выберите шаблон ASP.NET Core Web Application (.NET Core) (см. Первое изображение ниже), установите имя проекта какCustomGridviewAndTagCloud, на второй странице выберите «WEB-приложение (MVC)И убедитесь, что ваш диалог выглядит как второе изображение ниже (Я использую asp.net core 2.2 в этом примере). Облако тегов основано на компоненте просмотра бритвы, который выделяет большинство жанров песен на музыкальном веб-сайте, а gridview построен из помощника тегов бритвы для отображения песен в сетке стиля Excel.

После создания решения, вашПроект / решениебудет выглядеть как на изображении ниже

Проект решения - это классическая структура проекта dotnet MVC, но есть еще одна вещь:файл докерагенерируется визуальной студией, которую можно копироватьВот

Попробуем еще раз объяснить этот сгенерированный файл Docker. Как я описал во время моего последнегопосле: Наш файл Docker начинается с чтения базового образа из образа ядра Microsoft 2.2 в общедоступном реестре Docker, как вы можете видеть влиния 1Visual Studio автоматически дает псевдоним базовому образу вызова «базаТаким образом, мы создаем многошаговое изображение, которое является простым способом уменьшить конечный размер изображения, удаляя во время сборки весь файл и инструмент, ненужный для запуска нашего веб-приложения, такого как asp.net core sdk и т. Д., Затем встрока 2Visual Studio создает директорию внутри контейнера и инструктирует докер выполнять все последующие команды внутри этой директории.Линия 3и выставить контейнерные порты 80 и 443 наружу (хост-система) и встрока 6мы загружаем новый базовый образ dotnet core 2.2, содержащий sdk и инструменты, для создания нашего веб-приложения с псевдонимом «строить»,строка 7создайте новый рабочий каталог с вызовом «src» внутри контейнера и встрока 8, 9мы просто копируем файл в каталог corrent host в докер и используем sdk для сборки приложения, строка напоминания самоочевидна,линии 14 и 15Здесь мы используем промежуточное изображение для создания версии выпуска нашего веб-приложения из «шага сборки псевдонима» и из строкиС 17 до 19мы возвращаемся к нашему исходному базовому образу, копируем все, что мы строим, из промежуточного образа в директории «app», созданной встрока 2 и строка 20, при запуске процесса контейнера мы запускаем наше веб-приложение.

В нашей папке решений перейдите к toWwwroot / CSSпапку и добавьте ниже CSS кsite.css, это поможет нам хорошо оформить наше tagcloud. скопировать его изВот

Компоненты представления состоят из класса компонента представления, который действует аналогично контроллеру, и одного или нескольких представлений Razor. Представления Razor, используемые в компоненте представления, являются обычными страницами представления Razor и могут быть строго типизированы, как и любое другое представление Razor. Чтобы упростить логику представления и добавить дополнительную гибкость при разработке проекта, вы создадите набор классов моделей, которые будут отделять данные, передаваемые представлению, от базовой модели данных. Так что давай внутриКаталог моделейCreate и создатьКласс TagCloud, которая будет определять общую структуру и инкапсулировать некоторые вычисления, необходимые для генерации облака тегов. Вы можете скопировать код изВот:

не беспокойтесь о текущей ошибке Visual Studio, затем создайте внутри той же папки еще один вызов классаTagCloudItem, будет представлять отдельные элементы в облаке тегов со свойствами для отображаемого текста, URL-адреса и веса. Вы можете скопировать его изВот:

Создайте новую папку с именемViewComponentsвнутри папки решения, а затем добавить добавить в классе «TagCloudViewComponent”Потому что компоненты View требуют класса компонента view, который действует как контроллер и содержит одно или несколько представлений. скопировать код изВотобратите внимание, что в этом коде мы используем объект DataContext для извлечения данных Songs и Genres из коллекции в памяти, сгенерированной на лету, полный кодВотс моего аккаунта на github.

Как мы видим, имена классов компонентов View должны заканчиватьсяViewComponent или используйте ViewComponentAttributeчтобы они были распознаны ASP.NET Core MVC как компоненты представления. В большинстве случаев использование соглашения об именах будет лучшим выбором, так как это облегчит идентификацию классов компонентов представления в вашем проекте.

Все классы компонентов представления должны быть производными отViewComponentучебный класс. Кроме того, они должны реализовать метод Invoke. Метод Invoke может принимать ноль или более аргументов. Аргументы могут использоваться для передачи данных компоненту из представления. Здесь мы не передаем никакой аргумент методу Invoke, мы просто запрашиваем нашу коллекцию in.memory, чтобы извлечь наши данные и построить базу модели tagcloud на основе того, какие данные мы извлекаем из коллекции.

Следующим шагом является создание представления, которое будет использоваться для генерации HTML-кода, составляющего облако тегов. Представления представлений компонентов должны быть помещены в папку с именем Components. Если ваш компонент представления должен использоваться со многими контроллерами, он должен быть помещен вViews \ Shared \ Componentsпапки; в противном случае его можно поместить как подпапку в папку Views для целевого контроллера. В этом примере, поскольку облако тегов будет использоваться только на домашней странице, вы создадите папку «Компоненты» в папке «Views \ Home». Итак, давайте создадим папку с именем Components внутри папки View \ Home и добавим подпапку внутри этой папки с именем TagCloud и, наконец, добавим бритвенное представление ( файл cshtml) в последнюю папку, как показано на рисунке ниже:

Вы можете скопировать исходный код default.cshtml изВот, Он также присутствует в исходном коде из моего репозитория github.

Теперь замените содержимое «view.cshtml" вПросмотр \ Homeпапка с содержаниемреввызвать компонент просмотра.

Как вы можете видеть, мы изменили только представление, и ничего не изменилось в HomeController, поэтому запустите проект, нажав на «докер», как показано на рисунке ниже:

Вот, пожалуйста, Visual Studio вызовет демон docker, и он будет строить строку за строкой базу изображений в файле docker и запускать наше веб-приложение внутри контейнера.

Следующий пример - создание списка данных, подобного управляющему элементу веб-формы asp.net.

Помощники тегов являются производными от класса TagHelper, который определяется вMicrosoft.AspNetCore.Razor.TagHelpersПространство имен. Идея, лежащая в основе этого примера, состоит в том, чтобы создать собственный помощник по тегам и вложить его с компонентами представления в качестве элементов. Datalist покажет всех художников на веб-сайте и просто вставит в это представление index.cshtml бритвы с этимотрывок:

Вы можете скачать полный исходный код с моего аккаунта на github.Вот

Итак, создайте новую папку с именемTagHelpersпод под проектом и добавьте класс в папку с именемColumnListTagHelper является производным от базового класса TagHelper (скопируйте код из репозитория github по ссылке выше), Чтобы настроить помощник по тегам для выполнения компонента представления, Когда Razor выполняет компонент представления, он использует экземплярIViewComponentHelper.Этот экземпляр передается в Razor с помощью внедрения зависимостей. Чтобы Tag Helper выполнил компонент представления, ему также нужно будет передать ему экземпляр IViewComponentHelper. Кроме того, вам также потребуется получить копию контекста представления и использовать ее для контекстуализации экземпляра IViewComponentHelper. Код самообъясним, и из источника видно, что мы пытаемся создать элемент управления стиля DataList веб-формы asp.net внутри помощника тега. Подводя итогProcessAsyncМетод, в котором вся работа выполняется для создания выходных данных элемента управления.

Помощник по тегам использует пользовательский компонент представления под названием «ArtistCard», Как мы делали раньше с tagcloud, продолжаем создавать компоненты этого вида, но теперь часть бритвы будет помещена в общую папку (см. Полное решение на github), структура вашего решения будет выглядеть следующим образом:

Теперь, если вы скопировали код в мой репозиторий github и передали его в свой проект, пришло время создать и запустить решение в Docker, и мы сделали:

Как вы можете видеть, с помощью тега helper (см. Изображение ниже) мы создали простой, но полезный элемент управления списком данных, чтобы показать коллекцию данных в памяти, это просто еще один способ вставить в вывод html некоторые пользовательские инструкции.

Я надеюсь, что этот пост был полезен, потому что мы пытаемся использовать Visual Studio для генерации файла Docker, а также объясняем, что такое компоненты представления и помощник по тегам в ядре asp.net MVC, написав простой пример. В нашей будущей публикации мы попытаемся развернуть такое же решение для решения Microsoft Azure PAAS, как веб-приложение Azure, экземпляр контейнера Azure или Azure AKS (служба Azure Kubernetes).

Просто проголосуйте за пост, и вы также можете подписаться на менящебетнаfacebook, а такжеLinkedIn,

NB: полезная книга, которую вы можете прочитать по этой теме: ApressОсновные рецепты Asp.net от Джона Килибертии апрессПро Asp.net ядро ​​MVC 2 от Адама Фримена

С уважением

Оригинальная статья

Footer decor

© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map