WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

Blazor アプリで Bootstrap5 Modal の利用

by WebSurfer 11. March 2023 14:09

Blazor アプリで Bootstrap5 の Modal を使う方法を書きます。この記事では Visaul Studio 2022 のテンプレートで作った .NET 6.0 の Blazor Web Assembly を例に使います。(Blazor Server でもほぼ同じようにしてできます)

Blazor アプリで Bootstrap Modal

Bootstrap5 Modal の詳しい説明は Bootstrap のドキュメント「Modal (モーダル)」にあります。普通の html + css + javascript のページに Bootstrap5 Modal を組み込むなら、そのドキュメントから十分な情報が得られると思います。

JavaScript のメソッドを呼び出すのがいろいろややこしい Blazor アプリに、Bootstrap5 Modal を組み込むにはどうしたらいいかというのががこの記事のポイントで、それを以下に述べます。

Visaul Studio 2022 のテンプレートで作った .NET 6.0 の Blazor アプリには bootstrap.min.css v5.1.0 が組み込み済みです。ただし、それだけでは Modal は使えません。使うには bootstrap.js が必要なので同じバージョンのものを wwwroot 下に追加します。

加えて、JavaScript で Modal を表示するためのコードを含んだ外部スクリプトファイルを作成します。内容は以下の通りです。Bootstrap のドキュメント「Via JavaScript」を参考にしました。ファイル名は exampleJsInterop.js としています (名前は任意)。

window.showBootstrapModal = () => {
    // staticBackdrop は modal 表示する div 要素の id
    let divModal = document.getElementById('staticBackdrop');
    let myModal = new bootstrap.Modal(divModal);
    myModal.show();
}

Modal を表示するには、Bootstrap のドキュメント「Via data attributes」に書かれているように、表示に必要な属性を付与した button のような要素を使う方法もあります。その方法で良ければ、上のスクリプトファイル exampleJsInterop.js は不要です。ただし、その場合でも bootstrap.js は必要ですので注意してください。

bootstrap.js ファイルと exampleJsInterop.js ファイルを wwwroot 下に配置し、wwwroot/index.html にそのファイルへの参照を追加します。下の画像の赤枠を見てください。青枠は既存の bootstrap.min.css のものです。

外部スクリプトファイルの追加

Bootstrap5 は jQuery に依存していないそうですので jquery.js は不要です。(上の画像では jquery.js も追加されていますが、Bootstrap5 とは関係ない別の目的です)

Blazor Sever の場合、外部スクリプトファイル bootstrap.js と exampleJsInterop.js への参照を追加するのは Pages/_Layout.cshtml になります。そこだけが Blazor Web Assembly と Blazor Server の違いです。

Pages フォルダ下に Razor コンポーネントを追加し、それに Bootstrap のドキュメント「Live demo」のコードをコピーします。それだけで[Launch static backdrop modal]ボタンをクリックすると Modal が表示されるようになります。

Blazor アプリで Bootstrap Modal

JavaScript で Modal を表示するには、外部スクリプトファイル exampleJsInterop.js の showBootstrapModal メソッドを呼び出してやります。それを含めた Razor コンポーネント全体のコードは以下のようになります。

[Via JavaScript]ボタンに設定した @onclick="ShowBootstrapModal" で @code 内の ShowBootstrapModal メソッドを呼び出し、その中の InvokeVoidAsync メソッドで showBootstrapModal メソッドを呼び出しています。

@page "/modal"
@inject IJSRuntime JSRuntime;

<PageTitle>Bootstrap Modal</PageTitle>

<!-- Modal -->
<div class="modal fade" 
    id="staticBackdrop" 
    data-bs-backdrop="static" 
    data-bs-keyboard="false" tabindex="-1" 
    aria-labelledby="staticBackdropLabel" 
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" 
                    id="staticBackdropLabel">
                    Modal title
                </h5>
                <button type="button" 
                    class="btn-close" 
                    data-bs-dismiss="modal" 
                    aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" 
                    class="btn btn-secondary" 
                    data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" 
                    class="btn btn-primary">
                    Understood
                </button>
            </div>
        </div>
    </div>
</div>

<h1>Bootstrap Modal</h1>

<!-- Via JavaScript -->
<button type="button" class="btn btn-primary" 
    @onclick="ShowBootstrapModal">
    Via JavaScript
</button>

<br />
<br />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" 
    data-bs-toggle="modal" 
    data-bs-target="#staticBackdrop">
    Launch static backdrop modal
</button>

@code {
    private async Task ShowBootstrapModal()
    {
        await JSRuntime
            .InvokeVoidAsync("showBootstrapModal");
    }
}

JavaScript のメソッドを呼び出す方法の詳細は Microsoft のドキュメント「ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す」に書かれていますので興味がありましたら読んでください。

Tags: , ,

CORE

Blazor WASM でファイルアップロード

by WebSurfer 28. October 2022 14:12

Blazor Web Assembly (WASM) アプリで、html の form 要素及び input type="file" 要素と jQuery ajax を使ってファイルをアップロードする方法を書きます。

Blazor WASM でファイルアップロード

(.NET 5.0 以降であれば、InputFile クラスを利用できるそうですので、そちらを使う方がいいかもしれません。詳細は Microsoft のドキュメント「ASP.NET Core Blazor ファイルのアップロード」を見てください)

jQuery / JavaScript を使ってファイルのアップロードはできますので、基本ブラウザである Blazor WASM のクライアント側からでも同様にファイルのアップロードはできます。

その jQuery / JavaScript のコードを Blazor WASM のクライアント側に組み込んで呼び出すことで、Blazor WASM アプリとしてファイルのアップロード機能を持たせることが可能です。(以下に概略を書きますが、詳細は Microsoft のドキュメント「ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す」を見てください)

なお、input type="submit" ボタンを form 要素内に配置して、それをクリックするというのは NG です。ファイルはアップロードされますが、返ってきた応答でブラウザの画面が書き換えられてしまうので。

jQuery ajax を使ってのファイルのアップロード機能をどのように実装するかの具体例を以下に書いておきます。

ベースとする Blazor WASM ソリューションは、Visual Studio 2022 のテンプレートを使って、フレームワーク .NET 6.0 で、[ASP.NET Core でホストされた(h)]にチェックを入れて作成したものを使います。ソリューション内に Client, Server, Shared という 3 つのプロジェクトができるはずです。

(1) ファイルアップロード用の Razor ページ

Client プロジェクトの Pages フォルダに以下の Razor ページを追加します。

@page "/fileupload"
@inject IJSRuntime JSRuntime;

<h3>File Upload by jQuery Ajax</h3>

<form id="form1" method="post" enctype="multipart/form-data">
    <input type="file" name="postedfile" />
</form>

<button type="button" class="btn btn-primary" @onclick="UploadFile">
    アップロード
</button>

<div id="result"></div>

@code {
    private async Task UploadFile()
    {
        await JSRuntime.InvokeVoidAsync("uploadFile");
    }
}

Shared フォルダの NavMenu.razor に上の fileupload ページへのリンクを追加し、メニューからリンクをクリックしてアクセスできるようにします。

(2) ファイルアップロード用の js ファイル

ファイルをアップロードする jQuery / JavaScript コードのコードを含んだ js ファイルを作成します。コードは以下の通りです。js ファイルの名前は任意ですがここでは exampleJsInterop.js としておきます。

window.uploadFile = () => {
    // FormData オブジェクトの利用
    var fd = new FormData(document.getElementById("form1"));

    $.ajax({
        url: '/Upload',
        method: 'post',
        data: fd,
        processData: false, // jQuery にデータを処理させない
        contentType: false  // contentType を設定させない
    }).done(function (response) {
        $("#result").empty;
        $("#result").text(response);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        $("#result").empty;
        $("#result").text('textStatus: ' + textStatus +
            ', errorThrown: ' + errorThrown);
    });
}

(3) js ファイルの配置

上の exampleJsInterop.js と jQuery.js を、Client プロジェクトの wwwroot フォルダ下に js フォルダを作って、その中に配置します。

js ファイルの配置

(4) index.html に script タグを追加

Client プロジェクトの wwwroot フォルダ下の index.html に、exampleJsInterop.js と jQuery.js がダウンロードされるよう、script タグを追加します。

Index.html に script タグを追加

(5) Server プロジェクトに Controller 追加

Server プロジェクトの Controllers フォルダにアップロードされたファイルを受け取って必要な処置をする Controller を追加します。

具体例は以下のコードを見てください。Web API の Controller としています。名前をステップ (2) の jQuery / JavaScript のコードにある url: '/Upload' と合わせる必要があることに注意してください。

using Microsoft.AspNetCore.Mvc;

namespace BlazorWasmCoreHosted.Server.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class UploadController : ControllerBase
    {
        // .NET 6.0 で作ったプロジェクトは「Null 許容」オプションが「有効化」に
        // 設定してあるので、引数も NULL 許容にしておかないと、クライアントでファ
        // イルを選択しないで送信した場合、HTTP 400 Bad Request エラーになって
        //  "The postedFile field is required."というエラーメッセージが返ってくる
        [HttpPost]
        public string Post([FromForm] IFormFile? postedFile)
        {
            string result = "";
            if (postedFile != null && postedFile.Length > 0)
            {
                // アップロードされたファイル名を取得
                string filename = System.IO.Path.GetFileName(postedFile.FileName);

                // アップロードされたファイルを処理(省略)

                result = $"{filename} ({postedFile.ContentType}) - " +
                    $"{postedFile.Length} bytes アップロード完了";
            }
            else
            {
                result = "ファイルアップロードに失敗しました";
            }

            return result;
        }
    }
}

アプリを実行してファイルアップロードに成功するとこの記事の一番上にある画像のようになります。

Tags: , , ,

Upload Download

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  June 2024  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar