ASP. NET Core Simple Razor Page WebApp - добавление раскрывающегося списка динамического c в верхнюю строку меню - PullRequest
Новая
       43

ASP. NET Core Simple Razor Page WebApp - добавление раскрывающегося списка динамического c в верхнюю строку меню

0 голосов
/ 06 мая 2020

Я создал очень простое ASP. NET Core 3.1 WebApp, которое использует страницы Razor, а не MVC. Я хочу добавить раскрывающийся список Dynami c в верхнюю строку меню, которая используется всеми остальными страницами. Я добавил необходимый HTML в _Layout.cs html, поэтому у меня появляется красивый раскрывающийся список вместе с другим содержимым моего меню (Home, About, et c) - см. Ниже.

What есть ли у меня варианты добавления кода, который заполняет раскрывающийся список в моем файле _Layout.cs html?

image

1 Ответ

0 голосов
/ 07 мая 2020

Разумным решением является создание View Component , а затем добавление его в _Layout.cs html. Я нашел хорошее пошаговое руководство Питера Келлнера (Progress) , которое помогло мне на моем пути. По сути, мое решение включало:

  1. Создание папки на страницах под названием «Компоненты»
  2. Создание подпапки «Компоненты» под названием «TimeZoneControl»
  3. Добавление класса с именем 'TimeZoneControlViewComponent.cs' в 'TimeZoneControl'
  4. Добавление представления Razor с именем 'Default.cshtm' в 'TimeZoneControl'
  5. Изменение моего _Layout.cs html для включения моего компонента представления TimeZoneControl
  6. Добавление @ addTagHelper *, MyWebApp в конец _ViewImports.cs html, где MyWebApp - это имя моего проекта веб-приложения Visual Studio.

В терминах кода:

TimeZoneControlViewComponent.cs - ViewComponents поддерживают внедрение зависимостей, поэтому можно поместить код в конструктор для поддержки доступа к базе данных, как описано в Microsoft Docs 

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace C19QuarantineWebApp.Pages.Components.TimeZoneControl
{
    public class TimeZoneControlViewComponent : ViewComponent
    {
        public TimeZoneControlViewComponent() { }
        public IViewComponentResult Invoke(string timeZoneId)
        {
            var timeZones = new List<string>();
            timeZones.AddRange(new[] {"GMT", "CET", "IST"});
            return View("Default", timeZones.ToArray());
        }
    }
}

Default.cs html

@model string[]
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTZ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Time zones
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    @foreach(var tz in Model) {<a class="dropdown-item" href="#">@tz</a>}
</div>

_Layout.cs html - заменить исходный раскрывающийся список (см. Вопрос) на * 103 9 * 

      <vc:time-zone-control time-zone-id="xxx">
      </vc:time-zone-control>

В контексте это дает: 

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
   <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/About">About</a>
   </li>
   <li class="nav-item dropdown ml-auto">
      <vc:time-zone-control time-zone-id="xxx">
      </vc:time-zone-control>
   </li>
</ul>
</div>

Мне было бы интересно получить комментарии по этому решению. Есть ли более простой и элегантный способ сделать это?

...