記事詳細

投稿日

2026年09月21日19時15分

タイトル

ASP.NET Core MVC:　Model“Payment”でIdはPaymentIdの行の中で「金額列（Amount）」が“0”の値の行がある場合に、SweetAlert2 のダイアログを表示して、ダイアログ内の<input id="swalAmount" type="number" class="form-control" placeholder="金額を入力">',に金額を入力して、データベーステーブルのその行の「金額列（Amount）」の値を変更、更新する、jqueryのコードを教えてください。 ASP.NET Core MVC：　View

内容

なるほど、やりたいことはこうですね。

Paymentテーブルの中で Amount が 0 の行を検出
SweetAlert2 で金額入力ダイアログを表示
入力された金額をサーバーに送信してデータベースを更新
更新後に画面をリフレッシュまたは反映

以下は jQuery + SweetAlert2 を使ったサンプルコードです。
（ASP.NET Core MVC 側では、/Payment/UpdateAmount のような POST アクションを用意しておく必要があります）

例: jQueryコード（Index.cshtml内）

Html

.payment-row に <tr> や <div> に data-payment-id と data-amount を持たせておく
@foreach (var item in Model) {

    <tr class="payment-row" data-amount="@item.Amount" data-payment-id="@item.PaymentId" >

        <td>@item.PaymentId</td>

        <td>@item.Posted.ToShortDateString()</td>

        <td>@(item.InOut ? "入金" : "出金")</td>

        <td>@item.SubjectNameNavigation?.CourseName</td>

        <td>@item.ItemName</td>

        <td>@item.PaymentName</td>

        <td>@item.PaymentTypeNavigation?.TypeName</td>

        <td>@item.PaymentMethodNavigation?.MethodName</td>

        <td>@item.IncomeCategoryNavigation?.CategoryName</td>

        <td>@item.IncomeTypeNavigation?.TypeName</td>

        <td class="text-center"> @item.Amount</td>

        <td class="text-center" style="color:gray;">

            @String.Format(System.Globalization.CultureInfo.CurrentCulture, "{0:C}", @item.Balance)  

        </td>                                                       

        <td> 

            <a asp-action="Edit" asp-route-id="@item.PaymentId">編集</a> |

            <a asp-action="Details" asp-route-id="@item.PaymentId">詳細</a> |

            <a asp-action="Delete" asp-route-id="@item.PaymentId">削除</a>

        </td>

    </tr>

<script>
$(document).ready(function () {
    // Amountが0の行を探す
    $(".payment-row").each(function () {
        var amount = $(this).data("amount");
        var paymentId = $(this).data("payment-id");

        if (amount === 0) {
            Swal.fire({
                title: '金額を入力してください',
                html: '<input id="swalAmount" type="number" class="form-control" placeholder="金額を入力">',
                showCancelButton: true,
                confirmButtonText: '更新',
                cancelButtonText: 'キャンセル',
                preConfirm: () => {
                    const value = document.getElementById('swalAmount').value;
                    if (!value || value <= 0) {
                        Swal.showValidationMessage('1以上の金額を入力してください');
                        return false;
                    }
                    return value;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    var newAmount = result.value;

                    // Ajaxでサーバーに送信
                    $.ajax({
                        url: '/Payment/UpdateAmount',
                        type: 'POST',
                        data: {
                            paymentId: paymentId,
                            amount: newAmount
                        },
                        success: function (res) {
                            Swal.fire('更新完了', '金額が更新されました', 'success')
                                .then(() => location.reload());
                        },
                        error: function () {
                            Swal.fire('エラー', '更新に失敗しました', 'error');
                        }
                    });
                }
            });

            // 最初の0円行だけ処理する場合は break
            return false;
        }
    });
});
</script>

ASP.NET Core MVC 側の例（Controller）

Csharp
[HttpPost]
public IActionResult UpdateAmount(int paymentId, decimal amount)
{
    var payment = _context.Payments.FirstOrDefault(p => p.PaymentId == paymentId);
    if (payment == null) return NotFound();

    payment.Amount = amount;
    _context.SaveChanges();

    return Ok();
}

💡 ポイント

.payment-row は <tr> や <div> に data-payment-id と data-amount を持たせておくと便利です。
SweetAlert2 の preConfirm を使うことで、入力チェックを行ってから送信できます。
更新後は location.reload() で画面を再読み込みするか、該当行だけ書き換えることも可能です。

もし希望があれば、このコードを 「最初の0円行だけ」ではなく「全ての0円行を順番に処理する」 形にもできますが、どうしますか？
そうすれば複数の未入力金額を一度に更新できます。

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧