Отключить закрытие начальной загрузки вне холста при щелчке по фону в приложении Blazor .NET

Я пытаюсь создать форму окна вне холста и хочу убедиться, что окно вне холста не закрывается, если пользователь явно не нажмет кнопку закрытия в окне вне холста. Из-за нескольких требований, предоставленных моим клиентом, мне приходится вызывать окно offcanvas через вызов C#, внедряя IJSRuntime, а не напрямую вызывая из HTML.

Я использую версию Blazor framework .net 8, и вот написанные мной коды:

В моем файле бритвы:

<button class = "btn btn-primary" type = "button" data-bs-dismiss = "offcanvas" data-bs-backdrop = "static" @onclick = "() => ShowCanvas()">Show Canvas</button>

И блок кода C#:

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

И, наконец, мой код Javascript:

function showOffCanvas() {
    var myCanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasWindow'));
    myCanvas.show();
}

После запуска приложения .net я столкнулся с исключением, которое, похоже, не смог устранить. Вот подробности исключения:

Microsoft.JSInterop.JSException: 'OFFCANVAS: Option "backdrop" provided type "string" but expected type "boolean".
TypeError: OFFCANVAS: Option "backdrop" provided type "string" but expected type "boolean".
    at https://localhost:7256/js/bootstrap.bundle.min.js:6:1030
    at Array.forEach (<anonymous>)
    at a (https://localhost:7256/js/bootstrap.bundle.min.js:6:862)
    at Fi._getConfig (https://localhost:7256/js/bootstrap.bundle.min.js:6:56127)
    at new Fi (https://localhost:7256/js/bootstrap.bundle.min.js:6:54655)
    at showModalItemMasterForm (https://localhost:7256/js/bootstrap-calls.js:42:20)
    at https://localhost:7256/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7256/_framework/blazor.web.js:1:3201)
    at fn._invokeClientMethod (https://localhost:7256/_framework/blazor.web.js:1:62914)'

В любом случае я могу решить эту проблему, используя метод IJSRuntime?

Спасибо

Я также попробовал не добавлять атрибут data-bs-dismiss="offcanvas" и вместо этого изменил код JS следующим образом:

function showModalItemMasterForm() {
    var myCanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasWindow'), 
    { backdrop: 'static', keyboard: false });
    myCanvas.show();
}

Я получаю ту же ошибку.

javascript .net blazor bootstrap-5 off-canvas-menu

01.07.2024 21:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужно использовать JS для взаимодействия с OffCanvas. Вот бесплатная очень упрощенная реализация JS.

OffCanvas.razor

<div class = "@_showCss" tabindex = "-1">
    <div class = "offcanvas-header">
        <h5 class = "offcanvas-title">Offcanvas Header</h5>
        <button type = "button" class = "btn-close text-reset" @onclick = "this.Hide"></button>
    </div>
    <div class = "offcanvas-body">
        <p>
            Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
        </p>
    </div>
</div>
@if (this.Show)
{
    <div class = "modal-backdrop fade show"></div>
}

@code {
    [Parameter] public bool Show { get; set; }
    [Parameter] public EventCallback<bool> ShowChanged { get; set; }
    private string _showCss => this.Show ? "offcanvas offcanvas-start show off-canvas-show" : "offcanvas offcanvas-start  off-canvas-hide";
    private TaskCompletionSource? _taskCompletionSource;

    public void Hide()
    {
        this.ShowChanged.InvokeAsync(false);
    }
}

OffCanvas.razor.css

.off-canvas-show {
    visibility:visible;
    z-index:1100 !important;
}
.off-canvas-hide {
    visibility: hidden;
}

И домашняя демонстрация:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div class = "m-2">
    <btn class = "btn btn-primary" @onclick = "Open">Show OffCanvas</btn>
</div>

<OffCanvas @bind-Show = "_showOffCanvas"/>

@code {
    private OffCanvas? _offCanvas;
    private bool _showOffCanvas;

    private void Open()
    {
        _showOffCanvas = true;
    }
}

спасибо Шону. это решает проблему.

— 03.07.2024 17:49

02.07.2024 00:44