Blazor上的Bootstrap模態(tài)已停止工作。NET 8 RC2（使用JSInterop打開/關(guān)閉）

Question 1

我相信我所做的是反對dotnet-8-Blazor-way做事，但我無論如何都會發(fā)帖，因為我覺得如果有更多的人在.NET 7之前做過我所做過的事情，這對他們來說會很有用。

目前（在.NET 8 RC1之前），我有一個頁面，其中必須從C#打開bootstrap模態(tài)。為此，我在JS文件上添加了兩個方法（openPOModal、closePOModal），并使用JSInterop從C#調(diào)用它們：

JS:

var selectPOModal = new bootstrap.Modal('#selectPOModal', {
});

var closePOModal = () => {
    selectPOModal.hide();
}

var openPOModal = () => {
    selectPOModal.show();
}

export { closePOModal, openPOModal };

Razor component:

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsModule = await JS.InvokeAsync<IJSObjectReference>(
                "import", "./Pages/MyComponent.razor.js");
        }
    }

    ...
    private async Task SomethingHappensNeedOpenModal()
    {
        await jsModule.InvokeVoidAsync("openPOModal");
    }
}

即使在.NET 8 RC2中，模態(tài)也會打開，但模態(tài)中所有Blazor控制的元素都不再響應(yīng)。

我在模態(tài)中有一個綁定到屬性的輸入，它不再更新。也不是我調(diào)用C#方法的按鈕。

我的問題是：有沒有一種簡單的方法可以使用JS再次實現(xiàn)這一點？

或者，使用Blazor實現(xiàn)bootstrap's打開/關(guān)閉邏輯的正確解決方案是這個鏈接問題的答案中所做的嗎？

Question 2

我在Blazor.NET 8 RC2（服務(wù)器）中處理此問題的方法是向窗口添加一個可以通過JS interop調(diào)用的函數(shù)。

首先，在加載時運行的JS文件中創(chuàng)建函數(shù)（在本例中使用IIFE）。

my-bootstrap.js

(function() {
  // use a custom namespace to avoid polluting the window object
  window.myNamespace = {
    bootstrap: {
      modals: {
        show: el => {
          // I will be passing in the element itself, 
          // but the selector could also be used
          const instance = bootstrap.Modal.getOrCreateInstance(el);
          instance.show();
        }
      }
    }
  };
})();

創(chuàng)建包含模態(tài)和事件處理程序的剃刀組件，以通過IJSRuntime顯示模態(tài)。在這種情況下，我使用的是按鈕點擊。

my-modal.razor

<button @onclick="@OnButtonClick">Show modal</button>

<div class="modal" tabindex="-1" @ref="@ModalElement">
    <!-- modal example omitted for brevity, 
         available from the Bootstrap docs -->
</div>

@inject IJSRuntime JSRuntime
@code {
    // Get a reference to the rendered element using 
    // the @ref="" syntax on the HTML element
    private ElementReference? ModalElement { get; set; }

    private async Task OnButtonClick()
    {
        // call the function with the element reference 
        // as the first and only argument
        await JSRuntime.InvokeVoidAsync(
            "myNamespace.bootstrap.modals.show", 
            ModalElement);
    }
}

我在這里包含了一個按鈕，只是為了演示——您可以以一種對您有意義的方式連接到邏輯中。

Edit

事件處理程序在模態(tài)內(nèi)部工作的示例：

<div class="modal" tabindex="-1" @ref="@ModalElement">
    <!-- modal HTML omitted for brevity -->
    <button type="button" class="btn btn-primary" 
            @onclick="@OnActionButtonClick">
      Save changes
    </button>  
    <!-- modal HTML omitted for brevity -->         
</div>

@code {
    public async Task OnActionButtonClick()
    {
        // this is working after the modal is displayed
        await JSRuntime.InvokeVoidAsync("alert", "Hello, World!");
    }
}

值得一提的是，我使用的是Bootstrap v.3.2。

Answer 1

我在Blazor.NET 8 RC2（服務(wù)器）中處理此問題的方法是向窗口添加一個可以通過JS interop調(diào)用的函數(shù)。

首先，在加載時運行的JS文件中創(chuàng)建函數(shù)（在本例中使用IIFE）。

my-bootstrap.js

(function() {
  // use a custom namespace to avoid polluting the window object
  window.myNamespace = {
    bootstrap: {
      modals: {
        show: el => {
          // I will be passing in the element itself, 
          // but the selector could also be used
          const instance = bootstrap.Modal.getOrCreateInstance(el);
          instance.show();
        }
      }
    }
  };
})();

創(chuàng)建包含模態(tài)和事件處理程序的剃刀組件，以通過IJSRuntime顯示模態(tài)。在這種情況下，我使用的是按鈕點擊。

my-modal.razor

<button @onclick="@OnButtonClick">Show modal</button>

<div class="modal" tabindex="-1" @ref="@ModalElement">
    <!-- modal example omitted for brevity, 
         available from the Bootstrap docs -->
</div>

@inject IJSRuntime JSRuntime
@code {
    // Get a reference to the rendered element using 
    // the @ref="" syntax on the HTML element
    private ElementReference? ModalElement { get; set; }

    private async Task OnButtonClick()
    {
        // call the function with the element reference 
        // as the first and only argument
        await JSRuntime.InvokeVoidAsync(
            "myNamespace.bootstrap.modals.show", 
            ModalElement);
    }
}

我在這里包含了一個按鈕，只是為了演示——您可以以一種對您有意義的方式連接到邏輯中。

Edit

事件處理程序在模態(tài)內(nèi)部工作的示例：

<div class="modal" tabindex="-1" @ref="@ModalElement">
    <!-- modal HTML omitted for brevity -->
    <button type="button" class="btn btn-primary" 
            @onclick="@OnActionButtonClick">
      Save changes
    </button>  
    <!-- modal HTML omitted for brevity -->         
</div>

@code {
    public async Task OnActionButtonClick()
    {
        // this is working after the modal is displayed
        await JSRuntime.InvokeVoidAsync("alert", "Hello, World!");
    }
}

值得一提的是，我使用的是Bootstrap v.3.2。

Blazor上的Bootstrap模態(tài)已停止工作。NET 8 RC2（使用JSInterop打開/關(guān)閉）

熱門問答

獲取重定向到api響應(yīng)主體的post

為什么ar在創(chuàng)建靜態(tài)庫時發(fā)出警告？

如何使用React中基于道具的庫調(diào)用項？

JOLT轉(zhuǎn)換：如何有條件地合并兩個字段并保留其他屬性？

基于具有IComparable的參數(shù)對對象的ArrayList進行排序

在C#中，有沒有一種簡單的方法將ListArray轉(zhuǎn)換成字節(jié)數(shù)組？

android 第一次打開軟件出現(xiàn)引導(dǎo)界面

在結(jié)帳頁面中顯示產(chǎn)品屬性不在magento中工作

編譯Linux程序出現(xiàn)“對‘pthread_create’未定義的引用”。

spring-data-elasticsearch 根據(jù)id批量刪除數(shù)據(jù)接口

Elasticsearch 刷大量數(shù)據(jù)的時候，之前存在的數(shù)據(jù)，這時候更新，為什么不能查詢到。

python正則爬蟲無響應(yīng)