記事詳細

投稿日
2026年08月28日03時49分
タイトル

ASP.NET Core MVC:　<!-- モーダル --> <div class="modal fade" id="carryOverModal" tabindex="-1" aria-labelledby="carryOverModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"

内容

了解です。
Bootstrap のモーダルを使わずに、SweetAlert2 で「はい／いいえ」形式の確認ダイアログに置き換えるコード例を示します。

以下は ASP.NET Core MVC のビュー（Razor）や JavaScript に組み込める、完全動作する SweetAlert2 の Yes/No ダイアログのサンプルです。

1. SweetAlert2 の読み込み

ビューの <head> または _Layout.cshtml に追加します。

Html
<!-- SweetAlert2 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. JavaScript で Yes/No ダイアログを表示

Html
<script>
    // 繰越金額入力ダイアログを表示する関数
    function showCarryOverDialog() {
        Swal.fire({
            title: 'お知らせ',
            text: '「繰越金額」を入力してください。',
            icon: 'question',
            showCancelButton: true,           // 「いいえ」ボタンを表示
            confirmButtonText: 'はい',        // OKボタンのラベル
            cancelButtonText: 'いいえ',       // キャンセルボタンのラベル
            reverseButtons: true,             // ボタンの並びを逆にする（Yesを右側に）
            focusCancel: true                  // デフォルトフォーカスをキャンセルに
        }).then((result) => {
            if (result.isConfirmed) {
                // 「はい」が押された場合の処理
                console.log("ユーザーが『はい』を選択しました");
                // 例: サーバーに送信する処理
                // sendCarryOverAmount();
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                // 「いいえ」が押された場合の処理
                console.log("ユーザーが『いいえ』を選択しました");
            }
        });
    }
</script>

3. 呼び出し例（ボタンから表示）

Html
<button type="button" class="btn btn-primary" onclick="showCarryOverDialog()">
    繰越金額入力
</button>

補足

  • Bootstrap モーダルは不要になります。SweetAlert2 がモーダル表示を担当します。
  • icon: 'question' を warning や info に変えると見た目が変わります。
  • 入力欄を追加したい場合は input: 'number' を設定すれば、金額入力も可能です。

もし「はい／いいえ」だけでなく、金額入力付きの SweetAlert2 ダイアログにしたい場合は、次のようにできます。

Javascript
Swal.fire({
    title: 'お知らせ',
    text: '「繰越金額」を入力してください。',
    input: 'number',
    inputAttributes: { min: 0 },
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'キャンセル'
}).then((result) => {
    if (result.isConfirmed) {
        console.log("入力された金額:", result.value);
    }
});

✅ この方法なら、Bootstrap のモーダル HTML を削除しても動作しますし、ASP.NET Core MVC の任意のビューに簡単に組み込めます。

もしご希望なら、この SweetAlert2 ダイアログから 直接 Controller に AJAX 送信するコードも追加できますが、作りますか？
そうすれば「はい」クリック後に即サーバー処理が走ります。

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧