記事詳細

投稿日

2026年09月23日19時31分

タイトル

ASP.NET Core MVC: 　このコード“<tr class="payment-row" data-amount="@item.Amount" data-payment-id="@item.PaymentId" >”のように、data-amount 属性を付与してあります。data-amountをクリックした行の金額をリアルタイムで合計するデモコードを教えてください。

内容

なるほど！
<tr> に data-amount を付けておき、クリックした行の金額をリアルタイムで合計する簡単なデモコードですね。
以下は ASP.NET Core MVC の Razor ビューで動く、シンプルな JavaScript を使った例です。

ビュー例（Razor + JavaScript）

Cshtml
<table id="payment-table">
    <thead>
        <tr>
            <th>支払ID</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Payments)
        {
            <tr class="payment-row"
                data-amount="@item.Amount"
                data-payment-id="@item.PaymentId">
                <td>@item.PaymentId</td>
                <td>@item.Amount.ToString("N0") 円</td>
            </tr>
        }
    </tbody>
</table>

<div>
    <strong>合計:</strong> <span id="total-amount">0</span> 円
</div>

@section Scripts {
    <script>
        let total = 0;

        document.querySelectorAll(".payment-row").forEach(row => {
            row.addEventListener("click", () => {
                const amount = parseFloat(row.dataset.amount);
                total += amount;
                document.getElementById("total-amount").textContent = total.toLocaleString();
                row.classList.add("selected"); // 選択状態を視覚的に表示
            });
        });
    </script>
}

ポイント

data-amount は row.dataset.amount で取得できます。
total をクリックごとに加算し、#total-amount に表示。
.selected クラスを付ければ、クリック済み行をハイライトできます（CSSで色付け可能）。
Razor の @item.Amount は数値型（decimalやdouble）で渡すと扱いやすいです。

もし「クリックした行をもう一度クリックすると合計から減算する」ような トグル式 にしたデモも作れますが、今のコードは「クリックした分だけ加算」するシンプル版です。

💡 次は、選択状態を切り替えて合計を再計算するバージョンも作ってみますか？
そうすると、リアルタイム集計がもっと便利になります。

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧