了解です。
ASP.NET Core MVC の Create ビューで、bool 型の InOut 列を「入金(true) / 出金(false)」のトグルスイッチとして表示し、クリックで値を切り替える方法を、完全な動作例で説明します。
1. モデル
public class Transaction
{
public int Id { get; set; }
// 入金(true) / 出金(false)
public bool InOut { get; set; }
public decimal Amount { get; set; }
}
2. コントローラー（Create アクション）
using Microsoft.AspNetCore.Mvc;
public class TransactionsController : Controller
{
[HttpGet]
public IActionResult Create()
{
return View(new Transaction { InOut = true }); // 初期値: 入金
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Transaction model)
{
if (ModelState.IsValid)
{
// DB保存処理など
// _context.Transactions.Add(model);
// _context.SaveChanges();
return RedirectToAction(nameof(Index));
}
return View(model);
}
}
3. Create.cshtml（トグルスイッチ付きフォーム）
@model Transaction
@{
ViewData["Title"] = "Create Transaction";
}
<h2>Create Transaction</h2>
<form asp-action="Create" method="post">
<div class="form-group">
<label>入出金</label>
<!-- 隠しフィールドで bool 値を送信 -->
<input type="hidden" asp-for="InOut" />
<!-- 見た目用のトグルボタン -->
<button type="button" id="toggleInOut" class="btn btn-success">
入金
</button>
</div>
<div class="form-group">
<label asp-for="Amount"></label>
<input asp-for="Amount" class="form-control" />
<span asp-validation-for="Amount" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">保存</button>
</form>
@section Scripts {
<script>
document.addEventListener("DOMContentLoaded", function () {
const hiddenInput = document.querySelector("input[name='InOut']");
const toggleBtn = document.getElementById("toggleInOut");
function updateButton() {
if (hiddenInput.value === "true") {
toggleBtn.textContent = "入金";
toggleBtn.classList.remove("btn-danger");
toggleBtn.classList.add("btn-success");
} else {
toggleBtn.textContent = "出金";
toggleBtn.classList.remove("btn-success");
toggleBtn.classList.add("btn-danger");
}
}
toggleBtn.addEventListener("click", function () {
hiddenInput.value = hiddenInput.value === "true" ? "false" : "true";
updateButton();
});
// 初期表示
updateButton();
});
</script>
}
4. 動作仕様
<input type="hidden" asp-for="InOut" />
→ 実際にサーバーへ送信される値（true/false）。- トグルボタン
→ 見た目だけの UI。クリックで hidden の値を切り替え。 - 色とラベル
true → 緑色ボタン「入金」false → 赤色ボタン「出金」
- POST 時
→ InOut の値がモデルにバインドされる。
5. メリット
- シンプル：JavaScript で hidden 値を切り替えるだけ。
- ASP.NET Core MVC のモデルバインディングに完全対応。
- Bootstrap を使えば見た目も簡単に整えられる。
もしご希望であれば、このトグルを Bootstrap 5 のスイッチ風チェックボックス に置き換えるバージョンも作れます。
そちらだと JavaScript なしでも動作します。
このまま進める場合、次は Bootstrap スイッチ風の実装 を追加してお渡しできますが、作りますか？
そうすればより UI が自然になります。
Powered by Froala Editor