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

Question

我只是想在 Visual Studio 中使用 .Net 5/Blazor 服务器应用程序创建一个小型原型应用程序，我需要在 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');", "");
        }
    }

Answer 1

您可以创建一个专门用于执行此操作的组件。然而，当 Bootstrap 崩溃时，这不会从打开到关闭的平滑过渡。请注意，它包含在 Bootstrap 卡中 - 如果不需要，使用可以简单地删除它。

@using Microsoft.AspNetCore.Components

<div class="pb-3">
   <div class="card">
       <div class="card-header">
            <button class="btn btn-link" style="color: black; text-decoration: none" @onclick="Toggle">
               <b>@CardHeaderTitle</b>
            </button>
            @CardHeader
            <button @onclick="Toggle" type="button" class="btn btn-secondary btn-sm float-right">
                <span class="@BtnClass"></span>
            </button>
        </div>
        @if (ShowCardBody)
        {
            <div class="card-body">
                @CardBody
            </div>
        }
    </div>
</div>

@code {
    [Parameter] public RenderFragment CardBody { get; set; }
    [Parameter] public RenderFragment CardHeader { get; set; }
    [Parameter] public string CardHeaderTitle { get; set; }


    [Parameter] public bool ShowCardBody { get; set; } = false;
    public string BtnClass => ShowCardBody ? "oi oi-collapse-up" : "oi oi-collapse-down";
    public void Toggle()
    {
        ShowCardBody = !ShowCardBody;
    }
}

然后你可以像这样使用它：

<CollapsibleCard CardHeaderTitle="Title">
    <CardHeader>
        ...
    </CardHeader>
    <CardBody>
        ...
    </CardBody>
</CollapsibleCard>

如果您想使用 Bootstrap 折叠，请尝试使用数据目标解释的方法 here。这以前对我有用。如果您需要进一步的帮助，请告诉我。

Answer 2

这是我使用的两种解决方案。我对上面的回复表示赞同，因为他们提供了解决问题的信息。

解决方案 1：
在这个解决方案中，我使用按钮单击来切换 div 标签的可见性（如上）以显示组件。

解决方案 2：（我使用的那个）。是下载引导包并将其解压缩到我的 wwwroot 目录中（这包含所有需要的文件，包括 popper）。然后我在 _host.cshtml 中分别添加了一个 .js 和 .css 引用到 bootstrap.bundle.min.js 和 bootstrap.min.css。

     <!-- using a bootstrap container with a unique id e.g. entity@1 -->
    <div class=container-fluid collapse" id="entity@(myid)">
    <div class="row">
       <div class="col-lg-12">
          <!-- the component that is displayed when the collapse is toggled -->
          <MyComponent componentId=@myid />
       </div>
    </div>
    </div>

The component is 
   @if (componentId > 0)
   {
      <!-- do razor code -->
   }
[Parameter] public Int32 componentId {get; set;}