記事詳細

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

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-から始まる名前を自由に設定できます。
  • ブラウザの標準機能には直接関係しませんが、JavaScriptやCSSから参照できる補助情報として使われます。
  • つまり、画面に表示するだけではなく、裏側で処理するための情報を要素に持たせる仕組みです。

2. このコードがしていること

  • <tr>（テーブル行）に、支払い金額と支払いIDを埋め込んでいます。
  • @item.Amount や @item.PaymentId は Razor のサーバー側変数で、モデルの値をHTMLに差し込みます。
  • こうしておくと、JavaScriptで次のように簡単にアクセスできます。
Javascript
document.querySelectorAll('.payment-row').forEach(row => {
    const amount = row.dataset.amount;       // data-amount の値
    const paymentId = row.dataset.paymentId; // data-payment-id の値
    console.log(`金額: ${amount}, ID: ${paymentId}`);
});

3. なぜ付与するのか？

  • クライアント側で動的処理（クリックイベント、フィルタリング、計算など）を行うため。
  • サーバーに再アクセスせず、ブラウザ内で即座に必要なデータを利用できる。
  • 例えば、行をクリックしたらその金額を合計に加える、特定のIDの行だけをハイライトする、といった処理が可能になります。

💡 まとめ
「data-amount 属性を付与しておく」というのは、テーブル行に金額データを持たせて、JavaScriptで簡単に利用できるようにするためです。
見た目には表示されないけれど、動的な機能を実装するための“隠れた情報”を仕込んでいるイメージです。

これを応用して、クリックした行の金額をリアルタイムで合計するサンプルも作れます。
もし必要なら、そのコードも作りますがどうしますか？

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