記事詳細

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

Create.cshtmlにアクセス時、データベースのPaymentsのSubjectNameIdの列に(int 14)のデータがない場合、「“繰越金額”を入力して下さい」Yes,No,というSweetAlert2 を使ったモーダルダイアログを表示し、<form asp-action="Create">内にある<select asp-for="SubjectNameId" class="form-control" asp-

内容

わかりました。
やりたいことは以下の流れですね。

  1. Create.cshtml にアクセスしたときに、
    DB の Payments テーブルの SubjectNameId に 14 が存在しない場合だけ SweetAlert2 モーダルを表示。
  2. モーダルで「Yes」を押したら <select asp-for="SubjectNameId"> の値を 14 に自動設定。
  3. 「No」を押したら何もしない（または別の処理）。

実装の全体像

1. コントローラー側で存在チェック

まず、Create アクションで DB を確認し、存在しない場合にフラグを View に渡します。

Csharp
// PaymentsController.cs
public IActionResult Create()
{
    bool hasSubject14 = _context.Payments.Any(p => p.SubjectNameId == 14);
    ViewBag.ShowModal = !hasSubject14;

    // ViewBag.SubjectNameId は通常の SelectList を設定
    ViewBag.SubjectNameId = new SelectList(_context.SubjectNames, "Id", "Name");

    return View();
}

2. Create.cshtml 側で SweetAlert2 を表示

ViewBag.ShowModal が true のときだけ SweetAlert2 を呼び出し、
Yes の場合に <select> の値を 14 に設定します。

Cshtml
@model YourNamespace.Models.Payment

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<form asp-action="Create">
    <div class="form-group">
        <label asp-for="SubjectNameId" class="control-label"></label>
        <select asp-for="SubjectNameId" class="form-control" asp-items="ViewBag.SubjectNameId"></select>
    </div>
    <!-- 他のフォーム項目 -->
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var showModal = @((ViewBag.ShowModal ?? false).ToString().ToLower());

            if (showModal) {
                Swal.fire({
                    title: '“繰越金額”を入力して下さい',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // <select asp-for="SubjectNameId"> の値を 14 に設定
                        const select = document.querySelector('select[name="SubjectNameId"]');
                        if (select) {
                            select.value = "14";
                        }
                    }
                });
            }
        });
    </script>
}

3. ポイント

  • DB チェックはサーバー側で行う
    → ページロード時に JS で DB を直接見ることはできないので、
    コントローラーで ViewBag.ShowModal をセットするのが安全。
  • SweetAlert2 の Yes/No
    → showCancelButton: true と result.isConfirmed で判定。
  • 値の設定
    → <select> の value を "14" にすれば選択状態になる。

✅ この方法なら、

  • DB に 14 が存在しないときだけモーダルが出る
  • Yes を押すと自動で <select> が 14 にセットされる
  • No を押すと何もしない
    が実現できます。

もし希望があれば、この SweetAlert2 の Yes 押下後に即フォーム送信するバージョン も作れますが、
今の仕様だと「選択だけしてユーザーに他の入力もさせる」形になっています。

作りますか？
そうすれば「Yes → 自動選択 → 即送信」まで一気にできます。

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