記事詳細

投稿日

2026年10月24日17時39分

タイトル

ASP.net Core MVC: @foreach (var item in Model) { <tr class="payment-row" data-amount="@item.Amount" data-payment-id="@item.PaymentId" >このpayment-rowの最初のrowの”＠item-Amount"の値を取得する方法を教えてください。

内容

なるほど、
ASP.NET Core MVC の Razor ビューで @foreach (var item in Model) を使って <tr> を生成している場合、最初の行の @item.Amount の値を取得したいということですね。

これは「サーバー側で取得する方法」と「クライアント側（JavaScript）で取得する方法」の2通りがあります。

1. サーバー側（Razor）で取得する方法

もし「最初の行の値」をサーバー側で使いたい場合は、Model.First() または Model[0] を使います。

Csharp
@{
    var firstAmount = Model.First().Amount; // IEnumerable<T> の場合
    // var firstAmount = Model[0].Amount; // List<T> の場合
}

<p>最初の Amount: @firstAmount</p>

これで最初の要素の Amount を Razor 内で取得できます。

2. クライアント側（JavaScript）で取得する方法

もし「画面表示後に JavaScript で取得したい」場合は、data-amount 属性を利用します。

Html
<table id="payment-table">
    @foreach (var item in Model)
    {
        <tr class="payment-row"
            data-amount="@item.Amount"
            data-payment-id="@item.PaymentId">
            <td>@item.PaymentId</td>
            <td>@item.Amount</td>
        </tr>
    }
</table>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 最初の payment-row を取得
        const firstRow = document.querySelector(".payment-row");
        if (firstRow) {
            const firstAmount = firstRow.getAttribute("data-amount");
            console.log("最初の Amount:", firstAmount);
        }
    });
</script>

ポイント

サーバー側で取得 → Razor の Model.First() を使う。
クライアント側で取得 → document.querySelector(".payment-row") で最初の行を取得し、getAttribute("data-amount") で値を読む。
Model が空の場合は必ず null チェックを入れる。

💡もし「最初の行の Amount を JavaScript に渡したい」なら、サーバー側で直接埋め込むこともできます。

Html
<script>
    const firstAmount = @Model.First().Amount;
    console.log(firstAmount);
</script>

もし希望が「JavaScriptで取得して処理する」なら、上記の クライアント側の方法がベストです。
必要なら jQuery 版も書けますが、今の標準は Vanilla JS で十分です。

✅ 次は、私が 最初の行の Amount を取得して、その値を使って他の行をハイライトするコードも作れますが、やりますか？
そうすれば実用的なサンプルになります。

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧