使用 JSRuntime.InvokeAsync 导致 BlazorStrap Carousel 出现 "Index was out of range" 错误

Question

在我的 Blazor 服务器应用程序中，我有一个包含 BlazorStrap Carousel 的页面和一个用于下载 zip 文件的按钮。 Carousel 工作正常，可以毫无问题地循环浏览所有图像，直到我单击按钮下载 zip 文件。 zip 文件下载正确，但之后我在控制台中收到此错误：

Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index') at System.Collections.Generic.List`1.get_Item(Int32 index) at BlazorStrap.BSCarouselBase.AnimationEnd(BSCarouselItemBase sender)
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Html 轮播和下载文件按钮：

<BlazorStrap.BSCarousel NumberOfItems="@slideshowImages.Count" style="width: 23vw;">
    <div class="carousel-inner">
        @foreach (var item in slideshowImages)
        {
            <BlazorStrap.BSCarouselItem Src="@item.Source" Alt="@item.Alt" style="width: 100%;">
                @if (bShowImageTitle == true)
                {
                    <BlazorStrap.BSCarouselCaption CaptionText="@item.Caption.Split('.')[0]" />
                }
            </BlazorStrap.BSCarouselItem>
        }
    </div>
    <BlazorStrap.BSCarouselControl CarouselDirection="BlazorStrap.CarouselDirection.Previous" NumberOfItems="@slideshowImages.Count" />
    <BlazorStrap.BSCarouselControl CarouselDirection="BlazorStrap.CarouselDirection.Next" NumberOfItems="@slideshowImages.Count" />
</BlazorStrap.BSCarousel>

<button class="btn btn-primary bold" type="button" @onclick="(e => btnDownloadAllClick())">DOWNLOAD FILES</button>

获取轮播项目的代码：

List<Slideshow> slideshowImages = new List<Slideshow>();

public class Slideshow
{
    public string Source { get; set; }
    public string Alt { get; set; }
    public string Caption { get; set; }
    public string Header { get; set; }
}

public int iImageCount;

protected override void OnInitialized()
{
    //here i'm getting the images from a folder in azure storage, this works fine
    List<string> tempList = clsBlobService.ListBlobs(folderPath);

    foreach (var img in tempList)
        {
            Slideshow tempItem = new Slideshow
            {
                Source = rootPath + img,
                Alt = img.Split('/').Last(),
                Caption = img.Split('/').Last()
            };

            slideshowImages.Add(tempItem);
        }

        iImageCount = slideshowImages.Count;
}

点击下载文件按钮时的代码：

public async void btnDownloadAllClick()
{   
    await JSRuntime.InvokeVoidAsync("open", "/Temp/MyZipFile.zip");
}

编辑：我忘了补充一点，我的渲染模式是服务器而不是服务器预渲染。

Answer 1

试试这个

 
    @if (bShowImageTitle == true 
                && item.Caption.Split('.')!=null  
                   && item.Caption.Split('.').Length > 0  
        )
     {
      <BlazorStrap.BSCarouselCaption CaptionText="@item.Caption.Split('.')[0]" />
      }

Answer 2

您的错误发生在 at BlazorStrap.BSCarouselBase.AnimationEnd()。

但是在 GitHub 我找不到 BSCarouselBase 并且 the record 建议你的错误已修复。

所以，更新你的包。

使用 JSRuntime.InvokeAsync 导致 BlazorStrap Carousel 出现 "Index was out of range" 错误

Using JSRuntime.InvokeAsync causes "Index was out of range" error on BlazorStrap Carousel

c#

blazor

blazor-server-side

blazor-jsinterop