記事詳細

投稿日

2026年08月28日03時39分

タイトル

ASP.NET Core MVC: 毎月の1日に、Create.cshtmlを表示した時に「“繰越金額”を入力しますか？」という、SweetAlert2 を使った見た目の良いYes,No、のダイアログを表示する方法を教えてください

内容

OK、要件を整理すると

ASP.NET Core MVC
Create.cshtml（Razorビュー）を表示したときに
毎月1日だけ
SweetAlert2 を使って「繰越金額を入力しますか？」という Yes / No ダイアログを表示
Yesなら入力フォームへ進む（または何らかの処理）、Noならスキップ

ということですね。

以下のように実装できます。

1. SweetAlert2 の読み込み

CDNで読み込むのが簡単です。Create.cshtml の <head> または _Layout.cshtml に追加します。

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

<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. Razorビュー（Create.cshtml）で日付判定とダイアログ表示

Cshtml
@{
    ViewData["Title"] = "Create";
    var today = DateTime.Now; // サーバー側で日付取得
}

<h2>新規作成</h2>

<!-- ここにフォームなどの内容 -->

@section Scripts {
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // サーバー側で1日かどうかを判定してJSに渡す
            var isFirstDay = @((today.Day == 1).ToString().ToLower());

            if (isFirstDay) {
                Swal.fire({
                    title: '繰越金額を入力しますか？',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'はい',
                    cancelButtonText: 'いいえ',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // 「はい」選択時の処理
                        console.log("繰越金額入力へ進む");
                        // 例: 特定の入力欄にフォーカス
                        const input = document.querySelector("#CarryOverAmount");
                        if (input) input.focus();
                    } else {
                        // 「いいえ」選択時の処理
                        console.log("繰越金額入力をスキップ");
                        // 例: 入力欄を無効化
                        const input = document.querySelector("#CarryOverAmount");
                        if (input) input.disabled = true;
                    }
                });
            }
        });
    </script>
}

3. ポイント解説

日付判定はサーバー側（C#）で行い、isFirstDay を JavaScript に渡すことで、クライアントの時計改ざんの影響を受けにくくします。
SweetAlert2 の showCancelButton を true にすると Yes/No のようなUIが作れます。
reverseButtons: true でボタンの並びを逆にできます（UI的にYesを右側に置くなど）。
Yes/No の結果に応じて、フォームの入力欄を有効化/無効化したり、別ページに遷移させることも可能です。

4. もしYesで別ページに遷移したい場合

Javascript
if (result.isConfirmed) {
    window.location.href = '/CarryOver/Create';
}

✅ この方法なら、毎月1日だけ SweetAlert2 のダイアログが表示され、見た目もきれいに制御できます。

もし希望があれば、このダイアログを 「1日だけでなく、まだ入力していない場合のみ」 表示するように、サーバー側のDBチェックと組み合わせたコードも作れますが、作りますか？
そうすれば、1日に何度も表示されるのを防げます。

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧