ASP.Net MVC - Building a table

Question

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>
                <%=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?

I would recommend you use the Razor view engine if you are no too far into your project - the syntax is much cleaner. Also consider preparing some textual output in your controller and pass a simple View Model perhaps using HTML helpers to encapsualate some of the simpler logic in your View ... — JcMaltaDev
– JcMaltaDev, Commented Jan 16, 2011 at 5:25

Michael Stum · Accepted Answer · 2011-01-16 06:20:28Z

3

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.

answered Jan 16, 2011 at 6:20

Michael Stum

182k120 gold badges412 silver badges541 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Craig Over a year ago

Thanks Michael. I'm going to impliment that way. Thanks.

Collectives™ on Stack Overflow

ASP.Net MVC - Building a table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related