SUM of the Table cell values and show total on bottom end

March 20, 2022

I’m new to ASP.NET and still learning by doing self-studies. So In my ASP.NET MVC application on the view, there are tables that I load the data and show to the user. Here I want to show the Total value at the end of the Amount Cell by sum the Invoice Amount column data. The data type is decimal. I’m struggling to do it because I’m still not good at javascript. So can I get help here? Thanks.

This is my Table

 <table class="table">
   <tr>
     <th> Inoice Number </th>
     <th> Invoice Amount </th>
     <th> Attachment </th>
     <th></th>
   </tr> @foreach (var item in Model.PaybillInvoiceDetailsList) { <tr>
     <td> @Html.DisplayFor(modelItem => item.Invoice_No) </td>
     <td> @Html.DisplayFor(modelItem => item.Invoice_Amount) </td>
     <td>
       <a href="@Url.Action(" RetrieveImagePbI", new { id=item.Id })" target="_blank" rel="noreferrer noopener">
         <img width="100" height="100" border="0" class="m1-1" align="center" src="@Url.Action(" RetrieveImagePbI", new { id=item.Id })" />
       </a>
     </td>
   </tr> }
 </table>

>Solution :

You can simply use @Model.PaybillInvoiceDetailsList.Sum(i => i. Invoice_Amount).ToString("0.##")

The full changes can be

 <table class="table">
   <tr>
     <th> Inoice Number </th>
     <th> Invoice Amount </th>
     <th> Attachment </th>
     <th></th>
   </tr>
   @foreach (var item in Model.PaybillInvoiceDetailsList) { <tr>
     <td> @Html.DisplayFor(modelItem => item.Invoice_No) </td>
     <td> @Html.DisplayFor(modelItem => item.Invoice_Amount) </td>
     <td>
       <a href="@Url.Action(" RetrieveImagePbI", new { id=item.Id })" target="_blank" rel="noreferrer noopener">
         <img width="100" height="100" border="0" class="m1-1" align="center" src="@Url.Action(" RetrieveImagePbI", new { id=item.Id })" />
       </a>
     </td>
   </tr> }
   <tr>
    <td colspan"3">Total</td>
    <td>@Model.PaybillInvoiceDetailsList.Sum(i => i.Invoice_Amount).ToString("0.##")</td>
   </tr>
 </table>