在Blazor .NET应用中禁用Bootstrap Offcanvas背景点击关闭的问题

错误根源 #

1. 属性位置错误：你把data-bs-backdrop加在了触发按钮上（该属性属于Offcanvas容器元素，而非触发按钮），导致Bootstrap解析配置时出现类型不匹配。
2. 配置逻辑混淆：早期Bootstrap版本的Offcanvasbackdrop仅支持布尔值，传入字符串'static'会触发类型错误；且static原本是Modal的专属配置，Offcanvas在5.2版本后才支持该值。

步骤1：修正Razor代码 #

移除触发按钮上的data-bs-dismiss和data-bs-backdrop属性，将配置属性移到Offcanvas容器上：

<button class="btn btn-primary" type="button" @onclick="ShowCanvas">Show Canvas</button>

<!-- Offcanvas容器，保留关闭按钮的data-bs-dismiss属性 -->
<div class="offcanvas offcanvas-start" id="offcanvasWindow" tabindex="-1" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas Title</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- 自定义内容 -->
  </div>
</div>

步骤2：修正C#代码 #

将async void改为async Task（Blazor中推荐使用async Task避免异常无法捕获）：

private async Task ShowCanvas()
{
    await JS.InvokeVoidAsync("showOffCanvas");
}

步骤3：修改JavaScript代码（二选一） #

方案A：事件监听控制关闭（兼容所有Bootstrap版本）

完全自定义关闭逻辑，仅允许点击关闭按钮时关闭Offcanvas：

function showOffCanvas() {
    const offcanvasEl = document.getElementById('offcanvasWindow');
    const myCanvas = new bootstrap.Offcanvas(offcanvasEl, {
        keyboard: false // 禁止ESC键关闭
    });

    // 监听关闭事件，阻止非关闭按钮触发的关闭操作
    offcanvasEl.addEventListener('hide.bs.offcanvas', function (e) {
        const trigger = e.relatedTarget;
        // 仅当触发元素是关闭按钮时允许关闭
        if (!trigger || !trigger.matches('[data-bs-dismiss="offcanvas"]')) {
            e.preventDefault();
        }
    });

    myCanvas.show();
}

方案B：使用Bootstrap 5.2+的static配置

如果你的Bootstrap版本≥5.2，可直接通过配置实现点击背景不关闭+禁止ESC关闭：

function showOffCanvas() {
    const myCanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasWindow'), {
        backdrop: 'static', // 点击背景不关闭
        keyboard: false     // 禁止ESC键关闭
    });
    myCanvas.show();
}

注意：选择此方案时，需确保Offcanvas容器上没有设置data-bs-backdrop属性，避免配置冲突。

内容的提问来源于stack exchange，提问作者Syed Akbar