Twitter bootstrap 如何在Blazor应用程序中使用引导折叠

我只是尝试在Visual Studio中使用.Net 5/Blazor服务器应用程序创建一个小的原型应用程序，我需要在Blazor组件中具有引导折叠功能—在扩展时，它将包含一个单独的Blazor组件

我试图尽可能避免在原型中使用JavaScript或jQuery。然而，我可以看到，在某些情况下，如引导崩溃，我可能需要这样做。如果可能的话，我希望有组件的本地代码，但是如果需要的话，我希望有一个包含公共助手函数的.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');", "");
        }
    }

这是按钮的一些文本
这是此记录的详细信息屏幕
@代码{
私有异步void ViewDetails（）
{
//单击按钮表示一个事件，因此应该能够使重画发生。
//无需调用javascript（dhtml样式）即可更改切换状态的一些机制
//使用布尔值来更改ARIA状态或类似的内容
_viewDetails=（\u viewDetails==false）？true:false；
此.StateHasChanged（）；
//或者，调用内联jquery来切换控件（首选），类似于。
wait"jsu runtime.InvokeVoidAsync（$（'#详细信息）.collapse（'toggle'）；“，”）；
}
}

您可以创建一个专用于此的组件。然而，当引导崩溃时，这将不会有从打开到关闭的平滑过渡。请注意，这是包装在引导卡-使用可以简单地删除，如果不需要

@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;
    }
}

@使用Microsoft.AspNetCore.Components
@十字头
@万向节头
@if（显示卡体）
{
@名片夹
}
@代码{
[参数]公共RenderFragment CardBody{get；set；}
[参数]公共RenderFragment CardHeader{get；set；}
[参数]公共字符串CardHeaderTitle{get；set；}
[参数]public bool ShowCardBody{get；set；}=false；
公共字符串BtnClass=>ShowCardBody？“oi oi collapse up”：“oi oi collapse down”；
公共无效切换（）
{
ShowCardBody=！ShowCardBody；
}
}

然后你可以这样使用它：

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

...
...

---

如果您想使用引导折叠，请尝试使用数据目标的方法。这对我来说很有效。如果您需要进一步帮助，请告诉我。

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

解决方案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;}

就是这样。我可以推荐一个关于过渡的纯css动画吗？嗨，谢谢，我将研究数据目标-你还有其他例子吗当我尝试使用该示例时，它不起作用。我试图避免重新编写Bootstrap中已经存在的功能。您是否记得将Bootstrap JavaScript所需的脚本添加到index.html（客户端Blazor）或_Host.cshtml（服务器端Blazor）中？默认情况下，这不会随Visual Studio中的Blazor模板一起提供。看看这里的Bootstrap4.5。我刚刚尝试创建一个新的Blazor项目并包含了脚本，然后引导文档中的折叠数据目标示例成功了。不，我没有，但会尝试。应用程序无法访问internet，因此无法使用CDN链接。我已经使用NuGet安装了-您是否有示例脚本/链接要添加到_hosts.cshtml中？引导站点缺少此信息。您是否能够将单元测试添加到此行为？我有点纠结于此，我不使用单元测试，但是的，它是有效的。我用当前的解决方案更新了上面的帖子。