なるほど、
今のコードは runningTotal を 0 からスタートしてループで累積計算していますが、
「最初の値（初期値）をユーザーに入力させたい」ということですね。
ASP.NET Core MVC では、ユーザー入力を受け取るには以下の流れになります。
1. ViewModel に初期値プロパティを追加
まず、ビューからコントローラーに値を渡すための ViewModel を作ります。
// Models/PaymentViewModel.cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public class PaymentViewModel
{
[Display(Name = "初期残高")]
public int InitialRunningTotal { get; set; } // ユーザーが入力する初期値
public List<Payment> Payments { get; set; } = new();
}
// サンプル用 Payment モデル
public class Payment
{
public int Amount { get; set; }
public int Balance { get; set; }
}
2. コントローラーで GET / POST を用意
ユーザーがフォームで初期値を入力 → POST で受け取って計算します。
// Controllers/PaymentsController.cs
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
public class PaymentsController : Controller
{
[HttpGet]
public IActionResult Index()
{
// 初期表示（初期値は0）
var model = new PaymentViewModel
{
Payments = GetSamplePayments()
};
return View(model);
}
[HttpPost]
public IActionResult Index(PaymentViewModel model)
{
// 入力された初期値を使って計算
int runningTotal = model.InitialRunningTotal;
foreach (var t in model.Payments)
{
runningTotal += t.Amount;
t.Balance = runningTotal;
}
return View(model);
}
// ダミーデータ
private List<Payment> GetSamplePayments()
{
return new List<Payment>
{
new Payment { Amount = 1000 },
new Payment { Amount = -200 },
new Payment { Amount = 500 }
};
}
}
3. ビューでフォームを作成
Views/Payments/Index.cshtml
Razor で初期値入力欄と送信ボタンを作ります。
@model PaymentViewModel
<h2>Payments</h2>
<form asp-action="Index" method="post">
<div>
<label asp-for="InitialRunningTotal"></label>
<input asp-for="InitialRunningTotal" />
</div>
<table>
<thead>
<tr>
<th>Amount</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Payments.Count; i++)
{
<tr>
<td>
<input asp-for="@Model.Payments[i].Amount" />
</td>
<td>@Model.Payments[i].Balance</td>
</tr>
}
</tbody>
</table>
<button type="submit">計算</button>
</form>
4. 動作イメージ
- ページを開くと初期残高入力欄と金額リストが表示される
- 初期残高を入力して「計算」ボタンを押す
- コントローラーの
POST Index が呼ばれ、
runningTotal の初期値としてユーザー入力が使われる - 計算結果がビューに反映される
✅ ポイント
runningTotal の初期値をユーザー入力にするには、フォームから値を受け取る必要がある- そのために ViewModel を使って、初期値と支払いリストをまとめてやり取りする
- GET と POST のアクションを分けることで、初期表示と計算後表示を切り替えられる
もし希望があれば、このコードを 「初期値を入力 → Ajax で即時反映」するバージョン にもできます。
そうすればページリロードなしで残高が更新されます。
この Ajax 版も作りますか？
そうすればユーザー体験がかなり良くなります。
Powered by Froala Editor