ASP.Net MVC - Building a table

I am new to MVC.. I am building a screen that shows a list of transactions. So, in my controller, I build a List<> TransactionLines. I then pass that to my View. My View then has code like this:

     <table width="1000" border="0" cellspacing="1" cellpadding="2">
        <tr class="headerRow">
            <td>
                Transaction Date
            </td>
            <td>
                Payee
            </td>
            <td align="right">
                Amount
            </td>
            <td>
                Category
            </td>
            <td>
                Cost Center
            </td>
            <td>
                Budget Assignment
            </td>
            <td>
            </td>
        </tr>
        <%
            decimal runningTotal = 0;
            int rowNum = 0;


            foreach (var trans in Model)
            {
                rowNum++;
                runningTotal += trans.TotalAmount;

                if (trans.IsSplit == false)
                {
                    foreach (var line in trans.Transactions)
                    {%>
        <tr <% if(rowNum % 2 == 0) { %> class="alternateRow" <%}%>>
            <td>
                <%=trans.TransactionDate.ToShortDateString()%>
            </td>
<%--            <td>
                <%=trans.IsCredit ? "CR" : "DR"%>
            </td>
--%>            <td>
                <%=trans.Payee %>
            </td>
            <td align="right" <% if(trans.IsCredit==false) { %>class="debitCell" <% }%>>
                <% =String.Format("{0:C2}", line.Amount)%>
            </td>
            <td>
                <%=String.Format("{0} - {1}", line.Category, line.SubCategory)%>
            </td>
            <td>
                <%=line.CostCenter%>
            </td>
            <td>
                <%=line.Budget%>
            </td>
            <td>
                <font color="gray">
                    <%=String.Format("{0:C2}", runningTotal)%></font>
            </td>
        </tr>
        <%
}
                }
                else
                { %>
        <tr <% if(rowNum % 2 == 0) { %> class="alternateRow" <%}%>>
            <td>
                <%=trans.TransactionDate.ToShortDateString()%>
            </td>
<%--            <td>
                <%=trans.IsCredit ? "CR" : "DR"%>
            </td>
--%>            <td>
                <%=trans.Payee %>
            </td>
            <td align="right">
                <%=String.Format("{0:C2}", trans.TotalAmount)%>
            </td>
            <td>
                &开发者_运维百科lt;%=trans.Transactions[0].Category + " ...[More]" %>
            </td>
            <td>
                <%=trans.Transactions[0].CostCenter + "...[More]" %>
            </td>
            <td>
            </td>
            <td>
                <font color="gray">
                    <%=String.Format("{0:C2}", runningTotal)%></font>
            </td>
        </tr>
        <%}
            }%>
        <tr>
            <td colspan="3" align="right">
                <strong>
                    <%=runningTotal.ToString("C2") %></strong>
            </td>
        </tr>
    </table>

Now, that may looks messy, and is a nightmare to debug. Also, I have a new requirement that will make that doubley hard to follow.

Is there a better way to do this?

---

Create a view model. Do NOT pass the List of TransactionLines to the view, instead create a class TransactionDisplayLine and pass a list of that to the view.

In your controller, loop through your TransactionLines and create a TransactionDisplayLine for each item.

The TransactionDisplayLine should contain things like this:

• Running Total
• trans.IsCredit ? "CR" : "DR" <-- The result of this as a string
• String.Format("{0:C2}", line.Amount) <-- The Amount as a formatted string already

Then the view itself just becomes a really simple foreach-loop that emits the lines but does not make any further decisions/logic about the data.

Since the TransactionDisplayLines are created in the controller, debugging becomes easy.

I noticed you have an even/odd row cycler in there as well, which further complicates things. Try putting that in an HTML Helper like the one from Phil Haack.

This ugly stuff:

<tr <% if(rowNum % 2 == 0) { %> class="alternateRow" <%}%>>

then becomes

<tr class="<%: Html.Cycle("alternateRow","") %>">

and your rowNum is gone as well.