如何使用 JavaScript 和 Blazor 以编程方式隐藏 Bootstrap Offcanvas 组件？

Question

我有一个 Blazor .Net 8 webb 应用程序，它使用 Bootstrap 5.3 Offcanvas 组件作为可以从中选择的项目菜单。当用户选择菜单项时，我希望 Offcanvas 组件自动关闭。

我这样做的方法是创建一个像这样调用 JavaScript 的

ButtonClicked

事件

`await JS.InvokeVoidAsync("closeOffcanvas");`

这在 OnFilterSelected EventCallback 之前调用

对于 Bootstrap，我使用

data-bs

属性。我广泛寻找解决方案但无济于事。我想出的 JavaScript 可以在下面看到

closeOffcanvas.js

）。我充其量只是一个新手java脚本程序员

下面是相关代码，有关工作示例，请参阅此 GitHub 存储库

任何帮助将不胜感激。

closeOffcanvas.js

window.closeOffcanvas = function () {
  var offcanvasElement = document.getElementById("offcanvasid");
  var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
  offcanvas.hide();
};

Filter.razor

<button class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#offcanvasid">
  Contents
  <i class="fas fa-bars"></i>
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasid">

  <div class="offcanvas-header">
    <span class=""></span>
    <button type="button" class="btn-close"
            data-bs-dismiss="offcanvas" aria-label="Close">
    </button>
  </div>

  <div class="offcanvas-body">

    <ul class="list-group">
      @foreach (var item in Enums.MenuItem.List.OrderBy(o => o.Value))
      {
        <li class="list-group-item @ActiveFilter(item)">
          <a @onclick="@(e => ButtonClicked(item))"
             type="button"
             id="@item.ButtonId">
            @item.Value <small>@item.Title</small>
          </a>
        </li>
      }
    </ul>

  </div>
</div>

@code

  [Parameter, EditorRequired] public required Enums.MenuItem? CurrentFilter { get; set; }
  [Parameter] public EventCallback<Enums.MenuItem> OnFilterSelected { get; set; }

  protected Enums.MenuItem currentMenuItem = Enums.MenuItem.HebrewPassOverOrCrossOver;

  private async Task ButtonClicked(Enums.MenuItem filter)
  {
    currentMenuItem = filter;

    // calling this doesn't close the component 
    //   It also disables the close button
    await JS.InvokeVoidAsync("closeOffcanvas"); 

    await OnFilterSelected.InvokeAsync(filter);
  }


// other code

Index.razor

这是调用Filter.razor组件的razor页面

@page "/"
<h1>Home</h1>

<div class="d-flex justify-content-end mx-1">
  <Filter CurrentFilter=@CurrentFilter OnFilterSelected="@ReturnedFilter" />
</div>

<!-- Do something with the chosen filter -->

@code

  public MenuItem CurrentFilter { get; set; } = MenuItem.HebrewPassOverOrCrossOver; // default item
  

  private void ReturnedFilter(MenuItem filter)
  {
    CurrentFilter = filter;
    StateHasChanged();
  }

Answer 1

这是一个演示页面，使用 Bootstrap 演示页面中的代码示例，展示了如何直接在 C# 中显示和隐藏画布外内容。

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="m-2">
    <button class="btn btn-primary" @onclick="ToggleCanvas">
        Show Off Canvas
    </button>
</div>

<div class="offcanvas offcanvas-start @_offCanvasCss" tabindex="-1" style="@_offCanvasStyle" role="dialog">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" @onclick="ToggleCanvas"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
</div>

@if (!_hideCanvas)
{
    @* Had to set the z-index as the bootstrap version seemed to have it wrong - check yours *@
    <div class="modal-backdrop fade @_offCanvasCss" style="z-index:1040" @onclick="ToggleCanvas"></div>
}
@code{
    public bool _hideCanvas = true;
    public string _offCanvasStyle => _hideCanvas ? "visibility:hidden;" : "visibility:visible;";
    public string _offCanvasCss => _hideCanvas ? "hide" : "show";

    private Task ToggleCanvas()
    {
        _hideCanvas = !_hideCanvas;
        return Task.CompletedTask;
    }
}