Как превратить эту Bootstrap Карусель в повторно используемый компонент Razor для использования в приложении Blazor

Question

Я создаю компонент бритвы для использования в клиентском приложении Blazor. Мне интересно, как я могу сделать изображения, используемые в компоненте, динамическими c, и установить изображения в кодовом блоке страницы, где я вызываю компонент.

Вот мой компонент Carousel.razor

@inject IJSRuntime JsRuntime
@namespace BlazorFrontend.Components

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0"  class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2" ></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="pictures/foo.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="pictures/bar.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="pictures/foobar.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" role="button" id="carouselExampleIndicators-prev" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" id="carouselExampleIndicators-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

@code{
    protected override async Task OnInitializedAsync()
        {
            foreach (System.Collections.DictionaryEntry de in Environment.GetEnvironmentVariables())
            {
                System.Console.WriteLine("ENVVAR: key=" + de.Key + " value=" + de.Value);
                System.Console.WriteLine(Environment.GetEnvironmentVariable("ASSETS"));
            }
        }
        private string AssetsEndpoint = Environment.GetEnvironmentVariable("ASSETS");
        bool firstRender = true;

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JsRuntime.InvokeAsync<object>("initializeCarousel");
                firstRender = false;
            }
        }
}

В идеале я хотел бы сделать что-то вроде этого:

  <img class="d-block w-100" src=@slide1 alt="First slide">

code{
    string slide1;
}

и в блоке кода страницы я использую компонент в:

<Carousel></Carousel>

code{
    slide1 = "pictures/foo.jpg"
}

Например, но, конечно, это не сработает. Как правильно / Blazor способ сделать это?

Answer 1

BlazorStrap в основном уже делает это, и их страница с примером карусели также показывает довольно блазорский способ сделать это. Из первого примера:

<BSCarousel NumberOfItems="@items.Count">
    <BSCarouselIndicators NumberOfItems="@items.Count">
    <div class="carousel-inner">
        @for (int i = 0; i <<> items.Count; i++)
        {
            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt">
        }
    </div>
    <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count">
    <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count">
</BSCarousel>

Давайте сначала упростим это немного:

<BSCarousel NumberOfItems="@items.Count">
    <div class="carousel-inner">
        @for (int i = 0; i <<> items.Count; i++)
        {
            <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt">
        }
    </div>
</BSCarousel>

Ключевые аспекты, на которые следует обратить внимание:

• Блазор компонент BSCarousel, который семантически действует как контейнер, а также может взаимодействовать со своими дочерними компонентами
• , есть другой компонент Blazor BSCarouselItem для каждого добавленного элемента. Такой подход делает вас достаточно гибким и может быть тем, о чем вы просили. Больше плитки в карусели? Просто добавьте еще один элемент. В этом случае родительский компонент BSCarousel должен разобраться в их расположении.
• Синтаксис Razor, такой как @for и @items.Count, используется для легкого вкрапления C#, где это необходимо, но на самом деле, C# здесь используется скорее как язык шаблонов
• , для этого блок @code { } вообще не нужен (заметьте, однако, что все за пределами этого блока в конечном итоге преобразуется в C# в любом случае)

Я предполагаю, что ваш главный вопрос был: как поместить несколько элементов в компонент? Делая другой компонент, который обрабатывает один элемент. : -)