了解です。
先ほどのコードを、より堅牢かつ柔軟に改良したバージョンを提示します。
今回は Index ビュー内の全行をチェックし、最初に条件に一致した行で SweetAlert2 モーダルを表示 するように変更しました。
また、JavaScript 側での判定に切り替え、Razor からはデータを安全に埋め込む形にしています。
Index.cshtml（改良版）
@model IEnumerable<YourNamespace.Models.YourModel>
@{
ViewData["Title"] = "Index";
}
<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<h2>Index</h2>
<table class="table">
<thead>
<tr>
<th>InOut</th>
<th>ItemName</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr data-inout="@item.InOut"
data-itemname="@item.ItemName"
data-amount="@item.Amount"
data-id="@item.Id">
<td>@item.InOut</td>
<td>@item.ItemName</td>
<td>@item.Amount</td>
<td>
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">Edit</a>
</td>
</tr>
}
</tbody>
</table>
<script>
document.addEventListener("DOMContentLoaded", function () {
// 全行を取得
const rows = document.querySelectorAll("tbody tr");
for (let row of rows) {
const inOut = row.dataset.inout;
const itemName = row.dataset.itemname;
const amount = parseFloat(row.dataset.amount);
const id = row.dataset.id;
// 条件判定
if (inOut === "入" && itemName === "現在残高" && amount === 0) {
Swal.fire({
title: '金額未入力',
text: 'Editボタンをクリックして金額を入力して下さい',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.isConfirmed) {
// Yes の場合、Edit ページへ遷移
window.location.href = '@Url.Action("Edit", "YourControllerName")' + '?id=' + encodeURIComponent(id);
}
// No の場合は何もしない
});
break; // 最初に一致した行で終了
}
}
});
</script>
改良点
- 全行チェック
- 最初の行だけでなく、全ての行を走査し、条件に一致した最初の行でモーダルを表示。
- データ属性 (
data-*) 利用- Razor から JavaScript へ安全に値を渡すため、
<tr> に data-inout などを埋め込み。
- JavaScript 側で条件判定
- Razor 側の条件分岐を減らし、ビューの再利用性を向上。
- 安全な URL 遷移
encodeURIComponent を使用して ID を安全にクエリパラメータ化。
この方法なら、データの並び順が変わっても確実に条件一致時にモーダルが表示されます。
もし 複数該当行があっても全部順番にモーダル表示 したい場合は、break; を削除すれば対応可能です。
この改良版、実際に 複数該当行がある場合も順番にモーダルを出すバージョン も作りますか？
そうすればユーザーが全ての未入力行を確認できます。
Powered by Froala Editor