記事詳細

投稿日
2026年08月22日17時04分
タイトル

ASP.NET Core MVC:　Payments/Indexコントローラー側のコード：” int runningTotal = 0; foreach (var t in paymentBalance) { runningTotal += t.Amount; t.Balance = runningTotal; }”の”runningTotal"の値をユーザーの入力させる方法及び、このコードを 「初期値を入力 → Ajax で即時反映」するバージョン にす

内容

了解しました。
ご質問の内容は、ASP.NET Core MVC の Payments/Index アクションで使っている

Csharp
int runningTotal = 0;
foreach (var t in paymentBalance)
{
    runningTotal += t.Amount;
    t.Balance = runningTotal;
}

の runningTotal の初期値をユーザー入力にする ＋ 初期値を入力したら Ajax で即時反映する という要件ですね。

以下に、サーバー側（Controller）＋ビュー（Razor）＋Ajax の構成例を示します。

1. モデル例

Csharp
public class Payment
{
    public int Id { get; set; }
    public int Amount { get; set; }
    public int Balance { get; set; }
}

2. コントローラー例

Csharp
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class PaymentsController : Controller
{
    // ダミーデータ
    private static readonly List<Payment> _payments = new()
    {
        new Payment { Id = 1, Amount = 100 },
        new Payment { Id = 2, Amount = 200 },
        new Payment { Id = 3, Amount = 300 }
    };

    // 初期表示
    public IActionResult Index()
    {
        return View(_payments);
    }

    // Ajaxで初期値を受け取り、計算結果を返す
    [HttpPost]
    public IActionResult CalculateBalances([FromBody] int initialValue)
    {
        int runningTotal = initialValue;

        var updated = _payments
            .Select(p => new Payment
            {
                Id = p.Id,
                Amount = p.Amount,
                Balance = (runningTotal += p.Amount)
            })
            .ToList();

        return Json(updated);
    }
}

3. ビュー（Index.cshtml）

Cshtml
@model List<Payment>

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

<h2>Payments</h2>

<label>初期値: </label>
<input type="number" id="initialValue" value="0" />
<button id="calcBtn">計算</button>

<table id="paymentsTable" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Amount</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var p in Model)
        {
            <tr>
                <td>@p.Id</td>
                <td>@p.Amount</td>
                <td>@p.Balance</td>
            </tr>
        }
    </tbody>
</table>

@section Scripts {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("#calcBtn").on("click", function () {
        var initialValue = parseInt($("#initialValue").val()) || 0;

        $.ajax({
            url: '@Url.Action("CalculateBalances", "Payments")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(initialValue),
            success: function (data) {
                var tbody = $("#paymentsTable tbody");
                tbody.empty();
                data.forEach(function (p) {
                    tbody.append(
                        "<tr><td>" + p.id + "</td><td>" + p.amount + "</td><td>" + p.balance + "</td></tr>"
                    );
                });
            },
            error: function () {
                alert("計算に失敗しました。");
            }
        });
    });
</script>
}

4. 動作の流れ

  1. ページ表示時は Index アクションで初期データを表示。
  2. ユーザーが「初期値」を入力して [計算] ボタンを押す。
  3. JavaScript（jQuery Ajax）が CalculateBalances に初期値を送信。
  4. サーバー側で runningTotal をその初期値から計算し直し、JSON で返す。
  5. クライアント側でテーブルを即時更新。

5. 即時反映（ボタン不要）にする場合

#calcBtn のクリックイベントではなく、#initialValue の input イベントで Ajax を呼び出せば、入力するたびに即時反映されます。

Javascript
$("#initialValue").on("input", function () {
    var initialValue = parseInt($(this).val()) || 0;
    // 上記と同じAjax処理をここに
});

✅ この方法なら、runningTotal の初期値をユーザーが自由に入力でき、Ajax で即時に計算結果を反映できます。
もし希望があれば、このコードを ボタンなしリアルタイム更新版 に完全書き換えたバージョンも作れます。

作りますか？
リアルタイム更新版にすれば、入力するたびにテーブルが自動更新されます。

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