вот представление
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model IEnumerable<BuildingFlow.Services.Models.ViewModels.CostItemViewModel>

@{
  ViewData["Title"] = "Index";
  ViewData["statusClass"] = "";
}

@section VendorStyles {
  <link rel="stylesheet" href="~/vendor/libs/datatables-bs5/datatables.bootstrap5.css">
  <link rel="stylesheet" href="~/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css">
  <link rel="stylesheet" href="~/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css">
  <link rel="stylesheet" href="~/vendor/libs/sweetalert2/sweetalert2.css"/>
  <link rel="stylesheet" href="~/vendor/libs/&#64;form-validation/form-validation.css"/>
}

@section VendorScripts {
  <script src="~/vendor/libs/moment/moment.js"></script>
  <script src="~/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
  <script src="~/vendor/libs/sweetalert2/sweetalert2.js"></script>
  <script src="~/vendor/libs/&#64;form-validation/popular.js"></script>
  <script src="~/vendor/libs/&#64;form-validation/bootstrap5.js"></script>
  <script src="~/vendor/libs/&#64;form-validation/auto-focus.js"></script>
  <script src="~/vendor/libs/cleavejs/cleave.js"></script>
  <script src="~/vendor/libs/cleavejs/cleave-phone.js"></script>
}

@section PageScripts {
  @*     <script src="~/js/transactions-delete.js"></script> *@
  <script src="~/js/_buildingFlow-costitem-list.js"></script>
}

<div class="row g-6 mb-6">
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">@ViewData["TotalTransactions"]</h4>
              <p class="text-primary mb-0"></p>
            </div>
            <small class="mb-0">Total Transactions</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-primary">
              <i class="bx bx-transfer-alt bx-lg"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">$@ViewData["TotalPaidTransactions"]</h4>
              <p class="text-success mb-0"></p>
            </div>
            <small class="mb-0">Total Paid</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-success">
              <i class="bx bx-user-check bx-lg"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">$@ViewData["TotalDueTransactions"]</h4>
              <p class="text-danger mb-0"></p>
            </div>
            <small class="mb-0">Total Due</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-danger">
              <i class="bx bx-group bx-lg"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">$@ViewData["TotalCanceledTransactions"]</h4>
              <p class="text-success mb-0"></p>
            </div>
            <small class="mb-0">Total Canceled</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-warning">
              <i class="bx bx-user-voice bx-lg"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@* CostItems Table *@
<div class="card">
    <div class="card-datatable table-responsive pb-0">
    <table id="costItemsTable" class="table mb-6">
      <thead class="border-top">
      <tr class="text-nowrap">
        <th></th>
        <th style="display:none;">@Html.DisplayNameFor(model => model.Id)</th>
        <th>
          @Html.DisplayNameFor(model => model.NumberItem)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.NodeCode)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.CostName)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.UnitOfMeasure)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.ConsumptionCoefficient)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.TotalCount)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.MatEquipmCost)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.SmpPnpCost)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.TotalCost)
        </th>


        <th style="display:none;">
          @Html.DisplayNameFor(model => model.ISRComment)
        </th>
        <th style="display:none;">
          @Html.DisplayNameFor(model => model.ContractorComment)
        </th>

        <th style="display:none;">
          @Html.DisplayNameFor(model => model.BOCount)
        </th>

        <th style="display:none;">
          @Html.DisplayNameFor(model => model.MatEquipmPrice)
        </th>
        <th style="display:none;">
          @Html.DisplayNameFor(model => model.SmpPnpPrice)
        </th>
        <th style="display:none;">
          @Html.DisplayNameFor(model => model.TotalPrice)
        </th>


        <th style="display:none;">
          @Html.DisplayNameFor(model => model.ProjectId)
        </th>
        <th style="display:none;">Actions</th>
      </tr>
      </thead>
      <tbody>
      @if (Model?.Any() == true)
      {
        @foreach (var item in Model)
        {
          <tr>
            <td></td>
                            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.NumberItem)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.NodeCode)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.CostName)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.UnitOfMeasure)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.ConsumptionCoefficient)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.TotalCount)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.MatEquipmCost)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.SmpPnpCost)
            </td>
            <td>
              @Html.DisplayFor(modelItem => item.TotalCost)
            </td>

                            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.ISRComment)
            </td>
                            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.ContractorComment)
            </td>


            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.BOCount)
            </td>

            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.MatEquipmPrice)
            </td>
            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.SmpPnpPrice)
            </td>
            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.TotalPrice)
            </td>

            <td style="display:none;">
              @Html.DisplayFor(modelItem => item.ProjectId)
            </td>
            <td class="text-nowrap hidden-column">
              <a asp-action="Update" asp-route-id="@item.Id" class="btn btn-sm btn-icon shadow-none">
                <i class='bx bx-edit'></i>
              </a>
            </td>
          </tr>
        }
      }
      </tbody>
    </table>
  </div>
</div>
используй asp таг хелперы