How to properly display a list in a table?

Question

Please tell me if I set this up wrong:

Model:

public List<double> Balance { get; set; } = new List<double>();

public List<double> MonthlyPrincipal { get; set; } = new List<double>();
    
public List<double> MonthlyInterest { get; set; } = new List<double>();

public List<double> AccumulativeInterest { get; set; } = new List<double>();

Controller:

for (int i = 0; i <= T; i++)
{
    //math                
    double interest = balance * (R / 1200);
    double principalPayment = monthlyPayment - interest;                       
    double interestTotal = (balance + interest) - balance;
    balance = balance - principalPayment; 
    cumulative = cumulative + interest;                     

    //Pushing math to arrays.
    balanceArray.Add(balance);
    interestArray.Add(interestTotal);
    principalpaymentArray.Add(principalPayment);
    cumulativeArray.Add(cumulative);
}
model.MonthlyPrincipal = principalpaymentArray;
model.Balance = balanceArray;
model.MonthlyInterest = interestArray;
model.AccumulativeInterest = cumulativeArray;

View:

<tbody>
    @for (var i = 1; i <= Model.Term; i++)
    {
        <tr>
            <td>@i</td>
            <td> @Html.DisplayFor(model => model.Payment)</td>
            <td>@Html.DisplayFor(model => model.MonthlyPrincipal)</td>
            <td>@Html.DisplayFor(model => model.MonthlyInterest)</td>
            <td>@Html.DisplayFor(model => model.AccumulativeInterest)</td>
            <td>@Html.DisplayFor(model => model.Balance)</td>
        </tr>
    }
</tbody>

Now what this is doing is printing every item in the array in the table columns. How do correct this?

Answer 1

This is the model you should be having. One for the loan payment transaction. The other one is the view model to display the result as shown

public class LoanPaymentVM
    {
        public decimal BFBalance { get; set; }
        public List<LoadPayment>? LoadPayments { get; set; }

        public LoanPaymentVM()
        {
            BFBalance = 0;
            LoadPayments = new List<LoadPayment>();
        }
    }

    public class LoadPayment
    {
            public DateTime PaymentDate { get; set; }
            public decimal PayAmt { get; set; }
            public decimal Interest { get; set; }
       
    }

Your controller should be very simple. Just put in the loan payment amount and interest will do. The calculation can be done one the view. Well you may pre-calculate the balance here though but that's all up to you.

public ActionResult LoanPayment() {

            LoanPaymentVM _lvm = new LoanPaymentVM();

            //Mock data for result

            _lvm.BFBalance = 10000;
            _lvm.LoadPayments.Add(
              new LoadPayment { PaymentDate = DateTime.Today.AddMonths(-2), PayAmt = 1000, Interest = 50 }
              );

            _lvm.LoadPayments.Add(
                new LoadPayment { PaymentDate = DateTime.Today.AddMonths(-1), PayAmt = 1000, Interest = 50 }
                );
            _lvm.LoadPayments.Add(
              new LoadPayment { PaymentDate = DateTime.Today.AddMonths(1), PayAmt = 1000, Interest = 50 }
              );
            // Mock data completed



            return View(_lvm);
        }

And here comes the View. For the variable Balance and AccInterest I defined, you may have to add @ depending what version of VS you are using.

there goes the view

@{
    decimal AccInterest = 0;
    decimal Balance = 0;
}

@{Balance = Model.BFBalance;}

<table class="table table-striped">

    <tr>
        <th>Date</th>
        <th>Payment</th>
        <th>Interest</th>
        <th>AccInterest</th>
        <th>Balance</th>
    </tr>

    <tr>
        <td colspan="4">Opening Balance</td>
        <td>@Model.BFBalance</td>
    </tr>
   
    @foreach (var item in Model.LoadPayments)
    {
        AccInterest = AccInterest + item.Interest;
        Balance = Balance - (item.PayAmt - item.Interest);

        <tr>
            <td>@item.PaymentDate.ToLongDateString()</td>
            <td>@item.PayAmt</td>
            <td>@item.Interest</td>
            <td>@AccInterest</td>
            <td>@Balance</td>
        </tr>