如何在 Blazor 应用中使用 Bootstrap Collapse

Question

我只是尝试使用 .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');", "");
        }
    }

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 折叠，请尝试使用此处解释的数据目标的方法。这对我以前有用。如果您需要进一步的帮助，请告诉我。

Answer 2

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

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

解决方案2：（我用过的）。是下载引导程序包并将其解压到我的 wwwroot 目录中（其中包含所需的所有文件，包括 popper）。然后，我在 _host.cshtml 中分别向 bootstrap.bundle.min.js 和 bootstrap.min.css 添加了 .js 和 .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;}