如何在 Blazor 应用程序中使用 Bootstrap Collapse

我只是想使用 .Net 5/Blazor 服务器应用程序在 Visual Studio 中创建一个小型原型应用程序，我需要在 Blazor 组件中具有 Bootstrap 折叠功能 - 这将在展开时包含一个单独的 Blazor 组件。

我试图尽可能避免在原型中使用 JavaScript 或 jQuery。但是，我可以看到在某些情况下，例如 Bootstrap Collapse，我可能需要这样做。如果可能的话，我希望有组件本地的代码，但是如果需要，可以拥有一个包含常用帮助函数的 .js 文件。

下面的代码给出了一个示例，其中包含有关我如何执行此操作的一些想法 - 是否有人对如何使其工作有任何想法。

    <div class="btn btn-primary" @onclick="ViewDetails" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="details">
            this is some text for a button
        </div>
        <div class="collapse" id="details">
            this is the details screen for this record
        </div>
    
    @code {
     private async void ViewDetails()
        {
            // Button click indicates an event so should be able to get redraw to occur.  
    
            // Some mechanism to change the toggle state without calling javascript (dhtml style)
            // Use a boolean to change the ARIA state or something like that
            _viewDetails = (_viewDetails == false) ? true : false;
            this.StateHasChanged();
            
            // Or, call inline jquery to toggle control (preferred) something like.
            await _JSRuntime.InvokeVoidAsync("$('#details).collapse('toggle');", "");
        }
    }