深入淺出Blazor webassembly之modal對話框

=============================================

 Blazored.Moda 簡介

=============================================

本文介紹 Blazored 發布的 Modal 組件, 可以不使用JS就能實現Modal 對話框效果.

主頁: https://github.com/Blazored/Modal

demo 站點:  https://blazored.github.io/Modal/

 

Blazored.Modal 組件可以將一個普通的 razor 組件以 Modal 的形態展現出來, 比如 FetchData 這個 razor 組件, 下面簡單的代碼就會將 FetchData 以彈窗形式顯示.

Modal.Show<FetchData>("這是一個彈窗");

 

 

=============================================

 使用步驟

=============================================

1. 安裝

   dotnet add package Blazored.Modal

2.  program.cs 文件注冊服務

    builder.Services.AddBlazoredModal();

3.  index.html 引入相關 js 和 css

<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>

4.  [可選]  _Imports.razor 文件using 相關的namespace

@using Blazored.Modal
@using Blazored.Modal.Services

5. [可選] App.razor 文件最外層包一個 <CasadingBlazoredModal> 組件, 這個組件類似於 CascadingValue 組件, 可以下推  ModalService 實例到下層要顯示彈窗的組件中, 如果省略了這一步, 下層組件需要使用常規的 inject 方法獲取一個 IModalService 實例中.

使用<CasadingBlazoredModal> 寫法的優勢是, 可以在 App.razor 中統一彈窗的一些表現, 比如禁止顯示右上角的close按鈕等等.

<CascadingBlazoredModal HideCloseButton="true" DisableBackgroundCancel="true" >

app.razor的原有內容

</CascadingBlazoredModal>

6. 需要彈窗的組件中, 使用 Inject 或 CasadingParameter 獲取一個 IModalService 實例, 然后調用 IModalService.Show<T>()來展現模態窗口

7. 彈窗組件中, 使用 CasadingParameter 獲取一個 BlazorModalInstance 實例, 通過該實例向外界傳遞 ModalResult 值.

 

=============================================

 IModalService.Show<T>()的參數和返回值

=============================================

1. ModalOptions 輸入參數, 可以控制:

• 是否隱藏右上角的close按鈕
• 是否可以通過點擊背景關閉彈窗
• 是否隱藏標題欄

2. ModalParameters 參數

  對於razor組件,  父組件可以在嵌入它時, 同時設置Parameter參數.

  ModalService.Show<T>()函數也允許為彈窗組件傳參, 就是通過 ModalParameters 完成的.

3. 獲取ModalResult的方法

  彈窗組件中, 使用 CasadingParameter 獲取一個 BlazorModalInstance 實例, 通過該實例向外界傳遞 ModalResult 值.

 

=============================================

完整示例

=============================================

彈窗Fetch.razor 組件

<!-- 省略其他頁面代碼-->
<button @onclick="OkClick" class="btn btn-primary">OK</button>
<button @onclick="CancelClick" class="btn btn-secondary">Cancel</button>

@code{
    //省略其他C#代碼

    [Inject]BlazoredModalInstance ModalInstance { get; set; }

    private void OkClick()
    {
        ModalInstance.CloseAsync(ModalResult.Ok<String>("Yes"));

    }

    private void CancelClick()
    {
        ModalInstance.CloseAsync(ModalResult.Cancel());
    }
}

 

 index.razor 組件

@page "/"
<h1>Hello, world!</h1>

Welcome to your new app.
<br /> 

<button @onclick="ShowModal">show modal </button>
 
<SurveyPrompt Title="How is Blazor working for you?" />

@code{
    [CascadingParameter] protected IModalService ModalService { get; set; }

    private async void ShowModal()
    {
        Console.WriteLine("ShowModal");
        var formModal=ModalService.Show<FetchData>("這是一個彈窗");
        var result = await formModal.Result;
        if (result.Cancelled)
        {
            Console.WriteLine("Cancelled");
        }
        else
        {
            Console.WriteLine(result.Data);
        }
    }
}