記事詳細

投稿日
2026年09月23日19時15分
タイトル

ASP.NET Core MVC: 　このコード“<tr class="payment-row" data-amount="@item.Amount" data-payment-id="@item.PaymentId" >”のように、data-amount 属性を付与しておく”という事の意味を教えてください

内容

なるほど、そのコードの意味をわかりやすく説明しますね 😊

コード例

Html
<tr class="payment-row" 
    data-amount="@item.Amount" 
    data-payment-id="@item.PaymentId">

1. 「data-〜」属性とは？

  • HTML5で導入されたカスタムデータ属性です。
  • data-amount や data-payment-id のように、data- で始まる名前を自由に作れます。
  • ブラウザにとっては特別な意味を持たないけれど、JavaScriptやCSSで自由に利用できる情報をHTML要素に埋め込むために使います。

2. このコードの意味

  • <tr>（テーブルの行）に、支払い金額や支払いIDといった追加情報を埋め込んでいます。
  • @item.Amount や @item.PaymentId は、ASP.NET Core MVC の Razor 構文で、サーバー側のモデルから値を埋め込んでいます。
  • こうしておくと、JavaScriptで次のように簡単に取得できます。
Javascript
document.querySelectorAll('.payment-row').forEach(row => {
    let amount = row.dataset.amount;       // data-amount の値
    let paymentId = row.dataset.paymentId; // data-payment-id の値
    console.log(amount, paymentId);
});

3. なぜこうするのか？

  • HTMLだけで表示しつつ、JavaScriptで動的処理（計算・フィルタ・クリックイベント処理など）を行うため。
  • 例えば、行をクリックしたらその支払い金額をポップアップ表示する、合計金額を計算する、などが可能になります。
  • サーバーに再リクエストせず、クライアント側で即座に処理できるのがメリットです。

💡 まとめ
「data-amount 属性を付与しておく」というのは、HTML要素に金額データを埋め込み、JavaScriptで簡単に利用できるようにするためです。
見た目には表示されないけれど、裏で動く処理のための“データのメモ”のような役割ですね。

もし希望があれば、この data-amount を使ってクリックした行の金額を合計するサンプルコードも作れますが、作りますか？

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